Paolo Faieta Paolo Faieta - 1 year ago 122
JSON Question

Load JSON data and display in various divs

I'm new to JSON, and very rusty on my JavaScript, so this has been a bit of a struggle. I'm trying to load some JSON data into a file, and split that up into div containers. I'm being asked to basically create a shell page where it will load JSON data and populate the page based on the markup and data in the JSON file which can include any of: links, text, or embed code. The results on here are also extremely mixed as the methods used are either not fully explained, or deprecated.

A JSON Structure I came up with was:

{"desc":"Description", "link":"linkHere", "mda":"mediaHere"}

My concern is chiefly, loading it correctly without any fluff as a local file and then displaying it. I'm looking for a fresh perspective on this and some coding help.

Answer Source

Here is an example, a week create a div, and the array inside week, create the elements inside the div

var myJson = {"Week1":[
{"desc":"Description", "link":"linkHere", "mda":"mediaHere"},
  {"desc":"Description2", "link":"linkHere2", "mda":"mediaHere2"}
{"desc":"Description3", "link":"linkHere3", "mda":"mediaHere3"},
  {"desc":"Description3", "link":"linkHere3", "mda":"mediaHere3"}

$.each(myJson, function(i, week) {  
  $('body').append('<div class="' + i + '">' + i + '<br></div>');
  $.each(week, function(j, val) {
   var text = '<ul><li>' + val.desc + '</li><li>' + + '</li><li>' + val.mda + '</li></ul>';
   $('div[class="' + i + '"]').append(text);
<script src=""></script>


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download