Parsing a complicated array with GetJSON Jquery

Question

TLDR:

Started with this question simplified it after got some of it working and continuing it here.
I need to 'GET' the JSON array
Format it correctly and for each within the array place it in the corresponding DIV.
??
It works.

This is a followup from this question to simplify and continue.

I need to some complicated JSON data from an array. With it I need the title and it's value. The reason why I am doing this is because I will know what the array is called but not the data that is being generated inside it.

Lets say this new array looks as follows:

{
  "Days": [{
      "day": "Sunday",
      "time": "10.00"
    },
    {
      "day": "Monday",
      "time": "12.00"
    },
    {
      "day": "Tuesday",
      "time": "09.00"
    },
    {
      "day": "Wednesday",
      "time": "10.00"
    },
    {
      "day": "Thursday",
      "time": "02.00"
    },
    {
      "day": "Friday",
      "time": "05.00"
    },
    {
      "day": "Saturday",
      "time": "08.00"
    }
  ]
}

Fixed thanks to (Matthew Flaschen)

I would need it to get Sunday & 10.00 as well as the same for all of the others.

My code to parse this at the moment is as follows:

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

Without the added times on each date it will parse the data as follows:

Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday

With the times added to the days in the array Firebug no longer recognizes it as a JSON string. So I am guessing I have formatted something wrong here. Also, I need each day & time to be on a new line I thought that

$('.testfield').append('<p>' + item + '</p>' + '<br />');

Would have applied each one to a new line but that did not work.

How do I get each day or item to be on a new line?
How do I get the $getjson to parse the data correctly day and its value, into a div?

Mottie · Accepted Answer · 2010-04-29 05:55:00Z

2

Try this (reformatted JSON - next time check your JSON with JSONLint):

{
    "Days": [
        {
            "Sunday": "10.00",
            "Monday": "12.00",
            "Tuesday": "09.00",
            "Wednesday": "10.00",
            "Thursday": "02.00",
            "Friday": "05.00",
            "Saturday": "08.00" 
        }
    ]
}

Script to work with it:

 $.getJSON( url, function(data){
  $.each(data.Days[0], function(key,value){
   $('.testfield').append('<p>' + key + ' : ' + value + '</p>');
  });
 });

answered Apr 29, 2010 at 5:55

Mottie

86.7k30 gold badges132 silver badges248 bronze badges

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

4 Comments

Sphvn Over a year ago

Haha JSONLint is definitely saved down now :)

Sphvn Over a year ago

Working perfectly. Thankyou very muchly

Sphvn Over a year ago

Now I the fun of making sure my JSON coming from server side is formatted correctly ^^

Mottie Over a year ago

I think what you were missing, beside the JSON, is the data.Days[0] and the function(key, value), see the jQuery.each() document page (api.jquery.com/jQuery.each) :P

Matthew Flaschen · Accepted Answer · 2010-04-29 05:44:02Z

1

That's not valid JSON. Do something like:

{"Days":
[{"day": "Sunday", "time": "10.00"},
 {"day": "Monday", "time": "12.00"},
 {"day": "Tuesday", "time": "09.00"},
 {"day": "Wednesday", "time": "10.00"},
 {"day": "Thursday", "time": "02.00"},
 {"day": "Friday", "time": "05.00"},
 {"day": "Saturday", "time": "08.00"}
]}

Always use JSONLint or another validator to check your syntax.

answered Apr 29, 2010 at 5:44

Matthew Flaschen

286k53 gold badges523 silver badges554 bronze badges

3 Comments

Sphvn Over a year ago

Formatting it as above i get [Object Object]. Because I am asking for all within "Days"

Matthew Flaschen Over a year ago

Yes, JSON is a subset of JavaScript literal syntax. So that is also a valid object literal.

Sphvn Over a year ago

Been working on this for a while now making my head a bit dizzy :P Thanks alot for the help.

tuomassalo · Accepted Answer · 2010-04-29 05:51:54Z

0

A little off-topic, but if you don't the contents for sure, you should use a safe method to insert data to DOM. Otherwise your code has a XSS vulnerability.

And besides being a security issue, any data such as "Foo Bar <[email protected]>" will not render as you (probably) wanted.

For example, you can use the jQuery text() method:

$('.testfield').append($('<p></p>').text(item));

answered Apr 29, 2010 at 5:51

tuomassalo

9,1716 gold badges50 silver badges50 bronze badges

Collectives™ on Stack Overflow

Parsing a complicated array with GetJSON Jquery

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related