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)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.