How to foreach into a multidimensional array with jQuery? Strange behaviour

Question

Just if someone can explain me why the alertbox doesn't return an array but empty ??

var response = new Array();
response[0] = new Array();
response[1] = new Array(); 
response[2] = new Array();  

response[0]["Id"] = 1;
response[0]["StreetAddress"] = 'xxx';
response[0]["Place"] = 'yyy';

response[1]["Id"] = 2;
response[1]["StreetAddress"] = 'xxx';
response[1]["Place"] = 'yyy';

response[2]["Id"] = 3;
response[2]["StreetAddress"] = 'xxx';
response[2]["Place"] = 'yyy';

$.each(response , function(key1, value1) {
    alert(value1);
});

Actually, I will have this kind of array from a webservice and I need to loop into this array to retrieve datas.

But I don't understand why the loop doesn't work properly.

Thanks you in advance guys.

Solution 1

That's not a multidimensional array, but an invalid code. Arrays and Objects (Hashes) are different things in JavaScript (and in most of the other languages) not as in PHP.

So at the top you should write the following:

var response = new Array();
response[0] = new Object();
response[1] = {}; // it's the same new Object()
response[2] = new Object();

And you could iterate over it as you did:

$.each(response, function (index, obj) {
    $.each(obj, function (key, value) {
        console.log(key);
        console.log(value);
    });
});

Solution 2

if you try: console.log(response) ... you'll see the array is empty, it seems the array is not well formed.

why don't you use JSON format instead?

var response = [{
    "Id":"1",
    "StreetAddress": "xxx",
    "Place":"yyy"
},
{
    "Id":"2",
    "StreetAddress": "xxx2",
    "Place":"yyy2"
},
{
    "Id":"3",
    "StreetAddress": "xxx3",
    "Place":"yyy3"
}
]
console.log(response);
//you'll get an object: [Object { Id="1", StreetAddress="xxx", Place="yyy"}, Object { Id="2", StreetAddress="xxx2", Place="yyy2"}, Object { Id="3", StreetAddress="xxx3", Place="yyy3"}]
//iterate over
for(var x=0; x < response.length; x++){
    console.log("ID: " + response[x].Id + " StreetAddress: " + response[x].StreetAddress + " Place: " + response[x].Place);
}

Solution 3

You should not use arrays like this in Javascript. Arrays are numerically indexed. If you write

response[1]["Id"] = 2; 

you are adding a property to response[1] array

EDIT - i've read a little better your coment. It states:

//FYI: The output is an array of key value pairs (e.g. response[0].Id), the keys being:

So you have an array of objects.

This maps the data you will receive.

var response = new Array;
response[0] = new Object();
response[1] = new Object(); 
response[2] = new Object();  

response[0]["Id"] = 1;
response[0]["StreetAddress"] = 'xxx';
response[0]["Place"] = 'yyy';

response[1]["Id"] = 2;
response[1]["StreetAddress"] = 'xxx';
response[1]["Place"] = 'yyy';

response[2]["Id"] = 3;
response[2]["StreetAddress"] = 'xxx';
response[2]["Place"] = 'yyy';

and you can access them like this:

jQuery.each(response, function(key, value){
         for (key2 in value[key]){
            if (value[key].hasOwnProperty(key2)){
            alert(mine[key2])
            }
         }
     });

Comments

[Antoine Kociuba]

Actually, I want to use this service : postcodeanywhere.co.uk/support/webservices/PostcodeAnywhere/‌​… On the top of the page, the javascript function code sample says : // PUT YOUR CODE HERE //FYI: The output is an array of key value pairs (e.g. response[0].Id), the keys being: //Id //StreetAddress //Place So I'm just trying to build an example array just to start to implement my script. But my array seems to be wrong. If someone can give me the right syntax of my array. Thanks

[Nicola Peluchetti]

@Antoine i modified the answer