Convert JSON Object to a simple array

Question

I have the following nested JSON Object coming from this call:

var jsonData = jQuery.ajax({
            url: "http://testsite/_vti_bin/listdata.svc/ProjectHours",
            dataType: "json",
            async: false
        }).responseText;

{
    "d": {
        "results": [
            {
                "__metadata": {
                    "uri": "http://testsite/_vti_bin/listdata.svc/ProjectHours(1)",
                    "etag": "W/\"1\"",
                    "type": "Microsoft.SharePoint.DataService.ProjectHoursItem"
                },
                "ContentTypeID": "0x0100C5D130A92A732D4C9E8489B50657505B",
                "Title": "Ryan Cruz",
                "Hours": 35,
                "Id": 1,
                "ContentType": "Item",
                "Modified": "/Date(1373535682000)/",
                "Created": "/Date(1373535682000)/",
                "CreatedBy": {
                    "__deferred": {
                        "uri": "http://testsite/_vti_bin/listdata.svc/ProjectHours(1)/CreatedBy"
                    }
                },
                "CreatedById": 19,
                "ModifiedBy": {
                    "__deferred": {
                        "uri": "http://testsite/_vti_bin/listdata.svc/ProjectHours(1)/ModifiedBy"
                    }
                },
                "ModifiedById": 19,
                "Owshiddenversion": 1,
                "Version": "1.0",
                "Attachments": {
                    "__deferred": {
                        "uri": "http://testsite/_vti_bin/listdata.svc/ProjectHours(1)/Attachments"
                    }
                },
                "Path": "/sites/itg/Resourcecenters/spwidgets/Lists/ProjectHours"
            },
            {
                "__metadata": {
                    "uri": "http://testsite/_vti_bin/listdata.svc/ProjectHours(2)",
                    "etag": "W/\"1\"",
                    "type": "Microsoft.SharePoint.DataService.ProjectHoursItem"
                },
                "ContentTypeID": "0x0100C5D130A92A732D4C9E8489B50657505B",
                "Title": "Phillip Phillips",
                "Hours": 25,
                "Id": 2,
                "ContentType": "Item",
                "Modified": "/Date(1373535694000)/",
                "Created": "/Date(1373535694000)/",
                "CreatedBy": {
                    "__deferred": {
                        "uri": "http://testsite/_vti_bin/listdata.svc/ProjectHours(2)/CreatedBy"
                    }
                },
                "CreatedById": 19,
                "ModifiedBy": {
                    "__deferred": {
                        "uri": "http://testsite/_vti_bin/listdata.svc/ProjectHours(2)/ModifiedBy"
                    }
                },
                "ModifiedById": 19,
                "Owshiddenversion": 1,
                "Version": "1.0",
                "Attachments": {
                    "__deferred": {
                        "uri": "http://testsite/_vti_bin/listdata.svc/ProjectHours(2)/Attachments"
                    }
                },
                "Path": "/sites/itg/Resourcecenters/spwidgets/Lists/ProjectHours"
            }
        ]
    }
}

I want to loop through each object's Title and Hours attribute and save them in an array so I can pass it to the google chart as below:

var data = google.visualization.arrayToDataTable(array);

I tried the following code, but it can't find the json object:

function drawTable() {
    var jsonData = jQuery.ajax({
                url: "http://testsite/_vti_bin/listdata.svc/ProjectHours",
                dataType: "json",
                async: false
            }).responseText;

            alert(jsonData);
            var obj = jQuery.parseJSON(jsonData);
            //alert(jsonData.length);
            var sampleData = [], results = d.results;
            for (var i = 0, len = results.length; i < len; i++) {
                var result = results[i];
                sampleData.push({ Title: result.Title, Hours: result.Hours});
            }

            var data = google.visualization.arrayToDataTable(obj);
            var chart = new google.visualization.PieChart(document.getElementById('spChart')); 
            chart.draw(data, {showRowNumber: true}); 
}

Please give me some ideas so i don't get stuck here for the rest of the day. Thank you!

Is the looping structure inside the scope of the JSON callback? — DevlshOne, Jul 11 '13 at 17:58
@DevlshOne there is no JSON callback. he's using `async: false` and `responseText` (which is terrible imo, but isn't the problem.) — Kevin B, Jul 11 '13 at 17:59
@KevinB Yeah, I see that now. I think that whole AJAX script needs a overhaul. — DevlshOne, Jul 11 '13 at 18:00
It works for me when I do `d.results[1].Title` - jsfiddle.net/LpvkZ/ — Selvakumar Arumugam, Jul 11 '13 at 18:00
@KevinB `d` is a security feature with .net/MS based servers when they return json. — , Jul 11 '13 at 18:02
possible duplicate of [Safely turning a JSON string into an object](http://stackoverflow.com/questions/45015/safely-turning-a-json-string-into-an-object) — ebram khalil, Jul 11 '13 at 18:03
@Ken-AbdiasSoftware I'm referring to `d` in his javascript, not the json. He hasn't defined a variable named `d` in any of the code provided. This is most likely where the error is. — Kevin B, Jul 11 '13 at 18:04
@KevinB you're right, didn't see it at first, and yes it's without any parent. — , Jul 11 '13 at 18:10
replace `d` with `obj`. Next time, look at your error console... *"Syntax Error: results not defined on undefined"* — Kevin B, Jul 11 '13 at 18:15

score 2 · Answer 1 · answered Jul 11 '13 at 18:03

2

jQuery.getJSON({"http://testsite/_vti_bin/listdata.svc/ProjectHours",{},function(d) {
    var sampleData = [], results = d.results;
    for (var i = 0, len = results.length; i < len; i++) {
        var result = results[i];
        sampleData.push({ Title: results[i].Title, Hours: results[i].Hours});
    };
});

answered Jul 11 '13 at 18:03

DevlshOne

8,357
1
29
37

That work out for you? – DevlshOne Jul 11 '13 at 18:07
I don't understand the empty {} parameter part..can you explain to me how this is wired up so i can implement myself – Athapali Jul 11 '13 at 18:18
That spot in the `.getJSON()` method is reserved for sending data TO the URL. I probably could have also put a `null` there but habit is always to just put the empty brackets. – DevlshOne Jul 12 '13 at 01:49

Athapali · Answer 2 · 2013-07-11T21:32:03.903

OK, I am answering my own question here in case someone runs across something similar. This was an ajax call to a MS SharePoint site returning list data in JSON.

jQuery.ajax({
        url: "http://testsite/_vti_bin/listdata.svc/ProjectHours",
        dataType: 'JSON',
        success:function(data) { 
          //jQuery('#spChart').append(JSON.stringify(json));
        //var obj = jQuery.parseJSON(data);
        var rowArray = [], results = data.d.results;

        for (var i=0; i < results.length; i++)
        {
           var result = results[i];           
           rowArray.push([result.Title, result.Hours]);
           //rowArray.push(["'" + result.Title + "'", result.Hours]);
        }

     },
        error:function(){
            alert("Error");
        }
    });

I had to first refer the json being returned as 'data' and access each javascript object inside of it as data.d.results[0], data.d.results[1], data.d.results[2] etc by looping through each of them.

Convert JSON Object to a simple array

2 Answers2