Accessing a JSON object from an API with AJAX and JavaScript

Question

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.

parlyMembers will evaluate into an Object which doesn't have a length property, so your loop doesn't run. — André Dion
– André Dion, Commented Apr 16, 2015 at 11:43

darthmaim · Accepted Answer · 2015-04-16 11:43:14Z

2

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>'
}

answered Apr 16, 2015 at 11:43

darthmaim

5,1681 gold badge29 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amit Shah · Accepted Answer · 2015-04-16 11:49:33Z

1

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

answered Apr 16, 2015 at 11:49

Amit Shah

1,3801 gold badge10 silver badges20 bronze badges

Collectives™ on Stack Overflow

Accessing a JSON object from an API with AJAX and JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related