Прочитать вложенную json в javascript и построить HTML таблицу - PullRequest
Новая
       8

Прочитать вложенную json в javascript и построить HTML таблицу

0 голосов
/ 19 апреля 2020

Я пытаюсь прочитать вложенный Json объект с помощью javacript и преобразовать его в HTML таблицу с опцией поиска и экспортировать данные таблицы в таблицу Excel, но не удается прочитать вложенные объекты, может кто-нибудь помочь с каким-нибудь псевдокодом 

{
 "Person1": {
        "updateddate": "2017-05-10", 
        "desc": "new joinee", 
        "Id": {
            "12345": {
                "locallinks": [
                    "local_link1"
                ]
            }
        }, 
        "externallinks": [
            "external_link1"
        ], 
        "updateduser": "admin"
    } 
    },
    "Person2": {
        "updateddate": "2017-06-10", 
        "desc": "existing", 
        "Id": {
            "12346": {
                "locallinks": [
                    "local_link1"
                ]
            }
        }, 
        "externallinks": [
            "external_link1"
        ], 
        "updateduser": "user"
    } 
    },
    "Person3": {
        "updateddate": "2017-06-10", 
        "desc": "new joinee", 
        "Id": {
            "12347": {
                "locallinks": [
                    "local_link1"
                ]
            }
        }, 
        "externallinks": [
            "external_link1"
        ], 
        "updateduser": "admin"
    } 
    }
    }

Мне нужен HTML стол с заголовками

Person , Updated Date, Desc, ID , external links , Updated User

Ответы [ 2 ]

0 голосов
/ 19 апреля 2020

Добавленный вами JSON недействителен. Используйте следующие данные JSON: 

var data = 
{
 "Person1": {
        "updateddate": "2017-05-10", 
        "desc": "new joinee", 
        "Id": {
            "12345": {
                "locallinks": [
                    "local_link1"
                ]
            }
        }, 
        "externallinks": [
            "external_link1"
        ], 
        "updateduser": "admin"
    },
    "Person2": {
        "updateddate": "2017-06-10", 
        "desc": "existing", 
        "Id": {
            "12346": {
                "locallinks": [
                    "local_link1"
                ]
            }
        }, 
        "externallinks": [
            "external_link1"
        ], 
        "updateduser": "user"
    },
    "Person3": {
        "updateddate": "2017-06-10", 
        "desc": "new joinee", 
        "Id": {
            "12347": {
                "locallinks": [
                    "local_link1"
                ]
            }
        }, 
        "externallinks": [
            "external_link1"
        ], 
        "updateduser": "admin"
    }
}

Для чтения вложенных объектов вы можете использовать метод Object.keys 

Object.keys(data).forEach(person =>{
  console.log("person ",person)
  Object.keys(data[person]).forEach(props =>{
    /*Nested JSON props here*/
  })
})
0 голосов
/ 19 апреля 2020

Ваш вопрос не ясен, но я могу понять, что вы хотите. Есть код для того, чтобы дать вам идею. 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <table id="data" border="1" style="border-collapse: collapse;">
    <thead>
      <tr>
        <td>Person </td>
        <td>Updated Date</td>
        <td>Desc</td>
        <td>ID</td>
        <td>external links</td>
        <td>Updated User</td>
      </tr>
    </thead>

    <tbody></tbody>
  </table>

  <script>
    let xhttp;

    function getData() {
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
          const data = JSON.parse(this.responseText);
          console.log(data);
          createData(data);
        } else {
          console.log(this.readyState, this.status);
        }
      };

      xhttp.open('GET', 'http://www.mocky.io/v2/5e9c2d9a30000059000a7dc5',
      true);
      xhttp.send();
    }

    getData();

    function createData(data) {
      const table = document.querySelector('#data>tbody');
      const tableRow = document.createElement('tr');

      Object.values(data).forEach(person => {
        tableRow.innerHTML = `
        <td>${'xxx'}</td>
        <td>${person.updateddate}</td>
        <td>${person.desc}</td>
        <td>${person.Id}</td>
        <td>${person.externallinks}</td>
        <td>${person.updateduser}</td>
  `;

        table.appendChild(tableRow);

      });
    }
  </script>
</body>

</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...