Calling Correct Values of JSON from nested objects

Question

I am calling in JSON that returns like

Here is an actual part of the JSON file. There is more to it than this but I am just trying to show how I can get nested values.

{
  player: {
    id: 277013255,
    game: "bf4",
    plat: "pc",
    name: "f1ss1on",
    tag: "MCG",
    dateCheck: 1524851054474,
    dateUpdate: 1524849279114,
    dateCreate: 1385342286868,
    dateStreak: 1524849279114,
    lastDay: "20160222",
    country: "",
    countryName: null,
    rank: {
      nr: 33,
      imgLarge: "bf4/ranks/r33.png",
      img: "r33",
      name: "Master Sergeant III",
      needed: 1280000,
      next: {
        nr: 34,
        imgLarge: "bf4/ranks/r34.png",
        img: "r34",
        name: "Master Sergeant IV",
        needed: 1345000,
        curr: 1317090,
        relNeeded: 65000,
        relCurr: 37090,
        relProg: 57.06153846153846
      }
    },

My Code is:

$(document).ready(function() {
  "use strict";

  var html = '';
  $("button").click(function() {
    $.getJSON("https://api.bf4stats.com/api/playerInfo?plat=pc&name=f1ss1on&output=json", function(result) {
      $.each(result, function(i, entry) {
        html += '<ul>';
        html += '<li class="name col-5">' + entry.name + '</li>';
        html += '<li class="date col-3">' + entry.tag + '</li>';
        html += '<li class="assigned col-4">' + entry.rank + '</li>';
        html += '</ul>';
      });
    }
    $('div').html(html);
  });
});

The expected return should be

f1ss1on
MCG
33

But instead I get this in return:

f1ss1on
MCG
[object Object]
undefined
undefined
33

How can I properly call nested JSON objects onto the correct element?

I have tried doing:

entry.rank.nr

but this returns "Uncaught TypeError: Cannot read property 'nr' of undefined"

your JSON declaration is so weird, I can not understand it, and why you wanna call 28, you wrote `entry.rank`, you should write `entry.rand.level`. — AmerllicA, Oct 12 '18 at 18:16
That's both invalid JSON and invalid JavaScript. Please paste the actual content of the network response, or do `JSON.stringify(result)` on the parsed response. — Heretic Monkey, Oct 12 '18 at 18:19
I wasnt giving full json just trying to show example of how it is nested. — f1ss1on, Oct 12 '18 at 18:20
You might also give a read to the answers to https://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json — Heretic Monkey, Oct 12 '18 at 18:20
Possible duplicate of [Access / process (nested) objects, arrays or JSON](https://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json) — Kevin B, Oct 12 '18 at 18:24
Okay, so just so you know, it's somewhat odd to use `$.each` on an object. It will run for every top-level property on the returned object. Maybe that's okay, just odd. Also, I would strongly suggest learning to use the debugger and looking at exactly what `entry.rank` is (which is an object, so printing that would actually show `[object Object]` not `undefined` as you've said in your post). Read the proposed duplicate; it has a wealth of information about this. — Heretic Monkey, Oct 12 '18 at 18:43
Just for clarity, you don't _"call"_ JSON. It is a notation that describes a data structure; you _parse_ JSON to turn the text representation of the data back into an actual data structure. — Stephen P, Oct 12 '18 at 19:02
Its not cool to down vote just becuase I didnt format perfectly for you all. I appreciate the help but I was trying to put least amount of code in just to show an example of the nesting. I fixed everything. SO if you could please relook and help it would be appreciated. — f1ss1on, Oct 12 '18 at 19:06
The only portion of your object that you've shown us is the portion that seems to be working perfectly, so we can't possibly know what's wrong with the next iterations. `rank`, as you can see, has a bunch of properties. You need `entry.rank.nr`. It sounds like the portion of your object that you *haven't shown us* is malformed, and doesn't contain the same properties. — Tyler Roper, Oct 12 '18 at 19:11
@TylerRoper I can only put 3000 words into the body so the full JSON can be found at https://api.bf4stats.com/api/playerInfo?plat=pc&name=f1ss1on&output=json — f1ss1on, Oct 12 '18 at 19:24

Tyler Roper · Answer 1 · 2018-10-12T19:55:09.883

The Solution

The endpoint you're calling doesn't return multiple players, it returns one single player object, so I'm not sure any sort of loop or each is necessary.

The following seems to work just fine:

$.getJSON("https://api.bf4stats.com/api/playerInfo?plat=pc&name=f1ss1on&output=json", function(result) {
  var player = result.player;
  console.log("Name:", player.name);
  console.log("Tag:", player.tag);
  console.log("Rank:", player.rank.nr);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Explanation Of Your Results

To show exactly what went wrong in your query, open up your browser console and take a look at this. It's your result in tabular form.

$.getJSON("https://api.bf4stats.com/api/playerInfo?plat=pc&name=f1ss1on&output=json", function(result) {
  console.table(result);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

If the table doesn't appear in your console, re-run this snippet with the console already open.

Here, you can see the items that you were looping through as rows in the table.

The first item is player, which is why name and tag came back properly, but rank came back as an object.

The second item is stats. The results in this row explain why your second iteration returned name and tag as undefined, but rank as 33.

I'd imagine you got a whole lot of undefineds after that (three for each item).

Calling Correct Values of JSON from nested objects

1 Answers1

The Solution

Explanation Of Your Results