массив данных обыкновение дисплей в таблице

Question

У меня есть функция AJAX, которая посылает запрос GET к API данных и возвращает в следующем Формат-

{ 
    "firstname": "John", 
    "lastname": "Doe", 
    "email": "doej@gmail.com", 
    "subjects": [ 
     { 
     "id": 1, 
     "name": "maths" 
     }, 
     { 
     "id": 2, 
     "name": "chemistry" 
     } 
    ] 
    }, 

мне нужно, чтобы отобразить эти данные в таблице, но я, имеющий проблема в том, что массив объектов отображается правильно, т. е. как список в одной ячейке таблицы. Я попытался поместить данные массива в другую таблицу внутри основной, но это не работает. Я предполагаю, что я ошибаюсь в моих итерационных циклах.

function getPeople() { 


    $.ajax({ 
     type: "GET", 
     url: "http://example.com", 
     contentType: "application/json; charset=utf-8", 
     crossDomain: true, 
     dataType: "json", 
     success: function (data, status, jqXHR) { 



      // fill a table with the JSON 
      $("table.mytable").html("<tr><th></th><th>First Name</th><th>Last Name</th><th>Subjects</th></tr>" ); 

for (var i = 0; i < data.length; i++) { 

     for (var j = 0; j < data[i].subjects.length; j++) { 

      var subjects = data[i].subjects[j]; 
     $("table.insidetable").append('<tr><td>' + subjects + 'tr><td>') 
     } 

    $("table.mytable").append('<tr><td><input type = "checkbox" id = '+data[i].id+'>' + "</td><td>" + data[i].firstname + "</td><td>" + data[i].lastname + "</td><td>" + "table.insidetable" + "</td></tr>"); 
} 

     }, 

     error: function (jqXHR, status) { 
      // error handler 
      console.log(jqXHR); 
      alert('fail' + status.code); 
     } 
     }); 
    } 

Answer 1

Ниже приведен рабочий код.

var data = [{ 
    "firstname": "John", 
    "lastname": "Doe", 
    "email": "doej@gmail.com", 
    "subjects": [ 
    { 
     "id": 1, 
    "name": "maths" 
    }, 
    { 
     "id": 2, 
     "name": "chemistry" 
    } 
     ] 
}, 
{ 
    "firstname": "Steve", 
    "lastname": "Gentile", 
    "email": "steve@gmail.com", 
    "subjects": [ 
    { 
    "id": 1, 
    "name": "history" 
    }, 
    { 
     "id": 2, 
    "name": "geography" 
    } 
    ] 
}]; 

$("table.mytable").html("<tr><th></th><th>First Name</th><th>Last Name</th><th>Subjects</th></tr>"); 

for (var i = 0; i < data.length; i++) { 
    var subjectList = ''; 

    for (var j = 0; j < data[i].subjects.length; j++) { 
     subjectList += '<li>' + data[i].subjects[j].name + '</li>'; 
    } 

    $("table.mytable").append('<tr><td><input type="checkbox" id=' + i +'/></td><td>' + data[i].firstname + '</td><td>' + data[i].lastname + '</td><td><ul>' + subjectList + '</ul></td></tr>'); 
} 

Кажется, есть много проблем, ниже, как заявление,

• Метки не закрыты должным образом
• свойства, которые не существуют в настоящее время используются (данные [я] .id)
• Одиночные и двойные кавычки не совпадают

...

$("table.mytable").append('<tr><td><input type = "checkbox" id = '+data[i].id+'>' + "</td><td>" +data[i].firstname + "</td><td>" + data[i].lastname + "</td><td>" + "table.insidetable"+ "</td></tr>"); 

Answer 2

Как вы думаете, вы не указали '<'?

В строке:

$("table.insidetable").append('<tr><td>' + subjects + 'tr><td>') 

Также

$("table.mytable").append('<tr><td><input type = "checkbox" id = '+data[i].id+'>' + "</td><td>" + data[i].firstname + "</td><td>" + data[i].lastname + "</td><td>" + "table.insidetable" + "</td></tr>"); 

Я не думаю, что вы должны быть добавление "table.insidetable"? Это будет отображаться как значение «table.insidetable», а не содержимое таблицы. I думаю это скорее должно быть чем-то вроде $("table.insidetable").val()