Reading through nested Json files for display on a web page

Question

I have a JSON file that stores a Reddit post title along with its overall score:

{
  "'JavaFX Simple Inventory Management App - Open source'": 39, 
  "'Creating Formula Dependency Maps from Excel Spreadsheets'": 5, 
  "'CVE-2017-5645: Apache Log4j socket receiver deserialization vulnerability'": 11
}

I can access this data easily and list it out to a DOM using this code:

$.getJSON("./data.json", function(json) {
    var list = [];
    /*Adds each key value pair to a `<li> tag`.*/
    $.each(json, function(key, val) {
        list.push("<li id='redditData'>" + key + ": " + val + "</li>");
    });
    /*Appends each data-filled `<li>` tag to a `<ul>` tag.*/
    $("<ul>", {
      "class": "data",
      html: list.join("")
    }).appendTo("#dataContainer");
});

However, I want to store the data with more precise information, showing an approximate upvote / downvote ratio, like so:

{
  "'JavaFX Simple Inventory Management App - Open source'": 
    {"upvotes": 44.0, "downvotes": 7.0}, 

  "'Creating Formula Dependency Maps from Excel Spreadsheets'": 
    {"upvotes": 3.0, "downvotes": 1.0}, 

  "'CVE-2017-5645: Apache Log4j socket receiver deserialization vulnerability'": 
    {"upvotes": 12.0, "downvotes": 1.0}
}

How could I go about looping through this data and correctly display it?

Pango · Accepted Answer · 2017-04-18 03:35:27Z

1

Right now the titles of the posts are serving as the keys of the objects for the post data objects. This technically means that if any posts were to have the same name, the data would get overwritten by whichever post was added last.

In the long run you'll have an easier time if you can restructure your JSON more like:

{
    "title": "TITLE OF THE POST",
    "upvotes": SOME NUMBER,
    "downvotes": SOME NUMBER
}

and have an array of objects which contain the post information with its own attributes for title, upvotes, and downvotes (and whatever else you want to add). Then, you would loop through the array and get the object and access the attributes like:

var json = [
    {
        "title": "Some title",
        "downvotes": 100,
        "upvotes": 50
    },
    {
        "title": "Another title",
        "downvotes": 500,
        "upvotes": 40
    }
];

var obj;
for (var i=0; i<json.length; i++) {
  obj = json[i];
  console.log(obj.title);
  console.log(obj.downvotes);
  console.log(obj.upvotes);
}

If, for some reason, you really had to keep it they way you have it, you can do:

var title;
var downvotes;
var upvotes;

for (var key in json) {
  var title = key;
  var downvotes = json[key].downvotes;
  var upvotes = json[key];
}

Which is basically the same as adding the attribute name to what you have for val in your $.each. So, val.downvotes and val.upvotes.

answered Apr 18, 2017 at 3:35

Pango

6735 silver badges10 bronze badges

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

1 Comment

staticCoffee Over a year ago

Good point on the title! I thought it would make things easier to organize, but of course my ideas just end up making things hard for me, as always. I've updated my code to group the submissions into the format you've recommended. I then incorperated your bit of Javascript into my jQuery loop and everything is coming out golden. I appreciate the help. I wasn't thinking too clearly last night.

Collectives™ on Stack Overflow

Reading through nested Json files for display on a web page

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related