How to apply styles from a JSON file using for loop?-CodePudding

I'll cut to the chase, I'm still a beginner with javascript and I'm having trouble correlating some data from a JSON file to specific HTML elements using a "for loop", so I can apply styles to them.

Here is my HTML:

<button onclick="yearMap(2004)">See songs</button>
<div >
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>      
</div>

My javascript is as follows:

  async function yearMap(year) {
    const api_url = 'https://opensheet.elk.sh/1oxsWP57qoaxOZFUpPmwQ-Dkagv0o87qurp92_-VKITQ/year'   year;
    const response = await fetch(api_url);
    const data = await response.json();

    for (let i = 0; i < 52; i  ) {
      const { no1genre } = data[i];
      document.querySelector('.yearmap-1 li:nth-child('   i   ')').style.backgroundColor = no1genre;
      console.log(i)
      console.log(no1genre)
    }
  }

When you click the button, each <li> element is supposed to be styled(bg-color) chronologically per each instance from a data column(of hex-codes) in a JSON file. There are several lines of data and HTML elements so I thought that using a for loop with an :nth-child selector would be the best way to do this, but I keep getting the following error: Uncaught (in promise) TypeError: Cannot read properties of null (reading 'style') at yearMap

When I replace the "i" inside the nth-child selector with a number, it alters the style of the referenced <li> element just fine (with the last instance of no1genre from the JSON file).

Furthermore, the console.log(i) and console.log(no1genre) prove that each number from the loop and hex code from the JSON file can be referenced together, but I'm just not able to apply them to each <li> element. I suspect that :nth-child is not the way to go with this, but I'm not sure what else to try?

Thanks in advance for any help!

CodePudding user response：

I think for your case, the best approach is to create new <li> elements in the for-loop and append them to the correct position, instead of having a fixed number of <li> elements and changing their properties.

You might want to look at createElement and appendChild.

CodePudding user response：

You can use the eq(); function to specify the index of each li in your parent class yearmap-1 and then you can appy

CodePudding user response：

Instead of using nth-child which may or may not actually match an element, I would iterate the list of elements and assign values accordingly

document.querySelectorAll(".yearmap-1 li").forEach((li, i) => {
  li.style.backgroundColor = data[i]?.no1genre ?? ""; // or suitable fallback
});

CodePudding user response：

working code

Html:

<button onclick="yearMap(2004)">See songs</button>
<div ></div>

Javascript:

async function yearMap(year) {
const api_url =
    'https://opensheet.elk.sh/1oxsWP57qoaxOZFUpPmwQ-Dkagv0o87qurp92_-VKITQ/year'  
    year;
  const response = await fetch(api_url);
  const data = await response.json();

  for (let i = 0; i < 52; i  ) {
    const { no1genre } = data[i];
    console.log(no1genre)
    const li = document.createElement("li");
    li.style.backgroundColor = no1genre;
    document.getElementsByClassName('yearmap-1')[0].appendChild(li);
  }
}

CodePudding user response：

The problem with your selector statement is that you are trying to get the element with an CSS selector which is not possible in Javascript. You should be using : document.querySelectorAll('.yearmap-1 li')[i].style.backgroundColor = no1genre;

inside your for loop. document.querySelectorAll('.yearmap-1 li') will give you all li items as an array and then you can iterate over them to get your desired li element.