Converting XML to JSON and output to HTML with jQuery

Question

I'm trying to test out an idea I had but using this XML to JSON script: https://github.com/sergeyt/jQuery-xml2json

But then take the JSON data and then output that into HTML with jQuery.

So far, I've been able to load up the data correctly and I can console.log out the JSON data which turns out to be something like this:

releases:
  $: {}
  matching_count: "698"
  returned_count: "50"
  latestModified: "1537876805"
  release: Array(50)
   0:
    $: {}
    id: "713"
    headline: "Eiger BioPharmaceuticals to Participate in Investor Conferences"
    released: "1537876800"
    releaseDate: "Tue, 25 Sep 2018 08:00:00 -0400"
    modified: "1537876805"
    modifiedDate: "Tue, 25 Sep 2018 08:00:05 -0400"
  1:
   $: {}
    id: "712"
    headline: "Communications industry innovator to speak at AMEC Global Summit"
    released: "1491400800"
    releaseDate: "Wed, 05 Apr 2017 10:00:00 -0400"
    modified: "1491400806"
    modifiedDate: "Wed, 05 Apr 2017 10:00:06 -0400"
...

My JS code that I have so far is this:

var ul = $("<ul>").appendTo("body");
$.ajax({
  url: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/8689/list.xml",
  dataType: "xml",
  success: function(response) {
    json = $.xml2json(response);
    console.log(json);
    $(json).each(function(index, headline) {
      ul.append($(document.createElement("li")).text(headline));
    });
  }
});

The issue is that when it renders out, all that comes back is [object Object] in a single li.

So, I know that I'm doing something incorrectly, but I'm not sure where and at what point I need to change over to get the data so I can render out the headline, releaseDate, and so on.

I've created a Codepen here: https://codepen.io/ultraloveninja/pen/YzPRjRw

I've read that I might need to use jQuery.parseJSON but after testing that a bit, I get some errors since it's still getting in that object.Object again.

I feel that I need to drill down a bit more to get within the releases.release somehow since that's where all the data is at to be rendered out.

Nico · Accepted Answer · 2020-01-20 19:18:36Z

1

The response you try to loop is an object representing the xml document. To access the releases array you have to use json["#document"].releases.release

var ul = $("<ul>").appendTo("body");
$.ajax({
  url: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/8689/list.xml",
  dataType: "xml",
  success: function(response) {
    json = $.xml2json(response);
    let release = json["#document"].releases.release
    $(release).each(function(index, headline) {
      ul.append($(document.createElement("li")).text(headline.headline));
    });
  }
});

Example

answered Jan 20, 2020 at 19:18

Nico

7,2764 gold badges26 silver badges42 bronze badges

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

3 Comments

ultraloveninja Over a year ago

Ahhh, ok I see it now. Ok cool. Thanks! Yeah, I'll keep messing with it. I'll have to see if I can dig out the other data as well within the releases.release like the dates and whatnot.

Nico Over a year ago

@ultraloveninja you can access other data inside the loop just specifying the key ex. headline.releaseDate

ultraloveninja Over a year ago

Ah ok, I see it now. Thanks!

Collectives™ on Stack Overflow

Converting XML to JSON and output to HTML with jQuery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related