Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Daniel Markham
Daniel Markham
10,976 Points

Cannot Get AJAX 'XMLHttpRequest' to Work Properly

Hi all,

I am trying to parse out JSON object using AJAX. I can get some the outer <ul></ul> tags to populate on the page, but I cannot get the actual list items to parse into said list. Here is a link to the JSON I am attempting to use:

https://teamtreehouse.com/danielmarkham.json

My end goal is to dynamically populate my badge images on a webpage using the above JSON link, but for now I would settle with just being able to populate a name/value pair.

Below is the JS code I have been working on to parse said data.

Thanks in advance for any help or advice.

Dan

          var xhr1 = new XMLHttpRequest();
xhr1.onreadystatechange = function () {
  if(xhr1.readyState === 4 && xhr1.status === 200) {
    var nameJSON = JSON.parse(xhr1.responseText);
    var statusHTML = '<ul class="example">';
    for (var i=0; i<nameJSON.length; i += 1) {
      statusHTML+='<li>'; 
      statusHTML += nameJSON[i].name;
      statusHTML += '</li>';

    }
    statusHTML += '</ul>';
    document.getElementById('example').innerHTML = statusHTML;
  }
};
xhr1.open('GET', 'https://teamtreehouse.com/danielmarkham.json');
xhr1.send();  
            ```

3 Answers

Justin Iezzi
Justin Iezzi
18,199 Points

Hello again Daniel,

I went ahead and did a test of my own, and I realized a few issues with your code.

The first is that you're iterating through objects like there are multiple objects. Our user .json data has a single object, within it a few properties, and then the badge property that does have multiple objects within an array. To get the name, we don't need any loops.

This is my test code that prints your username -

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    var user = JSON.parse(xhr.responseText); 
    document.getElementById('content').innerHTML = user.name;
  }
};

xhr.open('GET', 'danielmarkham.json');
xhr.send();

This works (as long as the inside of the content element isn't empty) and successfully prints "Daniel Markham" in the content div.

To print the badges, you'll need a loop very similar to the one you're using now.

Play around with it and see if you can get it working. If you would like, create a workplace snapshot and I'll help you get things working in your setup.

Daniel Markham
Daniel Markham
10,976 Points

Wow. Treehouse somehow deleted my comment so here it is again. Thanks for your help Justin. I was quite 'stuck' until you came along. Here is the code that I ended up with: 

var xhr1 = new XMLHttpRequest();
xhr1.onreadystatechange = function () {
  if(xhr1.readyState === 4 && xhr1.status === 200) {
    //console.log(xhr1.responseText);
    var getBadges = JSON.parse(xhr1.responseText);
    //console.log(getBadges);
    var statusHTML = '<table class="badges">';
    for (var i=0; i< getBadges.badges.length; i+=1) {
      statusHTML+='<tr><td><img src="'+getBadges.badges[i].icon_url+'" alt=""></td>';
      statusHTML +='<td>'+ getBadges.badges[i].name+'</td>';
      statusHTML += '</tr>';


    }
    statusHTML += '</table>';
    console.log(statusHTML);
    document.getElementById('badges').innerHTML = statusHTML;
  }
};
xhr1.open('GET', 'data/treehouse.json');
xhr1.send();

Hopefully this will get easier now.

Thanks again.

-Dan

Justin Iezzi
Justin Iezzi
18,199 Points

No problem! Glad you got it working, looks like you've got it figured out. :)

Justin Iezzi
Justin Iezzi
18,199 Points
Justin Iezzi
Justin Iezzi
18,199 Points

Hi Daniel,

I actually just started this course, so I'm not entirely sure I'm correct here, but this is what I think it is. AJAX won't work across different websites because of security limitations. This site, teamtreehouse.com, is different than the site the workspace apps are hosted on, treehouse-app.com.

The only way you could access that .json file is through a web proxy, your own server with programming specific to grabbing that file. If the server was willing to accept your request, jsonp would work.

Daniel Markham
Daniel Markham
10,976 Points
Daniel Markham
Daniel Markham
10,976 Points

Thanks for the response Justin. I should have remembered that. For now, I've uploaded a local version of the JSON, but I still cannot figure out how to parse the correct information (have to figure out how to load this dynamically in the future). My JS is running without issue, but the loop is not creating any new list elements. Here is what I have as of right now: 

var xhr1 = new XMLHttpRequest();
xhr1.onreadystatechange = function () {
  if(xhr1.readyState === 4 && xhr1.status === 200) {
    //console.log(xhr1.responseText);
    var nameJSON = JSON.parse(xhr1.responseText);
    //console.log(nameJSON);
    var statusHTML = '<ul class="example">';
    for (var i=0; i< nameJSON.length; i += 1) {
      statusHTML+='<li>'; 
      statusHTML += nameJSON[i].name;
      statusHTML += '</li>';

    }
    statusHTML += '</ul>';
    document.getElementById('example').innerHTML = statusHTML;
  }
};
xhr1.open('GET', 'data/treehouse.json');
xhr1.send();

The locally saved JSON data still matches the data found here: https://teamtreehouse.com/danielmarkham.json

Anyone have any ideas as to what is wrong with my 'for loop'? As of right now I am just trying to get the first name/value pair to print to the page. Thanks for any help all.

-Dan