Parse Json response

Question

I have this json response that I want to parse in Javascript.

[{"video_source_id":100,"title":"YouTube Top Rated"},
{"video_source_id":101,"title":"YouTube Top Favorites"}]

I am new to Java Script, JSON. Whats the best way to parse and display it in a webpage?

Here is what I have, but I'm getting the following error

TypeError: Cannot read property '0' of undefined

in the line

document.getElementById("video_source_id").innerHTML = jsonObj.video_source_id[i];

Full code:

function loadJSON()
{
    var http_request = new XMLHttpRequest();
    try{
        // Opera 8.0+, Firefox, Safari
        http_request = new XMLHttpRequest();
    }catch (e){
        // Internet Explorer Browsers
        try{
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e) {
            try{
                http_request = new ActiveXObject("Microsoft.XMLHTTP");
            }catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    var data_file = "/vcaWS/api/sources";

    http_request.onreadystatechange  = function(){
        if (http_request.readyState == 4  )
        {
            // Javascript function JSON.parse to parse JSON data
            var jsonObj = JSON.parse(http_request.responseText);

            // jsonObj variable now contains the data structure and can
            // be accessed as jsonObj.name and jsonObj.country.
            for(var i=0;i<jsonObj.length;i++){
                document.getElementById("video_source_id").innerHTML =  jsonObj.video_source_id[i];
            }
        }
    }
    http_request.open("GET", data_file, true);
    http_request.send();
}

You seem to be already parsing the JSON (I see `JSON.parse` in your code). Are there any problems with your code? If yes, what are they? What do you expect to happen and what does actually happen? The "best" way is the one that produces the result you want. Unfortunately we don't know what you want. — Felix Kling, Jul 20 '13 at 17:56
TypeError: Cannot read property '0' of undefined .... in the line "document.getElementById("video_source_id").innerHTML = jsonObj.video_source_id[i];" — user2602727, Jul 20 '13 at 18:00
Well, `jsonObj` is an array. Arrays don't have a `video_source_id` property. But the objects *in* the array do. So I believe you want `jsonObj[i].video_source_id`. — Felix Kling, Jul 20 '13 at 18:02

score 0 · Accepted Answer · edited May 23 '17 at 12:21

0

jsonObj is an array. Arrays don't have a video_source_id property. But the objects in your array do. So I believe you want jsonObj[i].video_source_id instead, i.e. "access the video_source_id property of the ith element in jsonObj".

See also: Access / process (nested) objects, arrays or JSON

edited May 23 '17 at 12:21

Community

1
1

answered Jul 20 '13 at 18:14

Felix Kling

795,719
175
1,089
1,143

Parse Json response

1 Answers1