Displaying data results from fetch to HTML-CodePudding

I am trying to present a list of calculated results from a local server. On the console the data appears as an array of objects but on the page it is displayed as separated string characters for each li. How can i display the each objects content in each li?

here is what the console logs:

[{"number":11,"result":89,"createdDate":1581587946359,"_id":"4yS9mgRDE1LoBoyF"},{"number":12,"result":144,"createdDate":1645041579497,"_id":"HoFmbQrx1fgvChUH"},{"number":30,"result":832040,"createdDate":1581587975438,"_id":"KUonsyueRqD78mSv"},{"number":12,"result":144,"createdDate":1644936618090,"_id":"SY5oVvt6Go2Ivsql"},{"number":3,"result":2,"createdDate":1645015992250,"_id":"UuFkzs48RMkzySGW"},{"number":12,"result":144,"createdDate":1644935649784,"_id":"Wx3UgQ5bghSnGJqv"}]

  const list = document.getElementById("list");

  fetch(resultURL)
    .then((response) => response.json())
    .then((data) => {
      const calcResults = JSON.stringify(data.results);

      console.log(calcResults);
      for (let i = 0; i < calcResults.length; i  ) {
        let li = document.createElement("li");
        li.innerHTML = calcResults[i];
        list.appendChild(li);
      }
    });
}
window.addEventListener("load", fibonacci);

CodePudding user response：

I got your issue. Your are appending the complete object to DOM. Instead you need to append the values of Object to DOM. Look below example, I appended the result of calculation data[i].result, you can do this way any values.

var data = [{"number":11,"result":89,"createdDate":1581587946359,"_id":"4yS9mgRDE1LoBoyF"},{"number":12,"result":144,"createdDate":1645041579497,"_id":"HoFmbQrx1fgvChUH"},{"number":30,"result":832040,"createdDate":1581587975438,"_id":"KUonsyueRqD78mSv"},{"number":12,"result":144,"createdDate":1644936618090,"_id":"SY5oVvt6Go2Ivsql"},{"number":3,"result":2,"createdDate":1645015992250,"_id":"UuFkzs48RMkzySGW"},{"number":12,"result":144,"createdDate":1644935649784,"_id":"Wx3UgQ5bghSnGJqv"},{"number":5,"result":5,"createdDate":1623234311998,"_id":"XT2rgLbEQC5ADC2J"},{"number":4,"result":3,"createdDate":1644936028242,"_id":"YXmMmbYvrekHQar4"},{"number":8,"result":21,"createdDate":1623234317407,"_id":"b5M24lLggweXY24L"},{"number":10,"result":55,"createdDate":1581587938016,"_id":"itAGET6wHw6wcxfN"},{"number":11,"result":89,"createdDate":1645015996622,"_id":"jD3M4opGHCmS7yiM"},{"number":6,"result":8,"createdDate":1644935779049,"_id":"jFFWDD6ir6U2Z4pH"},{"number":12,"result":144,"createdDate":1644936046931,"_id":"jG2G6GoP9ZJRMNim"},{"number":5,"result":5,"createdDate":1644935775114,"_id":"xu1oairIRQbE19G1"}]

  const list = document.getElementById("list");

for (let i = 0; i < data.length; i  ) {
        let li = document.createElement("li");
        li.innerHTML = data[i].result;
        list.appendChild(li);
      }

<ul id="list">
</ul>

CodePudding user response：

Your calcResults is a string, not an object. Use data.results instead.

From the looks of it, your results are in the document shape: { results: Result[] }, so the data from the fetch contains a document that has a results member.

You already called json() to convert your object to an object, so the heavy lifting has been done.

for (let i = 0; i < data.results.length; i  ) {
  let li = document.createElement("li");
  li.innerHTML = data.results[i];
  list.appendChild(li);
}

As a side note, if you log data.results instead of stringifying it, your debug window will let you expand/collapse.

console.log(data.results);

CodePudding user response：

This happens because your using JSON.stringify instead of JSON.parse. So you are basically looping over a string and when you reference calcResults[i] you'll get the character at that index of the string.

You need to call JSON.parse(data.result) in order to convert the string to a JS object. Then you can loop over the objects of the JS Array.

If your local server uses a JSON body parser, however, you actually don't need to call JSON.parse the result.