I had a tough day today trying to figure out my code. My English isn't the best, so explaining my issue is hard. I decided to illustrate my problem in HTML and specify the kind of styling I need to achieve with JS. I also included an example using the things.json file along with some JS code.
<!-- What I'm getting: -->
<h2>Table</h2>
<ul>
<li>brown, black, white</li>
</ul>
<!-- What I need to get: -->
<h2>Table</h2>
<ul>
<li>brown</li>
<li>black</li>
<li>white</li>
</ul>
Here's an example of the things.json file:
[
{
"thing": "table",
"color": [
"brown",
"black",
"white"
]
}
{
"thing": "chair",
"color": [
"yellow",
"black",
"blue"
]
}
{
"thing": "bed",
"color": [
"red",
"blue",
"green"
]
}
]
Lastly, here's an example of my function:
const ENDPOINT = 'things.json'
async function getThing(url) {
const resp = await fetch(url)
const data = await resp.json()
data.forEach(appendToHtml) return data
}
getThing(ENDPOINT).then((value) => { console.log('getThings', value) })
function appendToHtml(data) {
const divEl = document.createElement('div')
const h2El = document.createElement('h2')
const liEl = document.createElement('li')
h2El.textContent = data.thing
liEl.textContent = data.color
outputEl.append(divEl)
divEl.append(h2El)
divEl.append(liEl)
return divEl
}