Данные массива не будут отображаться в таблице

Question

Данные массива не будут отображаться в таблице

0

У меня есть функция ajax, которая отправляет запрос на получение api и возвращает данные в следующем format-

{
    "firstname": "John",
    "lastname": "Doe",
    "email": "[email protected]",
    "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);
         }
      });
   }

bookthief 28 нояб. 2013, в 11:42

Источник

2

у вас есть какие-либо ошибки в вашей консоли JS?
Saturnix 28 нояб. 2013, в 10:37
0

Я думаю, что вам нужно сначала проанализировать данные JSON с помощью JSON.parse ()
Let me see 28 нояб. 2013, в 10:39

Теги:

javascript

html

for-loop

html-table

2 ответа

0

Как вы думаете, вы пропускаете '<'?

В линии:

 $("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", а не содержимое таблицы. Я думаю, что это скорее нечто вроде $("table.insidetable").val()

Damon 28 нояб. 2013, в 07:40

0

хм спасибо, его все еще не отображается, хотя
bookthief 28 нояб. 2013, в 10:42
0

Заметил что-то еще и обновил мой ответ, надеюсь, это поможет!
Damon 28 нояб. 2013, в 10:50

Ещё вопросы

у вас есть какие-либо ошибки в вашей консоли JS?
Я думаю, что вам нужно сначала проанализировать данные JSON с помощью JSON.parse ()
хм спасибо, его все еще не отображается, хотя
Заметил что-то еще и обновил мой ответ, надеюсь, это поможет!

Sajad Deyargaroo · Accepted Answer · 2013-11-28T10-07-00.000Z

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

var data = [{
  "firstname": "John",
  "lastname": "Doe",
  "email": "[email protected]",
  "subjects": [
    {
        "id": 1,
    "name": "maths"
    },
    {
        "id": 2,
        "name": "chemistry"
    }
        ]
},
{
  "firstname": "Steve",
  "lastname": "Gentile",
  "email": "[email protected]",
  "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>');
}

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

Теги не закрыты должным образом
Используемые свойства не используются (данные [i].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>");