Svg's and Ajax problem. Help!

Question

I am doing Project 9 for Front-End Dev Techdegree. I'm trying to use Ajax to insert SVG into the DOM. sadly, its not working. Here is my js code:

//SOCIAL STATS
var socialStats = new XMLHttpRequest();
socialStats.onreadystatechange = function () {
    if (socialStats.readyState === 4 && socialStats.status === 200) {
        var stats = JSON.parse(socialStats.responseText);
        var socialHTML = '<ul>';
        for (let i = 0; i < stats.length; i += 1)   {
            socialHTML += "<li>";
            socialHTML += '<img src="' + stats.icon + '" alt="icon">';
            socialHTML += '<span>' + stats.media + '</span>';
            socialHTML += '<span>' + stats.status + '</span>' + '</li>';
        }
        socialHTML += '</ul>';
        document.getElementById('socialStats').innerHTML = socialHTML;
    }
};
socialStats.open('GET', '../js/socialStats.json', true);
socialStats.send();

//This is my JSON file:
[
    {
        "icon" : "../icons/icon-twitter.svg",
        "media" : "Twitter",
        "status" : "10345"
    },
    {
        "icon" : "../icons/icon-facebook.svg",
        "media" : "Facebook",
        "status" : "8739"
    },
    {
        "icon" : "../icons/icon-google-plus.svg",
        "media" : "Google+",
        "status" : "2530"
    }
]

. . .

I suspect that my code isn't working because I tried storing XML (the SVG) in my JSON file. Can someone please help me? I'm not sure how to fix it.

Answer 1 · 2017-10-18T13:26:56Z

October 18, 2017 1:26pm

Heya! I spotted a couple of issues in your code. First off is that , status code 200 in the "if" conditional needs to be a string. And Secondly, the status in json is an integer and integers are defined without double quotes in json file. I hope it helped!

~ Ari

Welcome to the Treehouse Community

Looking to learn something new?

Leah Birch

Leah Birch

Svg's and Ajax problem. Help!

1 Answer

Ari Misha

Ari Misha

Leah Birch

Leah Birch