How to traverse a javascript array/object

Question

I am having a hard time trying to get my data from this array. Can someone please tell me how to do this?

I need to get the latLng and AdminArea4 from within the locations for an autocomplete.

Can someone please explain the difference between the {} and []. From what I know, one is an array and the other an object but I am not sure if this is right. Is the process different from traversing an array than an object?

{
   "results": [
      {
         "locations": [
            {
               "latLng": {
                  "lng": 24.873108,
                  "lat": 59.389755
               },
               "adminArea4": "Harju maakond",
               "adminArea5Type": "City",
               "adminArea4Type": "County",
               "adminArea5": "Rae vald",
               "street": "",
               "adminArea1": "EE",
               "adminArea3": "",
               "type": "s",
               "displayLatLng": {
                  "lng": 24.873108,
                  "lat": 59.389755
               },
               "linkId": 0,
               "postalCode": "",
               "sideOfStreet": "N",
               "dragPoint": false,
               "adminArea1Type": "Country",
               "geocodeQuality": "CITY",
               "geocodeQualityCode": "A5XXX",
               "adminArea3Type": "State"
            },
            {
               "latLng": {
                  "lng": 24.860184,
                  "lat": 59.38493
               },
               "adminArea4": "Harju maakond",
               "adminArea5Type": "City",
               "adminArea4Type": "County",
               "adminArea5": "Rae",
               "street": "",
               "adminArea1": "EE",
               "adminArea3": "",
               "type": "s",
               "displayLatLng": {
                  "lng": 24.860184,
                  "lat": 59.38493
               },
               "linkId": 0,
               "postalCode": "",
               "sideOfStreet": "N",
               "dragPoint": false,
               "adminArea1Type": "Country",
               "geocodeQuality": "CITY",
               "geocodeQualityCode": "A5XXX",
               "adminArea3Type": "State"
            },
         ]
      }
   ]
}

Yet another "How to parse JSON object with JavaScript" ... sigh. — Raptor
– Raptor, Commented Mar 9, 2015 at 4:25
possible duplicate of How to parse JSON in JavaScript to take value — Raptor
– Raptor, Commented Mar 9, 2015 at 4:26
Is this an array or an object? I really want to know more about how to parse this out. — NaN
– NaN, Commented Mar 9, 2015 at 4:26

jfriend00 · Accepted Answer · 2015-03-09 04:43:11Z

4

First some explanation about arrays and objects since you've asked and it's quite relevant to how to use the data structure you have:

{} defines an object. [] defines an array.

An object is a unordered list of property/value pairs with no property name repeated.

An array is an ordered list of individual items with a .length property that tells you how many items are in the array.

An object would be defined like this:

var obj = {
   prop1: value1,
   prop2: value2
};

And, you can reference values like this:

console.log(obj.prop1);    // value1

An array is defined like this:

var myArray = ["one", "two", "three"];

And, you can access elements by zero-based index like this:

console.log(myArray[0]);   // "one"

Or, you can iterate all the items in an array like this:

for (var i = 0; i < myArray.length; i++) {
    console.log(myArray[i]);
}

Assuming your overall data structure is in a variable named data, you can iterate the results and nested locations arrays like this:

var results = data.results;
var locations;
for (var j = 0; j < results.length; j++) {
    locations = results[j].locations;
    for (var i = 0; i < locations.length; i++) {
       console.log(locations[i].latLng);
       console.log(locations[i].adminArea4);
    }

To explain:

data.results is an array that you need to iterate.
In each element of that array is an object with a locations property in it.
The locations property is another array that you need to iterate.
In each element of the locations array is an object with a latLng property and a adminArea4 property on it.

edited Mar 9, 2015 at 4:43

answered Mar 9, 2015 at 4:27

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

7 Comments

NaN Over a year ago

Thank you for the help. I tried your loop and what I am getting is TypeError: results[i] is undefined

jfriend00 Over a year ago

@NaN - yes, that was a typo in my answer. results[i] should have been results[j]. Answer corrected now.

NaN Over a year ago

Thank you for the edit. It seems to be giving me more now. If I wanted to access the actual value of the lat, could I just do locations[i].latLng.lat? Also, can you tell me if I would still need a for loop if I used the parseJSON function?

jfriend00 Over a year ago

@NaN - yes you would just use locations[i].latLng.lat. Your data is already parsed from JSON into Javascript so parseJSON() is not appropriate here. You need the loops if you want to get all values returned in the data. It takes some sort of loop to iterate through the arrays in the data that can hold more than one value.

NaN Over a year ago

OK, thank you for the explanation here, jsfriend. Can you please tell me why objects and arrays are mixed? Why not just use one or the other?

|

YaswanthJg · Accepted Answer · 2015-03-09 04:50:59Z

1

It's json structure.. You can access elements as I mentioned below.. Assign json to variable and then access object properties.

var obj = {
   "results": [
      {
         "locations": [
            {
               "latLng": {
                  "lng": 24.873108,
                  "lat": 59.389755
               },
               "adminArea4": "Harju maakond",
               "adminArea5Type": "City",
               "adminArea4Type": "County",
               "adminArea5": "Rae vald",
               "street": "",
               "adminArea1": "EE",
               "adminArea3": "",
               "type": "s",
               "displayLatLng": {
                  "lng": 24.873108,
                  "lat": 59.389755
               },
               "linkId": 0,
               "postalCode": "",
               "sideOfStreet": "N",
               "dragPoint": false,
               "adminArea1Type": "Country",
               "geocodeQuality": "CITY",
               "geocodeQualityCode": "A5XXX",
               "adminArea3Type": "State"
            },
            {
               "latLng": {
                  "lng": 24.860184,
                  "lat": 59.38493
               },
               "adminArea4": "Harju maakond",
               "adminArea5Type": "City",
               "adminArea4Type": "County",
               "adminArea5": "Rae",
               "street": "",
               "adminArea1": "EE",
               "adminArea3": "",
               "type": "s",
               "displayLatLng": {
                  "lng": 24.860184,
                  "lat": 59.38493
               },
               "linkId": 0,
               "postalCode": "",
               "sideOfStreet": "N",
               "dragPoint": false,
               "adminArea1Type": "Country",
               "geocodeQuality": "CITY",
               "geocodeQualityCode": "A5XXX",
               "adminArea3Type": "State"
            },
         ]
      }
   ]
};

Travsering Values

obj.results[0].locations[0].latLng.lng
obj.results[0].locations[0].latLng.lat

You can also traverse by using for loop.

edited Mar 9, 2015 at 4:50

YaswanthJg

13911 bronze badges

answered Mar 9, 2015 at 4:27

razahassank

1958 bronze badges

5 Comments

NaN Over a year ago

Thank you razahassank. My data is coming back from a server, so can I assign what is returned from the server to a variable?

razahassank Over a year ago

it's better to parse it by using jquery.. e.g. var obj = $.parseJSON(serverResponse);

jfriend00 Over a year ago

There's more than one location in the locations array and potentially more than one result in the results array. This only obtains one hardwired location - skipping any others that are present.

NaN Over a year ago

@razahassank, thank you for the function. What I get from that is SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data

NaN Over a year ago

Thanks for the link. I just ran the JSON through the validator and it says Valid JSON

Collectives™ on Stack Overflow

How to traverse a javascript array/object

2 Answers 2

7 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related