Как создать таблицу из JSON объектов? - PullRequest
2 голосов
/ 17 февраля 2020

Я пытаюсь сделать таблицу из json объектов, на самом деле у меня есть JSON объектов в большом количестве. Но сначала я пытаюсь создать tabe для нескольких JSON объектов, если это будет go правильно, я реализую этот метод позже.

Это то, что я пытался до сих пор.

   var  attributes =

     [

      {

        "name": "Asset #",

        "display_name": "Asset #",

        "key": "header2",

        "values": {

          "MSSBL": "4-194169767930##1-2H77NZSQ",

          "SNOW": "4-194169767930##1-2H77NZSQ"},



        "type": "header",

        "data_type": "Text",

        "editable": "N"

      },

      {

        "name": "Serial Number",

        "display_name": "Serial Number",

        "key": "header3",

        "values": {

          "MSSBL": "21256112##1-2H77NZSQ",

          "SNOW": "NA##1-2H77NZSQ"},



        "type": "header",

        "data_type": "Text",

        "editable": "N"

      },

      {

        "name": "ACCOUNT NUMBER",

        "display_name": "ACCOUNT NUMBER",

        "key": "header6",

        "values": { "MSSBL": "532649##1-2H77NZSQ",
          "SNOW": "NA##1-2H77NZSQ"},  

        "type": "header",

        "data_type": "Text",

        "editable": "N"

      }
    ]
           var key = [];

           document.write("<table border==\"1\"><tr>");
           for (key in attributes[0]) {
           document.write('<td>' + '<b>' + key + '</b>' + '</td>');
            }

            document.write("</tr>");
            for (var i = 0; i < attributes.length; i++) {
            document.write('<tr>');
            for (key in attributes[i]) {
             document.write('<td>' + attributes[i][key] + '</td>');
             }
            document.write('</tr>');
              }
            document.write("</table>");

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

1007 *

Ответы [ 3 ]

3 голосов
/ 17 февраля 2020

Ваша проблема возникла из-за этого l oop:

for (var j = 0; j < col.length; j++) {
    // ...
}

Вы можете проверить, когда col[j] равно values, чтобы получить MSSBL или SNOW значение:

for (var j = 0; j < col.length; j++) {
    var tabCell = tr.insertCell(-1);

    if (col[j] === 'values') {
        var item = attributes[i][col[j]];

        console.log('MSSBL:', item.MSSBL);
        console.log('SNOW:', item.SNOW);

        // try to append MSSBL value:
        tabCell.innerHTML = item.MSSBL;
    } else {
        // other properties
        tabCell.innerHTML = attributes[i][col[j]];
    }
}

Обновление: в своем обновленном коде вы можете редактировать его внутри l oop:

for (key in attributes[i]) {            
    if (key === 'values') {
        document.write('<td>' + attributes[i][key]['MSSBL'] + '</td>');
    } else {
        document.write('<td>' + attributes[i][key] + '</td>'); 
    }             
}

var  attributes =

     [

      {

        "name": "Asset #",

        "display_name": "Asset #",

        "key": "header2",

        "values": {

          "MSSBL": "4-194169767930##1-2H77NZSQ",

          "SNOW": "4-194169767930##1-2H77NZSQ"},



        "type": "header",

        "data_type": "Text",

        "editable": "N"

      },

      {

        "name": "Serial Number",

        "display_name": "Serial Number",

        "key": "header3",

        "values": {

          "MSSBL": "21256112##1-2H77NZSQ",

          "SNOW": "NA##1-2H77NZSQ"},



        "type": "header",

        "data_type": "Text",

        "editable": "N"

      },

      {

        "name": "ACCOUNT NUMBER",

        "display_name": "ACCOUNT NUMBER",

        "key": "header6",

        "values": { "MSSBL": "532649##1-2H77NZSQ",
          "SNOW": "NA##1-2H77NZSQ"},  

        "type": "header",

        "data_type": "Text",

        "editable": "N"

      }
    ]
           var key = [];

           document.write("<table border==\"1\"><tr>");
           for (key in attributes[0]) {
           document.write('<td>' + '<b>' + key + '</b>' + '</td>');
            }

            document.write("</tr>");
            for (var i = 0; i < attributes.length; i++) {
            document.write('<tr>');
            for (key in attributes[i]) {
            
              if (key === 'values') {
                 document.write('<td>' + attributes[i][key]['MSSBL'] + '</td>');
              } else {
                 document.write('<td>' + attributes[i][key] + '</td>'); 
              }
             
             }
            document.write('</tr>');
              }
            document.write("</table>");
3 голосов
/ 17 февраля 2020

attributes[i]["values"] равно object

Вы должны повторить итерацию до attributes[i]["values"]. Добавить одно условие:

if(typeof attributes[i][col[j]]==='object') //then iterate again
1 голос
/ 17 февраля 2020

Посмотрите на это: https://github.com/MubashirEbad/Library-Management-System/blob/fd73fc6f1fa483c376f395f6df6a2b1129a7897f/index.html#L11 В настоящее время он отображает только строки данных таблицы. Вам нужно запустить еще один l oop для заголовков в таблице.

...