CODEWITHSUNDEEP
javascriptjqueryajaxjson
Siya
Siya

Reputation: 829

Accessing a JSON object from an API with AJAX and JavaScript

I'm trying to use AJAX for a simple project I am building using a RESTful API. I want get some data from the API which has a list of people and I want to output that list onto a HTML page.

My XHR object seems to work fine because I made it log the string to the console, it's just accessing the data which is in a nested JSON object that is baffling me. I want to loop through the object and get the name of the person and out it as a <li> item.

Here is the JSON file (from http://api.pmg.org.za/member/):

{
    count: 505,
    results: [
        {
            bio: "",
            pa_link: "/person/xxxxx-xxxxxx/",
            house_id: 3,
            name: "xxxxxxx",
            url: "http://api.pmg.org.za/member/121/",
            house: {
                name_short: "NA",
                id: 3,
                name: "xxxxxxx"
            },
            start_date: "2013-04-09",
            current: true,
            profile_pic_url: "http://xxxxxxxxxxx.jpg",
            party_id: 1,
            pa_url: "http://www.xxxxxxxxx/",
            party: {
                id: 1,
                name: "xxx"
            },
            // more...
        },
        // more...
    ]
}

And my script to access the JSON object:

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>PMG API experimentation</title>
        </head>
        <body>
            <div id="members"></div>

            <script type="text/javascript">
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        //console.log(xhr.responseText);
                        var parlyMembers = JSON.parse(xhr.responseText);

                        var membersHTML = '<ul class="members">';

                        for (var i = 0; i < parlyMembers.length; i++) {
                            membersHTML += '<li>'
                            membersHTML += parlyMembers.results[i].name;
                            membersHTML += '</li>'
                        }
                        membersHTML += '</ul>';
                        document.getElementById('members').innerHTML = membersHTML;
                    };
                };
                xhr.open('GET', 'http://api.pmg.org.za/member/');
                xhr.send();
            </script>
        </body>
    </html>

I have a feeling that my JSON query is wrong somehow. Please help.

Upvotes: 0

Views: 95

Answers (2)

Amit Shah
Amit Shah

Reputation: 1380

Your JSON string is not okay, please verify it here and correct it. http://jsonlint.com/

To access the json data in javascript.

var javascript_object = JSON.parse(json_string);
console.log(javascript_object);

you can see complete object, and you can access the variable accordingly.

Thanks Amit

Upvotes: 1

darthmaim
darthmaim

Reputation: 5148

You are getting the length from parlyMembers in your for-loop, but looping over parlyMembers.results. You need the check the length of the node you are iterating over.

for (var i = 0; i < parlyMembers.results.length; i++) {
    membersHTML += '<li>'
    membersHTML += parlyMembers.results[i].name;
    membersHTML += '</li>'
}

Upvotes: 2

Related Questions