Paolo Faieta Paolo Faieta - 6 months ago 22
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:

{"Week1":[
{"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

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"}
],
 "Week2":[
{"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>' + val.link + '</li><li>' + val.mda + '</li></ul>';
   $('div[class="' + i + '"]').append(text);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  
<body>

Plunker

Comments