JS JSON from URL

Question

Okey, so I have been trying to figure this out all day and can't see the reason why this dosn't work.

I have a URL that creates this output:

[{"id":"1"},{"id":"2"},{"id":"3"},{"id":"4"},{"id":"5"},{"id":"6"},{"id":"7"},{"id":"8"},{"id":"9"},{"id":"10"},{"id":"11"},{"id":"12"},{"id":"13"},{"id":"14"}]

And in my JS file I have the simple code:

$.getJSON("path_to_url", function(data) { 
   console.log(data);                            
});

This gives my this output:

[Object { id="1"}, Object { id="2"}, Object { id="3"}, Object { id="4"}, Object { id="5"}, Object { id="6"}, Object { id="7"}, Object { id="8"}, Object { id="9"}, Object { id="10"}, Object { id="11"}, Object { id="12"}, Object { id="13"}, Object { id="14"}]

I have been trying all day to change my PHP file to generate this a better way and so on, and at the end I just made it this simple. But how should I "echo" this out from my JS file?

console.log(data.(?));

Thanks in advance, and if you do know of any good and easily understanding docs, please let me know :)

What do you mean? The output in console is exactly what you received from the server. What do you want to output and where? — Aleks G, Feb 16 '14 at 21:28
Is your question about how to use the console, or does it have something to do with the value of `data` not being what you expect? — Mike Samuel, Feb 16 '14 at 21:29
possible duplicate of [Access / process (nested) objects, arrays or JSON](http://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json) — Felix Kling, Feb 16 '14 at 21:33
That's exactly the output you should get. Now you have to learn how to actually access the data. — Felix Kling, Feb 16 '14 at 21:33
AleksG Well what I mean is that for some unkown reason (for me ofc) is that everytime I try to console.log only the id's it gave me undefined. MikeSamuel: The question is about how to retrive each data in the object. If I had like a JSON tree, how would I go forward? Brad: Yes, the output works fine, but not by retriving the ID's. FelixKling: Thanks! :). — Marius Djerv, Feb 16 '14 at 21:42

score 1 · Accepted Answer · answered Feb 16 '14 at 21:33

1

Have a look at jQuery each function https://api.jquery.com/jQuery.each/

$.each(data, function( index, value ) {
    console.log(value.id);
});

answered Feb 16 '14 at 21:33

Ricki Runge

421
3
8

score 0 · Answer 2 · 2014-02-16T21:37:57.580

The objects are in an array. You can just call them like so;

console.log(data[0].id);
console.log(data[1].id);

In this manner you can loop on the list and access each ID.

For a more classical description;

[] is a list (or slice) (an array without a limit)

{} is a dictionary (or map), which can contain multi-dimensional slices

[] are only accessible by their indexes (0, 1, etc.).

As JavaScript doesn't really have classical classes (excluding the Prototyping principle) Objects are simply a dynamic collection of variables and lambs-functions inside a dictionary (map).

Arrays are the most-used data-types on high level languages. They bind bytes to each other. A simple word in C will look like this in Unicode references:

[ 119 111 114 100 ]

This is a simple collection of int8 (byte) where a string-parser knows which letter to show from the character-set.

Thanks for the info, I need to read more about this stuff. :) — Marius Djerv, Feb 16 '14 at 21:44

Cilan · Answer 3 · 2014-02-16T21:38:36.003

0

The 0th item of the Array is an Object, so to display every item you would:

for (var key in data[0]) {
  if (data[0].hasOwnProperty(key)) {
    console.log(key + " -> " + data[0][key]);
  }
}

edited Feb 16 '14 at 21:38

answered Feb 16 '14 at 21:33

Cilan

13,101
3
34
51

Please don't use the term "JSON Object" for a JavaScript object. [There's no such thing as a "JSON Object"](http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/) – Felix Kling Feb 16 '14 at 21:34
@FelixKling Isn't everything in JavaScript an Object, because JavaScript is Object-Oriented? – Cilan Feb 16 '14 at 21:39
Thanks for the suggestion @TheWobbuffet! But I tried with Ricki's answer and It worked just fine :) But I will save this page and its great by having this to look at :) – Marius Djerv Feb 16 '14 at 21:46
@MariusDjerv No prob, you can't resist jQuery :) – Cilan Feb 16 '14 at 21:48
Everything but primitive values are objects in JavaScript. However, this has nothing to do with JSON. The term "JSON object" is often mistakenly used for a JavaScript object, maybe because the JSON syntax and the JS object literal syntax look so similar. However, JSON is something fundamentally different than a JS object. JSON is language-independent, textual data exchange format (like XML, CSV, YAML) and an object is data type in JavaScript. An JS object literal is a syntax construct specific to the JavaScript language. – Felix Kling Feb 16 '14 at 21:58
@FelixKling Oh, well, we all make mistakes in our grammar, somehow like you said `An JS object` in your comment; it should be `A JS object`. – Cilan Feb 16 '14 at 22:00
I didn't criticize your grammar, but your use of terminology. No reason to become defensive, I'm just trying to help, so that others don't adept the wrong terminology. – Felix Kling Feb 16 '14 at 22:04

score 0 · Answer 4 · answered Feb 17 '14 at 00:53

If you want your PHP file to generate an array of id's then first you need to know the syntax, in the console of your browser you can execute the following command:

console.log(JSON.stringify([1,2,3,4]));//=[1,2,3,4]

So in PHP you can create an Array with the id's

$idArray;//this is the array containing 0=>(id=>1),1=>(id=>2)
$ret;//the array that will return the id's
foreach($idArray as $id){
  $ret[]=$id["id"];
};
echo json_encode($ret);//should give the output [1,2,3,4];

In JavaScript you now have an array of numbers, not an array of objects, you can go through them like so:

var i = -1,len = data.length;
while(++i < len){
  console.log("id at",i," is:",data[i]);
}

JS JSON from URL

4 Answers4