JQuery JSON [object Object]

Question

I have a JSON that is structured like so:

students.json (UPDATED FROM COMMENTS BELOW)

{
  Cindy: { age: 9, m1: 80, m2: 90, s1: 90, s2: 100 },
  Mark: { age: 12, m1: 80, m2: 90, s1: 90, s2: 100 },
  Jeff: { age: 8, m1: 90, m2: 90, s1: 90, s2: 95 },
  Ann: { age: 11, m1: 90, m2: 60, s1: 90, s2: 100 },
  Jason: { age: 5, m1: 95, m2: 30, s1: 90, s2: 185 },
  Harvey: { age: 10, m1: 100, m2: 70, s1: 90, s2: 100 },
  Mike: { age: 9, m1: 100, m2: 80, s1: 90, s2: 82 },
  Ross: { age: 9, m1: 88, m2: 90, s1: 90, s2: 100 },
};

In my javascript code I'm importing multiple JSON using JQuery.

var objects = {};
$.getJSON("object1.json", function (data) {
  objects = data;
});

var students = {};
$.getJSON("info.json", function (data) {
  students = data;
});

// .......

function function1(object) {}
function function2(object) {}

// .......

function main() {
  function1(object1);
  function2(object2);
}

When I inspect the imported object students, I get:

[object Object]:{
"Cindy"   : {"age": 9,     "m1":80,  "m2":90, "s1":90 , "s2":100},
"Mark"    : {"age": 12,    "m1":80,  "m2":90, "s1":90 , "s2":100},
"Jeff"    : {"age": 8,     "m1":90,  "m2":90, "s1":90 , "s2":95},
"Ann"     : {"age": 11,    "m1":90,  "m2":60, "s1":90 , "s2":100},
"Jason"   : {"age": 5,     "m1":95,  "m2":30, "s1":90 , "s2":185},
"Harvey"  : {"age": 10,    "m1":100, "m2":70, "s1":90 , "s2":100},
"Mike"    : {"age": 9,     "m1":100, "m2":80, "s1":90 , "s2":82},
"Ross"    : {"age": 9,     "m1":88,  "m2":90, "s1":90 , "s2":100}
}

It appears that this [object Object] is now a "key"?

UPDATED:

My original question was from the thought that this was preventing me from accessing the object, but that was not my problem. It operates as expected. I can access students.Cindy.age //9 just fine. My problem is that the getJSON happens AFTER the function call so "undefined" objects are being passed into the functions. I need the html to load first as some of the javascript functions manipulate the html page.

Answer 1

you can access like the following 2 types

students.Cindy.age
students['Cindy']['age']

Answer 2

Fix the issues with missing commas around the array properties and assign the outer object to a variable. Then you can use bracket/dot notation to access the properties. You should also fix the nested objects indentation to make your code easier to read.

Check out this example .

var data = {
    "Cindy": {
        "age": 9,     
        "m1": 80,  
        "m2": 90, 
        "s1": 90, 
        "s2": 100
     },
    "Mark": {
        "age": 12,    
        "m1": 80,  
        "m2": 90, 
        "s1": 90, 
        "s2": 100
     }
}

Now the following accesses the data:

alert(data["Cindy"].age);
alert(data["Mark"].m1);

Answer 3

There are multiple issues. $.getJSON("info.json" these are async in nature. Instead of $.getJSON, u can use fetch It has better support. Using fetch requests. Promise.all wait for the responses then you can perform the task.

$(function () {
  function function1(objects) {
    console.log(objects)
  }
  function function2(students) {
    console.log(students.Cindy.age)
    console.log(students.Cindy.m1)
  }
  /*
  var objects = {};
  $.getJSON("object1.json", function (data) { // these are async in nature
    objects = data;
  });
  var students = {};
  $.getJSON("info.json", function (data) { // these are async in nature
    students = data;
  });
  */
  // instead of $.getJSON, u can use `fetch` It has better support
  const promises = [fetch("object1.json").then(res => res.json()) , fetch("info.json").then(res => res.json()]
  Promise.all(promises).then((results) => {
    const [objects, students] = results// data is avaible here, 
    function1(objects); // do something with objects
    function2(students);// do something with students
  })


})();