getjson jquery parsing an array

jquery ajax json arrays getjson

24,110

Solution 1

$.getJSON(url,
    function(data){
      $.each(data.items, function(i,item){
      $('#testfield').html('<p>' + item.d.title + '</p>');
      });
    });

In this code you're going to end up replacing the HTML of the item with ID of 'testfield' with the value over and over ... you might want to try using jQuery.append to add all entries as you've specified above

$.getJSON(url,
    function(data){
      $.each(data.items, function(i,item){
      $('#testfield').append('<p>' + item.d.title + '</p>');
      });
    });

Solution 2

There is an error in your JSON data: you're not using colons after "d" in the last three items. Is this an example of real data that your application is using, or example data to demonstrate your problem?

Solution 3

Hopefully this example will point you in the right direction

<html>
<head>
  <title>Stackoverflow</title>
  // ** POINT THIS TO A VALID jquery.js LOCATION
  <script src="jquery.js" type="text/javascript"></script>
  <script>
    var days = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ];
    // *****************************************************
    // This is your data from getJSON if correctly formatted
    var data = '{"Days":[ {"Sunday":"10.00"}, {"Monday":"12.00"}, {"Tuesday":"09.00"}, {"Wednesday":"10.00"}, {"Thursday":"02.00"}, {"Friday":"05.00"}, {"Saturday":"08.00"}]}';
    runUpdate = function() {
      // *******************************************************
      // Clear the div of all data by replacing it
      $('#testfield').replaceWith('<div id="testfield"></div>');
      var dataObject= $.parseJSON( data );
      $.each( dataObject.Days, function (index, value) {
        // ********************************************
        // Append new elements to the newly created div
        $('#testfield').append("<p>"+days[index]+": "+value[ days[index] ]+"</p>");
      });
    };

    runReset = function() {
      $('#testfield').replaceWith('<div id="testfield">This is original text.</div>');
    };
  </script>
</head>
<body>
  <div id="testfield">
    This is original text.
  </div>
  <div>
    <input type="button" value="Run Update" onclick="runUpdate();" />
    <input type="button" value="Reset" onclick="runReset();" />
  </div>
</body>
</html>

24,110

Author by

Sphvn

table { -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); /* (╯°□°)╯ ︵ ┻━┻ */ }

Updated on January 05, 2020

Comments

Sphvn over 4 years
Got the simplified array working see below

Following up on the complicated array to parse see here.

TLDR: Want to get each heading from an array and insert it into a div without knowing what is inside the div using Jquery - getJSON.

Edit: The data is coming from a piece of software that is outputting the JSON string every couple of seconds with new data, so I need to pull the array of data within "d" as in the example below. So i should get "Title" & "034324324"etc for each.

Edit2 Updated code to match mine exactly..

I have JSON array lets say:
```
{
  "Days": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
}
```
And I want to parse it as for each "title" to insert it into a div.

Trying along the lines of
```
function getdata() {
31 $.ajaxSetup ({ cache: false}); //
32 
33 $.getJSON(testurl, function(data) {
34 $.each(data.days, function(i,item){
35 $('#testfield').append('<p>' + item + '</p>');
36
37 });
38 }); 
```
to no avail.

I am using Getjson in other places but in cases where I know what request I am making. e.g:
```
$('#name').html(data.Projectname);
```
Which is all working perfectly fine but in this case I need to get the details out of the array without knowing what is inside the array I'm sure there is something simple that I'm missing here or doing wrong ^^.

The JSON I have currently been working with looks like :
```
{"Projectname":"ertyofhj","Projectid":"aqwertyuqw","Projecttitle":"ertyofhj"}
```
The array was just a way to look out pulling out the data without knowing what was inside the array.

I just keep adding more. Debugging firebug or IE's debugger(Aargh) it will hit
```
33 $.getJSON(testurl, function(data) {
```
then
```
38 });
```
completely skipping
```
34 $.each(data.days, function(i,item){
```
-The GET request fires fine and returns the correct JSON string. But now it will not fill the $.each, or even if I specifically ask for a certain string. ~~On note of above Firebug is also telling me that it isn't formatted as JSON?~~

Changed the original JSON string to something simpler.(Days of the week) as is days of the week will load. So I am getting somewhere. But I need to be able to call a more complex array. For example (using the days) each day has a specific time on it that I need to display as well also each day should be on a new line tried adding in a " + '< br />' but that doesn't work either. Displayed in an array such as:
```
{
  "Days": ["Sunday": "10.00", "Monday": "12.00", "Tuesday": "09.00", "Wednesday": "10.00", "Thursday": "02.00", "Friday": "05.00", "Saturday": "08.00"]
}
```
And I need to pull Dayname & time for all.