How to JSON parse a multi element array?

Question

Trying to bring over data from PHP. I'm using the urls to display images and then I'm using the tags to reorder the array I'm trying to create called data. I'm not sure if I'm parsing correctly.

var data = [];

function importJson(str) {

    if (str == "") {
        document.getElementById("content").innerHTML = "";
        return;
    }
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }


    xmlhttp.onreadystatechange = function() {

        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

            data = JSON.parse(xmlhttp.response);
            alert(xmlhttp.response);
            alert(data);

            for (var sport_index = 0; sport_index < data.sport.length; sport_index++) {
                var url1 = data.sport[sport_index][1];
                alert(data.sport);
            }
            alert(url1);
        }
    }

    xmlhttp.open("GET", "http://server/~name/folder/many.php");
    xmlhttp.responseType = "json";
    xmlhttp.send();

    function buildImage(imagesrc) {
        var img = document.createElement('img');
        img.src = imagesrc;
        document.getElementById('content').appendChild(img);
    }

}

xmlhttp.response looks like this

{"sport":[{"ImagesId":"34","ImagesPath":"http:\/\/server\/~name\/folder\/images\/24-08-2014-1408868419.png","Tag":"sport"},{"ImagesId":"30","ImagesPath":"http:\/\/server\/~name\/folder\/images\/23-08-2014-1408824125.png","Tag":"sport"}],"clothes":[{"ImagesId":"33","ImagesPath":"http:\/\/server\/~name\/folder\/images\/23-08-2014-1408824179.png","Tag":"clothes"},{"ImagesId":"32","ImagesPath":"http:\/\/server\/~name\/folder\/images\/23-08-2014-1408824166.png","Tag":"clothes"}],"food":[{"ImagesId":"31","ImagesPath":"http:\/\/server\/~name\/folder\/images\/23-08-2014-1408824158.png","Tag":"food"}]}

But data looks like [object Object] and when I try to use the urls to create images the elements are undefined.

All is correct except that you must access object properties by name, not index. var url1 = data.sport[sport_index][1] should be var url1 = data.sport[sport_index].ImagesPath — cookie monster
– cookie monster, Commented Aug 28, 2014 at 23:18
JSON.parse() should be fine. If you are not sure about the output object, you can try to display it with JSON.stringify(). — Tong Shen
– Tong Shen, Commented Aug 28, 2014 at 23:18

therealrootuser · Accepted Answer · 2014-08-28 23:23:20Z

2

In a Javascript object, you access elements by name, for instance:

data.sport[sport_index]["ImagesPath"]

Or

data.sport[sport_index].ImagesPath

answered Aug 28, 2014 at 23:23

therealrootuser

11k9 gold badges33 silver badges46 bronze badges

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

Collectives™ on Stack Overflow

How to JSON parse a multi element array?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related