0

I've read all the answers written before but none of them solved my issue.

After building an associative array from asynchronous calls I pass it to the function for building the html element. The associative array has assigned values, but when I try to reach them they return undefined.

Here is the piece of code that logs to console:

var buildStreamerHtml = function(thisNameInfo){
  console.log("buildHtml: ");
  console.log(thisNameInfo);
  console.log("status[]: " + thisNameInfo['status']);
  console.log("status.: " + thisNameInfo.status);

Here is the console log:

buildHtml: 

Object
 logo: "https://static-cdn.jtvnw.net/jtv_user_pictures/freecodecamp-profile_image-d9514f2df0962329-300x300.png"
 status: "Offline"
 title: "FreeCodeCamp"
 url: "https://www.twitch.tv/freecodecamp"
 userExist: "yes"
 __proto__: Object

status[]: undefined
status.: undefined

Every single key (logo, status, title, url and userExist) from thisNameInfo array returns undefined when I try to access it.

What am I doing wrong? How to access the key value?

One of the previous answers suggested access as follows: thisNameInfo[0].status I've tried it and it gives an error because thisNameInfo is not defined as an array.

This is how the array is initialized at the beginning:

var thisNameInfo = {};

And this is one segment of the code where values are assigned. Keys are created at the same time.

return $.getJSON("https://wind-bow.glitch.me/twitch-api/channels/" + name,    
        function(dataChannel) {
          thisNameInfo.url = dataChannel.url;
          thisNameInfo.title = dataChannel.display_name;
          thisNameInfo.logo = dataChannel.logo;
        });

Here is the link to the complete code as per Bergi suggestion:

Ivana
  • 85
  • 6
  • I think you have no idea what "at the same time" means. You're evidently *not* passing the object to the function "***after** building an associative array from asynchronous calls*". If you need further help, please post your complete code, especially the call to the function that returns the ajax promise and the call to `buildStreamerHtml` – Bergi Jul 12 '17 at 02:29
  • My guess is that this is a sequence or timing issue. Try calling buildStreamerHtml from the .getJSON callback. Also, there are no associative arrays in JavaScript. You are working with an object. – user2182349 Jul 12 '17 at 02:29
  • Hi Bergi, regardless of asynchronous calls, when I log the whole array or object I can see the values. When I log specific value it returns undefined. These two actions are happening at the same time. They are not asynchronous. – Ivana Jul 12 '17 at 02:48
  • @Ivana just `return` `callLogo` and `callStream`. I forked your pen: https://codepen.io/anon/pen/dRwVZV?editors=0010#0 – dork Jul 12 '17 at 06:17
  • @Ivana when you don't return a value in `then`, you're basically returning `undefined`. This means that the promise has been resolved with an `undefined` value. When you didn't return `callLogo` and `callStream`, the `then` of `callUser` is immediately resolved with a value of `undefined`. If you return a `Promise` in `then`, it will be kind of like a continuity of the first promise so the first promise won't resolve until the next one is resolved. – dork Jul 12 '17 at 06:28
  • Thanks for the fix, @dork. If, because of missing return, buildStreamerHtml was called before all asynchronous calls finished, why console log of the thisNameInfo object had values inside buildStreamerHtml? Can you put some light on this, please? – Ivana Jul 12 '17 at 20:11
  • @Ivana, that is because the object is "only resolved when you expand the `>` in the console" (https://stackoverflow.com/a/17547032/769326). If you log the `Object.keys(thisNameInfo)` instead, you'll see that you don't have the properties you need yet. And since the response is fast enough, once you expand the logged object in the console, it already has updated with the `callLogo` and `callStream` functions. – dork Jul 13 '17 at 02:31

0 Answers0