I tried mapping through the arrays with an API call responseTwo.data.searched_items which gives me a console.log of an object of arrays but my map in HTML doesn't do anything.
var responseTwo = []
axios.request(optionsTwo).then(function (response) {
responseTwo = response
}).catch(function (error) {
console.error(error);
});
My HTML
{
responseTwo.data.searched_items.map((item, index) => {
return (
<tr key={index}>
<td>
<div class="flex items-center space-x-3">
<div>
<p class="font-bold">{item.title}</p>
</div>
</div>
</td>
<td>
<span class="badge badge-ghost badge-sm">{item.condition}</span>
</td>
<td>
<p>${item.price.value}</p>
</td>
<td>
<p>$140</p>
</td>
<td>
<p className='text-accent'>$40</p>
</td>
<th>
<a href={item.url} target="_blank" class="btn btn-primary">Link</a>
</th>
</tr>
)
})
}
const [responseTwo, setResponseTwo] = useState([])
axios.request(optionsTwo).then(function (response) {
setResponseTwo(response)
}).catch(function (error) {
console.error(error);
});
{responseTwo.data.searched_items.length > 0 && responseTwo.data.searched_items.map((item, index) => {
return (
<tr key={index}>
<td>
<div class="flex items-center space-x-3">
<div>
<p class="font-bold">{item.title}</p>
</div>
</div>
</td>
<td>
<span class="badge badge-ghost badge-sm">{item.condition}</span>
</td>
<td>
<p>${item.price.value}</p>
</td>
<td>
<p>$140</p>
</td>
<td>
<p className='text-accent'>$40</p>
</td>
<th>
<a href={item.url} target="_blank" class="btn btn-primary">Link</a>
</th>
</tr>
)
})
}
this is tested for me
import {useState} from "react";
function App() {
const [responseTwo, setResponseTwo] = useState([])
setTimeout(() => {
setResponseTwo([{name: 'Narek', title: 'Armenia'}, {name: 'Ani', title: 'French'}, {name: 'Gridoryan', title: 'USA'}])
}, 5000)
return (
<div>
{
responseTwo.length > 0 && responseTwo.map((item, index) => {
return (
<tr key={index}>
<td>
<div className="flex items-center space-x-3">
<div>
<p className="font-bold">{item.name}</p>
</div>
</div>
</td>
<td>
<span className="badge badge-ghost badge-sm">{item.title}</span>
</td>
<td>
{/*<p>${item.price.value}</p>*/}
</td>
<td>
<p>$140</p>
</td>
<td>
<p className='text-accent'>$40</p>
</td>
<th>
{/*<a href={item.url} target="_blank" className="btn btn-primary">Link</a>*/}
</th>
</tr>
)
})
}
</div>
)
}
export default App;
Map provides three methods that return iterable: map.keys(), map.values() and map.entries(). Try on of them with for..in loop.