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

Peter M Kreppein
Peter M Kreppein
15,120 Points
Posted by Peter M Kreppein
Peter M Kreppein
15,120 Points

Make an Object out of Existing JSON Object

Hey folks, I'm trying to add a ChartJS pie chart to my personal portfolio website based off of my Profile JSON data (similar to the one on the regular Treehouse profile.)

I'm having trouble taking the JSON data from Treehouse and formatting it to work with the requirements that ChartJS wants for data.

The Treehouse points object comes like this: 

points: {
total: 7819,
HTML: 1552,
CSS: 1493,
Design: 0,
JavaScript: 2699,
Ruby: 124,
PHP: 0,
WordPress: 0,
iOS: 398,
Android: 0,
Development Tools: 1164,
Business: 0,
Python: 109,
Java: 0,
Digital Literacy: 0
}

and ChartJS wants data entered as:

dataVariableName [

{
label: "Label of graph section",
value: numerical value
}
{

label: "Label of graph section",
value: numerical value
}
]

and so on.

I've tried (spent most of yesterday) to figure out how to iterate through the Treehouse JSON object, and create a new object based on variable rules. Here's as far as I got: 

var chartData;
var outputChartData = [];


$.ajax({
    url: "http://teamtreehouse.com/petermkreppein.json",
    dataType: "text",
    success: function(data){
        var json = $.parseJSON(data);
        //Set JSON to chartData var
        chartData = json.points;
        //Create Array for Chart.json
        outputChartData = $.map(chartData, function(score, course){
            if (score > 1){
                return JSON.stringify({"label": course, "value": score});
            } else {
                return null;
            }
        });
    }
});

And that worked for the most part, except that the output was a string, and all of the Objects were wrapped in quotes. I'm stumped. Any ideas? What am I not seeing?

Thanks in advance though!

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Peter,

I think your only issue is in your return statement within your map callback:

return JSON.stringify({"label": course, "value": score});

You're creating the object that chartjs is expecting but then you're passing it into JSON.stringify which is returning a json string. This means you're creating an array of json strings instead of an array of objects.

Try returning only the object. Then each element of the output array will be the actual object and not a JSON string of that object.

return {"label": course, "value": score};

I tested it and it seems to produce what you're looking for. Let me know if it's still not working.

Peter M Kreppein
Peter M Kreppein
15,120 Points
Peter M Kreppein
Peter M Kreppein
15,120 Points

Yay!!!! So happy I have this working now!!

Rock Hudson
Rock Hudson
27,595 Points
Rock Hudson
Rock Hudson
27,595 Points

Dude just run JSON.parse() on the return value to convert it back to an object.

Peter M Kreppein
Peter M Kreppein
15,120 Points
Peter M Kreppein
Peter M Kreppein
15,120 Points

So when I try that (by running Json.parse(Variable ) it get a syntax error. :/