Create <ul> from JSON with jQuery

Question

Spent better part of the afternoon on this, can't seem to get it exactly right. I have an external JSON file that looks like this:

[
    {
        "link": "http://www.google.com",
        "pName":"first partner",
        "vTitle":"Video Title",
        "shortDesc":"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque iusto, culpa mollitia, esse nobis iure.",
        "longDesc":"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas excepturi optio harum debitis, sed delectus nisi vel dicta, corporis corrupti, omnis ipsam quaerat. Nemo, voluptatum. Asperiores magnam, iste deleniti maxime. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, recusandae, quod. In assumenda, modi velit itaque enim sunt tempore eum, perspiciatis hic, vitae voluptas. Iste et sint odit molestiae illo."
    }
]

I need to create a li from each, and display it. Here's the closest I got, although its saying one of my items (link) isn't defined:

$(function(){
    $.getJSON('./JSON/latest.json', function(data) {
        var items = [];
        $.each(data, function(i, item) {
        items.push('<li><a href="' + link + '">' + pName + '</a><span class="vTitle">' + vTitle + '</span>' + shortDesc + '</li>');
        });
        $('#latestList').append( items.join('') );
    });
});

You don't need an array, just build up your output as a concatenated string. — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Oct 31, 2014 at 20:59
Your values are not "link", but should be "item.link", "item.vTitle" etc. — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Oct 31, 2014 at 21:00
Jeez I can't believe I missed that. Too many hours at this machine! thank you! — Dirty Bird Design
– Dirty Bird Design, Commented Oct 31, 2014 at 21:02
Sometimes you just need fresh eyeballs. It happens to me all the time. — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Oct 31, 2014 at 21:09

Joe · Accepted Answer · 2014-11-01 14:46:24Z

3

The context is 'item' so you need to read the properties from that.

$(function(){
  $.getJSON('./JSON/latest.json', function(data) {
    var items = [];
    $.each(data, function(i, item) {
      items.push(
        '<li>' +
          '<a href="' + item.link + '">' + item.pName + '</a>' +
          '<span class="vTitle">' + item.vTitle + '</span>' +
          item.shortDesc +
        '</li>');
    });
    $('#latestList').append( items.join('') );
  });
});

edited Nov 1, 2014 at 14:46

answered Oct 31, 2014 at 21:05

Joe

2,5962 gold badges16 silver badges12 bronze badges

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

Comments

B W · Accepted Answer · 2014-10-31 21:00:37Z

1

I think you need to specify item.link.

answered Oct 31, 2014 at 21:00

B W

7321 gold badge8 silver badges22 bronze badges

Comments

user2226112 · Accepted Answer · 2014-10-31 21:04:42Z

0

Instead of link and pName and so on

item[0].link
item[0].pName
item[0].vTitle
item[0].shortDesc

answered Oct 31, 2014 at 21:04

user2226112

Collectives™ on Stack Overflow

Create <ul> from JSON with jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related