How to display a json response in a html table

Question

I know the problem is the data.map. Maybe its because map is made for arrays and i have an array of objects and not a array?

API-Response:

[
  {
    "id": 16,
    "nachname": "Köpper",
    "vorname": "Chris",
    "projectList": []
  },
  {
    "id": 13,
    "nachname": "Kämpfer",
    "vorname": "Gerrit",
    "projectList": [
      {
        "id": 9,
        "name": "FB.de"
      },
      {
        "id": 7,
        "name": "DFBnet"
      }
    ]
  },
  {
    "id": 12,
    "nachname": "Voges",
    "vorname": "Arved",
    "projectList": [
      {
        "id": 9,
        "name": "FB.de"
      },
      {
        "id": 7,
        "name": "DFBnet"
      }
    ]
  }
]

HTML-Table:

<table class="table" id="output1">
        <thead>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">Vorname</th>
                <th scope="col">Nachname</th>
            </tr>
        </thead>
        <tbody>

        </tbody>

    </table>

js:

function getPerson(){
fetch(url)
    .then(res => res.json())
    .then(data => {
        var tableContent = document.querySelector('#output1 > tbody');
        data.map(function(instance) {
            const row = document.createElement('tr');
            tableContent.appendChild(row);
            instance.map(function(info) {
                const cell = document.createElement('td');
                cell.innerText = info;
                row.appendChild(cell);
            });
        });
    })
}

Alwin Kesler · Accepted Answer · 2020-04-27 16:46:48Z

I've made a jsfiddle to help you out. Map is for array, so you're missing one step (iterate object attributes, one for cell).

let content = [{
    "id": 16,
    "nachname": "Köpper",
    "vorname": "Chris",
    "projectList": []
  },
  {
    "id": 13,
    "nachname": "Kämpfer",
    "vorname": "Gerrit",
    "projectList": [{
        "id": 9,
        "name": "FB.de"
      },
      {
        "id": 7,
        "name": "DFBnet"
      }
    ]
  },
  {
    "id": 12,
    "nachname": "Voges",
    "vorname": "Arved",
    "projectList": [{
        "id": 9,
        "name": "FB.de"
      },
      {
        "id": 7,
        "name": "DFBnet"
      }
    ]
  }
]


function getPerson() {
  Promise.resolve(content)
    //fetch(url).then(res => res.json())
    .then(data => {
      var tableContent = document.querySelector('#output1 > tbody');
      data.map(function(instance) {
        const row = document.createElement('tr');

        for (let c of ['id', 'nachname', 'vorname']) {
          let cell = document.createElement('td');
          if (instance.hasOwnProperty(c)) {
              cell.innerText = instance[c]
          }

          row.appendChild(cell)
        }

        tableContent.appendChild(row)
      });
    })
}

getPerson()

<table class="table" id="output1">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Vorname</th>
      <th scope="col">Nachname</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

sdotson · Accepted Answer · 2020-04-27 16:39:41Z

If data is an array of objects, then instance is one single object within that array. You can't map over an object directly. If you are trying to create a table cell for each key/value pair, I would suggest looking at Object.values() or Object.entries to create the array that you can then iterate (map) over.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

Something like:

Object.values(instance).map(function(info) {
  const cell = document.createElement('td');
  cell.innerText = info.toString();
  row.appendChild(cell);
});

Although you would need to decide how you want to represent projectList in the table as well, perhaps by iterating again and creating an inner table or concatenating the values together to a string.

If I'm missing something important about your use case, feel free to comment and I'll amend my answer.

Aman · Accepted Answer · 2020-04-27 17:09:24Z

No, the problem is not with data.map, because the map function works on any kind of array whether it is plain array or array of objects.The problem in your code is regarding the instance.map , since the individual element of data array is an object. Therefore either we can use for...in statement as below

function getPerson() {
      fetch(url)
      .then(res => res.json())
      .then(data => {
        var tableContent = document.querySelector('#output1 > tbody');
        data.map(function (instance) {
          const row = document.createElement('tr');
          tableContent.appendChild(row);
          for (key in instance) {
            if (key !== 'projectList') {
              const cell = document.createElement('td');
              cell.innerText = instance[key];
              row.appendChild(cell);
            }
          }
        });
      })
    }

Collectives™ on Stack Overflow

How to display a json response in a html table

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related