PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Wednesday, October 12, 2022

[FIXED] How to pull all data from API JSON

 October 12, 2022     api, arrays, axios, foreach, javascript     No comments   

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)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing