Iterate JSON give characters, not elements

Question

I'm using .getJSON to pull in data to graph. For some reason when I try to loop through the JSON array it gives me each individual character like it's not seeing it as an array, yet when I dump data to console it's properly formatted JSON.

  <!DOCTYPE html>
  <html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  $.getJSON("/getgraphdata", function(result) {
      console.log(result.length);                                                                
      testFunction(result);
  });
 </script>
 </head>

 <body>
 <script>
 function testFunction(data) {
     console.log(data); // line 16
     //console.log(data.length); Gives total character count. 
     for(var i = 0; i < data.length; i++) {
         var obj = data[i];

         //console.log(obj.id);
     }
 }


 </script>
 </body>
 </html>

Here is the data directly from console. ( from line 16 )

[{"id":"1375857","temperature":"78.98","humidity":"90.2","nodeName":"Bsmt_Front","timestamp":"1536424185"},{"id":"1375856","temperature":"78.98","humidity":"77.1","nodeName":"Bsmt_Back","timestamp":"1536424185"},{"id":"1375855","temperature":"77.54","humidity":"49.9","nodeName":"Living_Room","timestamp":"1536424180"},{"id":"1375854","temperature":"0","humidity":"0","nodeName":"Bsmt_Room","timestamp":"1536424179"},{"id":"1375853","temperature":"79.52","humidity":"82.7","nodeName":"Flow_Tent","timestamp":"1536424158"}]

I used the highest rated answer here JavaScript loop through json array?

If I comment out line 21 it shows undefined. If I do a console.log(obj) it iterates through every single character in the array.

Everything points to it not seeing that as an array, but the [] are there.

score 2 · Answer 1 · answered Sep 08 '18 at 16:35

2

you can use JSON.parse to parse string into javascript object

so inside your testFunction you should do

data = JSON.parse(data)

answered Sep 08 '18 at 16:35

ashish singh

6,526
2
15
35

That works. Why is that needed though when it's already in JSON format? – TheEditor Sep 08 '18 at 16:37
it seems from the problem that data is in string format and hence you have to parse it – ashish singh Sep 08 '18 at 16:41
As [Oleksandr has already written](https://stackoverflow.com/a/52237309/402037). jQuery will automatically parse the response if the returned content type indicates that the response is JSON. If jQuery doesn't parse the response, then you're sending the wrong content type. – Andreas Sep 08 '18 at 16:42

score 1 · Accepted Answer · answered Sep 08 '18 at 16:39

1

Looks like your data contains a json string instead of an array. As described above you can use JSON.parse to parse it. But it looks like your API response has an invalid content type and that's why getJSON don't parse response by itself.

answered Sep 08 '18 at 16:39

Oleksandr Kovpashko

764
4
11

Thank you. The api wasn't returning correctly encoded information, even though it looked right. Once that was fixed the parse statement was not needed. – TheEditor Sep 08 '18 at 16:48
Oh. So I wasn't 100% correct saying about content type. Could you please describe invalid encoding more detailed? I'm curious about what exactly was wrong. – Oleksandr Kovpashko Sep 08 '18 at 17:12

Iterate JSON give characters, not elements

2 Answers2