So I will explain quickly. I am really new to JSON and Jquery/Javascript. I am building an internal website for a school and I want to build a specific page for each grade with the students listed on the page. Then all students has his personal page. The Json file looks like this:

[
  {
    "id": "sixthgrade",
    "grade": "Sixth grade",
    "URL": "/grades/sixthgrade.html",
    "listStudents": [
      {
        "studentName": "John Doe",
        "stuudentId": "johndoe",
        "studentPage": "/students/johndoe.html",
        "studentImageUrl": "/images/students/johndoe.jpg"
      }
    ]
  },
  {
    "id": "sixthgrade",
    "grade": "Sixth grade",
    "URL": "/grades/sixthgrade.html",
    "listStudents": [
      {
        "StudentName": "Paul Jackson",
        "studentId": "pauljackson",
        "studentPage": "/students/pauljackson.html",
        "studentImageUrl": "/images/students/pauljackson.jpg"
      },
      {
        "StudentName": "Alisson Smith",
        "studentId": "sixthgrade",
        "studentPage": "/students/alissonsmith.html",
        "studentImageUrl": "/images/students/alissonsmith.jpg"
      }
    ]
  }
]

And the JavaScript is that:

$.getJSON("/scripts/school.json", function(data) {
  var table = [];
  var studentId = '';
  var studentName = '';
  var studentImageUrl = '';
  var studentPage = '';
  var gradeId = '';
  $.each(data, function(key, val) {
    table = val['listStudents'];
    gradeId = val['id'];

    $.each(table, function(id, value) {
      studentId = value['studentId'];
      studentName = value['studentName'];
      studentImageUrl = value['studentImageUrl'];
      studentPage = value['studentPage'];
      table.push("<li class='container-image "   studentId   "'><a href='"   studentPage   "'><img src='"   studentImageUrl   "' /><span class='text'>"   studentName   "</span></a></li>");
      console.log(table);
    });

    $("<ul/>", {
      "class": "students-list "   gradeId   "",
      html: table.join('')
    }).appendTo("#list-students");
  });
});

I get this result for the 1st row UL [object Object] then the result of the Li that is what I only want to have. For the 2nd row, I have UL [object Object][object Object] then the 2 LI with the only results I want to have. For each row I have [object Object] depending of the number of students and then the LI with the information I want to have.

I tried to put JSON.stringify() everywhere I could and still getting [object Object].

Help would be so helpful. Thanks in advance.

CodePudding user response：

You have an array table which is equal to val['listStudents'] and contains data. Later on, you additionally push HTML into that array.

I would suggest you use a separate variable for your HTML output.

table = val['listStudents'];
let output = [];
gradeId = val['id'];
    
$.each(table, function (id, value) {
    studentId = value['studentId'];
    studentName = value['studentName'];
    studentImageUrl = value['studentImageUrl'];
    studentPage = value['studentPage'];
    output.push("<li class='container-image "   studentId   "'><a href='"   studentPage   "'><img src='"   studentImageUrl   "' /><span class='text'>"   studentName   "</span></a></li>");
    console.log(output);
});

$( "<ul/>", {
  "class": "students-list "   gradeId   "",
  html: output.join('')
}).appendTo("#list-students");

CodePudding user response：

Check your JSON - studentName VS StudentName and in Javascript avoid to using same variable for processing and input table - here is working code & JSON:

[
  {
    "id": "sixthgrade",
    "grade": "Sixth grade",
    "URL": "/grades/sixthgrade.html",
    "listStudents": [
      {
        "studentName": "John Doe",
        "stuudentId": "johndoe",
        "studentPage": "/students/johndoe.html",
        "studentImageUrl": "/images/students/johndoe.jpg"
      }
    ]
  },
  {
    "id": "sixthgrade",
    "grade": "Sixth grade",
    "URL": "/grades/sixthgrade.html",
    "listStudents": [
      {
        "studentName": "Paul Jackson",
        "studentId": "pauljackson",
        "studentPage": "/students/pauljackson.html",
        "studentImageUrl": "/images/students/pauljackson.jpg"
      },
      {
        "studentName": "Alisson Smith",
        "studentId": "sixthgrade",
        "studentPage": "/students/alissonsmith.html",
        "studentImageUrl": "/images/students/alissonsmith.jpg"
      }
    ]
  }
]

Javascript:

      $.getJSON( "students.json", function( data ) {
        $.each(data, function (key, val) {
          var outputHTML = [];
          var table = val['listStudents'];
          var gradeId = val['id'];

          $.each(table, function (id, value) {
              var studentId = value['studentId'];
              var studentName = value['studentName'];
              var studentImageUrl = value['studentImageUrl'];
              var studentPage = value['studentPage'];
              outputHTML.push("<li class='container-image "   studentId   "'><a href='"   studentPage   "'><img src='"   studentImageUrl   "' /><span class='text'>"   studentName   "</span></a></li>");
              console.log(outputHTML);
          });
          
          $( "<ul/>", {
            "class": "students-list "   gradeId   "",
            html: outputHTML.join('')
          }).appendTo("#list-students");
        });
      });

CodePudding user response：

[object Object] usually happens when JSON is accidentally converted to string somewhere along the process, often seen in the real world in LocalStorage.

To fix your problem, try JSON.parse() instead

In addition, consider exporting your data from a JS file as a complex constant object to import into another file where you might need it. You can avoid a lot of JSON errors and additional parsing discrepancies. JSON is most typically used in an API response, but not really for anything else. Most javascript developers would agree that staying within the scope of javascript with code is better due to being able to actually test said code, instead of having to import a file of another type. See more here.