"Database Foundations" was retired on March 22, 2017. You are now viewing the recommended replacement.

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 Leah Birch
.a{fill-rule:evenodd;}techdegree seal-36
Leah Birch
Front End Web Development Techdegree Graduate 15,110 Points

Svg's and Ajax problem. Help!

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.

1 Answer

Ari Misha
Ari Misha
19,323 Points
Ari Misha
Ari Misha
19,323 Points

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

Leah Birch
.a{fill-rule:evenodd;}techdegree seal-36
Leah Birch
Front End Web Development Techdegree Graduate 15,110 Points

Its kind of irrelevant to make the value of status an integer with what I want to do, but thanks. My problem was that I can't display my SVG files. But I figured it out. It was because I didn't reference my counter. e.x: stats[i].icon