[FIXED] How to pull all data from API JSON

Issue

I have below code. I only pulls 1 row since I typed [1] in array. But, there are like 20 rows in that JSON API.

How can I use forEach loop in this code to get all rows? I greatly appreciate any help.

function getTodos() {
    axios
        .get('https://api.fiscaldata.treasury.gov/services/api/fiscal_service/v1/accounting/od/rates_of_exchange?fields=country_currency_desc,exchange_rate,record_date&filter=country_currency_desc:in:(Canada-Dollar),record_date:gte:2020-01-20', {
            country_currency_desc: 'Currency',
            exchange_rate: 'last price',
            record_date: 'date',
        })
        .then((res) => showOutput(res))
        .catch((err) => console.log(err))
}

function showOutput(res) {
    document.getElementById('row').innerHTML = `
        <th>
            ${JSON.stringify(res.data.data[1].record_date)}
        </th> 
        <th>
            ${JSON.stringify(res.data.data[1].country_currency_desc)}
        </th> 
        <th>
            ${JSON.stringify(res.data.data[1].exchange_rate)}
        </th> 
    `
}

Here is the image of how app looks

Solution

You should create the row elements for each todo, then create child elements for each child of the todo. To give you an idea:

function appendElement(parentId, tag = 'div', newId, content) {
  // create a new div element
  const newEl = document.createElement(tag);
  if (newId) newEl.id = newId

  // and give it some content
  if (content) {
    const newContent = document.createTextNode(content);
    // add the text node to the newly created div
    newEl.appendChild(newContent);
  }

  // add the newly created element and its content into the DOM
  if (parentId) {
    const par = document.getElementById(parentId);
    par.appendChild(newEl);
  }

  return newEl;
}

const todos = [{
    id: 0,
    label: "todo0",
    children: [
      "2022-06-30",
      "Canada dollar",
      "1.292"
    ]
  },
  {
    id: 1,
    label: "todo1",
    children: [
      "2022-07-02",
      "US dollar",
      "1.25"
    ]
  },
  {
    id: 2,
    label: "todo2",
    children: [
      "2022-07-04",
      "KZT",
      "1.3"
    ]
  },
]

function init() {
  todos.forEach((todo, todoIdx) => {
    appendElement('table', 'tr', 'row-' + todoIdx);
    appendElement('row-' + todoIdx, 'td', undefined, todo.label)
    todo.children.forEach((child, childIdx) => {
      appendElement('row-' + todoIdx, 'td', undefined, child)
    })
  })
}

window.onload=init

table, th, td {
  border: 1px solid;
}

<table id="table">
  <tr>
    <th>Label</th>
    <th>Date</th>
    <th>Currency</th>
    <th>Exchange rate</th>
  </tr>
</table>

If instead of arrays of strings for children you have arrays of objects, instead of the nested forEach loop you can just manually appendElement() every cell of the row

Answered By - Seangle

Answer Checked By - David Goodson (PHPFixing Volunteer)