Parse JSON feed to HTML with jQuery

Question

I am trying to parse the following JSON feed into HTML, but not getting any results.

{
  @name: "App name",
  license: [
    {
      @name: "Apache License 2.0",
      component: [
        {
          name: "Product 1",
          url: "http://www.url.com"
        }, {
          name: "Product 2",
          url: "http://www.url.com"
        }, {
          name: "Product 3",
          url: "http://www.url.com"
        }
      ],
      licensetext: " license text here"
    }
  ],
  isProjectComplete: "true"
}

With this jQuery:

$.getJSON("https://json-feed-url.json", function (data) {
  var jsondata = json;
  var output = "<ul>";
  for (var i in jsondata.events) {
    output += "<li>" 
      + jsondata.component[i].name + " " 
      + jsondata.component[i].url + "--"
      + jsondata.license[i].licensetext
      + "</li>";
  }

  output += "</ul>";
  document.getElementById("content").innerHTML = output;
});

To this div

<div id="content"></div>

Not sure why its not parsing correctly. Here's a jsFiddle.

Not sure your JSON is valid at all, validate here. A valid JSON would start with {"@name": "App name"Also, on the other hand, for cross-domain requests you would need JSONp. — skobaljic
– skobaljic, Commented Jan 15, 2015 at 16:06
Your keys need to be quoted: e.g. "@name" instead of @name, "license" instead of license, etc. — Paul Roub
– Paul Roub, Commented Jan 15, 2015 at 16:12
@skobaljic, the JSON is valid, and is coming directly from an AWS instance. I'd share the URL, but it has a secret key that is required to view the feed. — Matt
– Matt, Commented Jan 15, 2015 at 16:49

skobaljic · Accepted Answer · 2015-01-15 17:02:54Z

1

You have several errors, starting from invalid JSON you posted. Corrected it should work as you can see HERE and below:

var yourJson = {
    "@name": "App name",
        "license": [{"@name": "Apache License 2.0",
            "component": [{
            "name": "Product 1",
                "url": "http://www.url.com"
        }, {
            "name": "Product 2",
                "url": "http://www.url.com"
        }, {
            "name": "Product 3",
                "url": "http://www.url.com"
        }],
            "licensetext": " license text here"
    }],
        "isProjectComplete": "true"
};

function convertJson(data) {
    var jsondata = data;
    var output = "<ul>";
    for (var i in jsondata.license[0].component) {
        output += "<li>" + jsondata.license[0].component[i].name + " " + jsondata.license[0].component[i].url + "--" + jsondata.license[0].licensetext + "</li>";
    }

    output += "</ul>";
    document.getElementById("content").innerHTML = output;
};

convertJson(yourJson);

You should be more careful and you should learn to use debugging tools more effective.

answered Jan 15, 2015 at 17:02

skobaljic

9,6841 gold badge29 silver badges52 bronze badges

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

5 Comments

Matt Over a year ago

my JSON feed is correct. I'm using the JSON View extension in chrome to view my feed(which takes out the double quotes) I'm not sure of the syntax to change from var yourJson = {} to using the URL

Matt Over a year ago

Thanks for the help. I updated the jsfiddle(with actual url removed), but its still not pulling the feed in. It is when I have the actual data, but not with the URL.

Matt Over a year ago

Working on two different versions, but for now using the static content. Also trying to figure out how to apply an href to the url output

Matt Over a year ago

I am encapsulating the url with "<a href='license[0].component[i].url'>" + jsondata.license[0].component[i].url + "</a>", but its not applying the URL accordingly.

skobaljic Over a year ago

Let us continue this discussion in chat.

Hiroaki Machida · Accepted Answer · 2015-01-15 17:30:00Z

0

You have a typo in jsFiddle

// WRONG
$.getJSON("http://jsonurl.json";, function (data) {
// CORRECT
$.getJSON("http://jsonurl.json", function (data) {

answered Jan 15, 2015 at 17:30

Hiroaki Machida

1,0982 gold badges12 silver badges24 bronze badges

2 Comments

Heretic Monkey Over a year ago

Maybe I'm getting old, but the WRONG and CORRECT versions look exactly the same... I think you meant to remove the semicolon in the CORRECT version?

Hiroaki Machida Over a year ago

Yes, I meant to remove the semicolon.

Collectives™ on Stack Overflow

Parse JSON feed to HTML with jQuery

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related