ObservableArray binding issues (or me!)

[Karthik Murali]

Hi folks,

https://jsfiddle.net/LdzouLmx/

One of the exercises in FCC, to traverse through a list of Twitch streams and get details on their channels and streams and display in the UI. There are 2 proxy URLs which can be accessed by JSONP. So 2 calls are made per streams (one for the channel data and one for the stream data respectively) and I have an array for 10 streams to collect data.

I had done a similar one for Wikipedia viewer (but this only makes on JSONP request on submit and loads back the data successfully) - https://codepen.io/mukaofssn/pen/eRawbm

I had tried to push individual items into the observable array directly but it didn't work (don't know why) so I used the array assignment approach.

As done in my Wiki example, I loaded an array out of the JSONP requests and then assigned this fully furnished array into the observable array. It worked okay in the Wiki, but wouldn't show anything in the page in this case.

I checked the console and the observable array seems to be loaded correctly with 10 entries. 

Please educate me! 

1. What am I doing wrong here?

2. (Bonus Q) Why was the push into observable array not working?

[wardyn...@gmail.com]

Hi Karthik,

 

1. Few things - but lets just talk about arrays:) ajax calls are asynchronous, when you assigning your temp array to observable one it's still empty - you can check with console log array.length just before assignment. The simplest solution don't use the temp array. This leads us to question number 2

 

2. Don't know how you tried to push elements to observable array so I can't tell you what was the issue, works for me:

https://jsfiddle.net/LdzouLmx/1/

[noirabys]

1) push is correct but keep in mind, that adding item for item will be expensive because each time the gui would update, adding to temp array and replace complete observableArray ist a better aproach

2) your push is to early because of async request -> move it into callback handler of your request

best regards

 noirabys