09:21
This is the most apprehensive and downbeat I’ve been about the project so far. I’m concerned that as I try to fix the problems with my data structuring the whole thing will become unpicked.
I guess before I get into it I ought to make a list of what I need to achieve and make sure everything I do is consistent with that:
1) be able to construct the html template with the correct .png file indicator
This means each user object needs to have a binary property on which to select the image. At the moment I’m just constructing the image url around the property offline (pointing at offline.png and that’s a problem because there is no online just the name of the game in progress.
Maybe the best thing to do, given that I’ve chosen the template approach, is to update the broadcast icon along with the refresh function that makes an api call to the stream. That seems like the best approach as I write.
Ideally I’d like the background color to be red as well, but this is hardly vital.
2) placeholder display item for non-existent accounts
Off the top of my head, I’m going to say that the best thing to do here is have a placeholder user object. The for loop in the render function can check some property of the array it’s passed and point at the placeholder if appropriate.
Will that work? Don’t know.
3) initial call to render when the api call resolves on load
I’m assuming this can be achieved relatively easily. Not going to think too much about it now.
4) hyperlinks to user accounts
Again, this should be straightforward once I get the data sorted. Hyperlink to page will be a property of each user object that can be included in the template
NB One of my issues is that to constuct the user entries from the template the render function loops over an array. If everything I have is stored in objects that might be complexified, but I assume that I can make use of Object.keys.
To Do
- user object property for path to broadcast icon which updates on refresh
- write api responses to data.objects instead of pushing to data.accounts.array
- create promise for initial api call -> view.render
Log
09:45 - 10:08
Straightforward to get objects from the API saved as data.objects, but it messes up my filter functions. I think I need to add them to a master accounts object so I can use array methods on it.
10:13
Easy enough to do, but can I work with it now?
11:15
Progress has halted. Not because there’s an issue with the logic but - as is so often the case - there seems to be some sort of syntax error that I can’t debug. Here’s the code:
filterUsers() {
if (data.currentFilter === 'all') {
return data.accounts;
}
else {
return (Object.keys(data.accounts).filter(function(userName) {
debugger;
return data.currentFilter === 'online' ? data.accounts[userName].stream.stream !== null : data.accounts[userName].stream.stream === null
}))
},
The problem is that data.accounts[userName].stream.stream is undefined. But th debugger shows userName and the data.accounts objects to have the right properties.
I’m going to spend 10 more minutes on this then try a less elegant approach and see if it works.
11:54
settled for:
filterUsers() {
let all = Object.keys(data.accounts);
if (data.currentFilter === 'all') {return all}
else {
return data.currentFilter === 'online' ?
all.filter(function(userName) {
return (data.accounts[userName].stream.stream); })
:
all.filter(function(userName) {
return (!data.accounts[userName].stream.stream); })
}
},
Now need to get render to accept the results.
16:15
OK, I got the filter logic working fine, but couldn’t get view.render to parse it. I realised that in the case of all it was returning data.accounts - the whole object - while in the case of online and offline it was only giving back the names.
I ran into what I thought was a syntax problem but couldn’t figure out what was wrong since I seemed to get decent results from data.accounts[userName].stream.stream under some circumstances but not others.
It was frustrating me, but after going to the meetup and explaining it to someone (and working off a different internet connection, crucially) I think this is the issue:
The calls to getUserData() is not set up to deal with the results asyncronously. So the users query (which gets more data) sometimes hasn’t completed by the time the streams query does.
That’s why I’m getting cannot read property 'stream' of undefined - because at the time it tries to append the object, streams hasn’t been added.
### Lessons
- don’t make assumptions about bugs
- … or at least consider alternatives
- be (even) more modular. TDD?
- ask for help!
- think about data model earlier, and in more detail
- make sure you consider all the requirements from the start!
