JSON parsing in Javascript with no known number of items

Question

I'm drawing a blank with the best way to process JSON data which will be of the following form:

[{"latlng":"42.6674996,-71.1786423"}, 
 {"latlng":"53.8136722,-1.7301123"}]

var p = '[{"latlng":"42.6674996,-71.1786423"}, 
          {"latlng":"53.8136722,-1.7301123"}]',

It will also be of variable length.
I'm having trouble looking through all the data pairs pulling off the latlng values.
I'm using the code:

for (var key in p) {
  if (p.hasOwnProperty(key)) {
    alert(key + " -> " + p[key]);
  }

}

from this other SO question: How do I loop through or enumerate a JavaScript object?

However, the formats in the above example are different from mine.
How do I loop through each key/value in turn until the JSON string is exhausted?
I'm a little new to JSON and Javascript.

So each object can have more properties than just `latlng`? Or what is the problem? `p` in your example is a string, are you parsing the JSON properly in your actual code? — Felix Kling, Mar 29 '12 at 16:41
Note that I corrected the question you linked to. The OP had a JavaScript object, not JSON. The same goes for you. After you parsed the JSON, you have a JavaScript array. I assume you know how to iterate over arrays, if not, have a look at the [MDN JavaScript Guide](https://developer.mozilla.org/en/JavaScript/Guide). — Felix Kling, Mar 29 '12 at 16:47
I voted to close this question. It is not clear what your problem is. If you don't know how to iterate over arrays, read the MDN JavaScript Guide, as I already said (you have to learn the basics). If you don't know how to parse JSON, have a look at [Safely turning a JSON string into an object](http://stackoverflow.com/questions/45015/safely-turning-a-json-string-into-an-object). How to iterate over properties of an object is explained in the question you linked to. You just have to put the pieces together. — Felix Kling, Mar 29 '12 at 16:56

score 1 · Answer 1 · answered Mar 29 '12 at 16:50

You can always use JSON.parse (on any remotely modern browser) to take a json string and get the relevant javascript structure. Once you have that, you can iterate over the structure.

So you start with

var json = '[{"latlng":"42.6674996,-71.1786423"}, {"latlng":"53.8136722,-1.7301123"}]';

and then you can get a javascript array by

var ary = JSON.parse(json);

From here you are just a hop skip and jump away from iterating over your array, getting the current element, and doing what you want.

Note for your structure, instead of returning

{"latlng":"42.6674996,-71.1786423"}

for each element in the array, you should do

{"lat":"42.6674996","long": "-71.1786423"}

that way as you iterate over the array, you can do something like

...in your for loop

var current = ary[i];
var lat = current.lat;
var long = current.long;

Nahydrin · Answer 2 · 2012-03-29T16:55:38.633

0

Use the jQuery.parseJSON - jQuery API:

var json = '[{"latlng":"42.6674996,-71.1786423"},{"latlng":"53.8136722,-1.7301123"}]';
var parsed = $.parseJSON(json);

$.each(parsed, function(index, value) {
    console.log(value['latlng']);
});

or the native JSON.parse:

var json = '[{"latlng":"42.6674996,-71.1786423"},{"latlng":"53.8136722,-1.7301123"}]';
var parsed = JSON.parse(json);
var count = parsed.length;

for (var i = 0; i < length; i++)
    console.log(parsed[i]['latlng']);

edited Mar 29 '12 at 16:55

answered Mar 29 '12 at 16:44

Nahydrin

13,197
12
59
101

4

What if he does not use jQuery? – Felix Kling Mar 29 '12 at 16:47
Why should he reinvent the wheel? – Nahydrin Mar 29 '12 at 16:49
3

Using `JSON.parse` and a simple `for` loop is not reinventing the wheel IMO. I would not include a whole library to do something which the language provides natively. – Felix Kling Mar 29 '12 at 16:50
What if that wheel doesn't fit his car? Suggesting jQuery on questions that aren't tagged as jQuery should be left as comments, IMO. At least, add a disclaimer. In this case, OP can just use JSON.parse from https://github.com/douglascrockford/JSON-js/blob/master/json2.js which fits most needs since it's a lot lighter than jQuery – Ruan Mendes Mar 29 '12 at 16:52
There, I added the use of native json. – Nahydrin Mar 29 '12 at 16:55

Jon McIntosh · Answer 3 · 2012-03-29T17:02:18.003

You're going to have to turn that string into an object before you can iterate through it safely:

var p = JSON.parse('[{"latlng":"42.6674996,-71.1786423"}, {"latlng":"53.8136722,-1.7301123"}]');

for(key = 0; key < p.length; key++) { // Start the key at zero, increment until it his the object's length
  if (p.hasOwnProperty(key)) { // If the item has a key
    alert(key + " -> " + p[key]);  // Alert the key and then the item. 
  }
}

In your case, you have a multidimensional object. So each return will give you another object. How I would deal with this is by traversing the returned object like so:

alert(p[key]['latlng']);

To have a better understanding of this, look at the initial object syntax...

[
  { // key 0
    "latlng": "42.68, -71.18" // key 'latlng'
  },
  { // key 1
    "latlng": "53.81, -1.73" // key 'latlng'
  }
]

So essentially you're traversing the object using the values that the loop increments. If you have an object with 5 items your loop will grab that number and cycle through 5 times (0 .. 4). Each time it loops the incremented key variable will be used to select your item, and from there you can grab the the latlng key and return its value within the nested object.

You should not iterate over an array with `for...in`. – Felix Kling Mar 29 '12 at 16:52 — Felix Kling, Mar 29 '12 at 16:52

JSON parsing in Javascript with no known number of items

3 Answers3