The problem is in the title. Context: I have an API that I access with Fetch.
fetch(apiUrl)
.then( (data) => {
if(data.ok){
return data.json()
}
throw new Error('Response not ok.');
})
.then( player => generateHtml(player))
.catch( error => console.error('Error:', error))
But I want to display the content of the API in the HTML file. I solved it like this.
const generateHtml = (data) => {
console.log(data)
const html = `
<h2 class="" >${data.profiles.028304b866cc47d18c08e902edfcb4c6.data.display_name}</h2>
<div class="name">${data.profiles.028304b866cc47d18c08e902edfcb4c6.cute_name}</div>
<div class="armor">${data.profiles.028304b866cc47d18c08e902edfcb4c6.items.armor_set}</div>
<div>Rarity: ${data.profiles.028304b866cc47d18c08e902edfcb4c6.items.armor_set_rarity}</div>
`
const playerprofilebox = document.querySelector('#object')
playerprofilebox.innerHTML = html
But as you can see, the element after profiles starts with a number but I can't remove the number because then the API would no longer access the correct data. Any suggestions?
Because it starts with a number, you need to access it with bracket notation:
var obj = {
'0123abc': 10,
'4567def': 20
};
console.log(obj['0123abc']); // 10
console.log(obj.0123abc); //SyntaxError
``