Parsing a complicated array with GetJSON Jquery

Question

TLDR:

1. Started with this question simplified it after got some of it working and continuing it here.
2. I need to 'GET' the JSON array
3. Format it correctly and for each within the array place it in the corresponding DIV.
4. ??
5. 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.

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

Answer 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.

Answer 2

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));

Answer 3

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>');
  });
 });