Question

I have an external JSON file (data.json) and would like to get data from a specific array inside that file and make a Ul from it.
How would grab the data from “markers” with this code?

code:

$.getJSON('data.json', function(data) {
    var items = [];

$.each(data, function(i, item) {
    items.push('<li><p>' + item.name + '</p><p>' + item.image + '</p><p>' + item.link + '</p></li>');
});

$('<ul/>', {
    'class': 'json_populated',
    html: items.join('')
    }).appendTo('.popover_content');
});

data.json file:

 { "lastUpdated":"12:57",
   "filterOut":[

            ],
    "markers":[
        {"name" : "blah", "image" : "images/logos/image1.png", "link" : "/link1"},
        {"name" : "blah 2", "image" : "images/logos/image2.png", "link" : "/link2"},
        {"name" : "blah 3", "image" : "images/logos/image3.png", "link" : "/link3"}

    ]}

Also would it be the same principle if i was to grab JSON from an external site like this

$.getJSON('http://website.co.uk/idname/49482/', function(data) {
    var items = [];

$.each(data, function(i, item) {
    items.push('<li><p>' + item.name + '</p><p>' + item.image + '</p><p>' + item.link + '</p></li>');
});

$('<ul/>', {
    'class': 'json_populated',
    html: items.join('')
    }).appendTo('.popover_content');
});

I think im almost there but any assistance will be much appreciated.

Answer 1

You may use result as an object.

$.getJSON('data.json', function(data) {
    var items = [];
$.each(data.markers, function(i, item) {
    items.push('<li><p>' + item.name + '</p><p>' + item.image + '</p><p>' + item.link + '</p></li>');
});
$('<ul/>', {
    'class': 'json_populated',
    html: items.join('')
    }).appendTo('.popover_content');
});
});