Javascript 如何更改数组中具有相同值的项目的背景色？

这里我在表中显示字符 js

---

最简单的解决方案是为数据添加背景色，并在地图功能中使用它

function Init()
{
    debugger;
    //start page
    const text = potterCharacters.map(character => {
        const { name, actor, image, houseBgColor } = character
        return `<tr class="row" style="background-color: ${houseBgColor}">
            <td class="column">${name}</td>
            <td class="column">${actor}</td>
            <td class="column"><img src="${image}"/></td>
        </tr>`
    })
    document.getElementById("rows").innerHTML = text ;
}

然后，您可以在map函数中使用它，如下所示（其中house是对象中与您的数据匹配的键）：

谢谢，这是可行的，但是数据文件非常大，这需要花费很多时间来添加，是否无法将其放入一个函数中，该函数可能会在数组上循环，并获取所有名为“格兰芬多”的房屋？@OfficialRules然后您可以使用我的第二个建议。你需要把房子映射到那个物体的颜色哦，我没看到那部分会尝试，我现在很乐意帮忙

let potterCharacters = [
{
  name: "Harry Potter",
  species: "human",
  gender: "male",
  house: "Gryffindor",
  dateOfBirth: "31-07-1980",
  yearOfBirth: 1980,
  ancestry: "half-blood",
  eyeColour: "green",
  hairColour: "black",
  patronus: "stag",
  hogwartsStudent: true,
  hogwartsStaff: false,
  actor: "Daniel Radcliffe",
  alive: true,
  image: "http://hp-api.herokuapp.com/images/harry.jpg"
},

function Init()
{
    debugger;
    //start page
    const text = potterCharacters.map(character => {
        const { name, actor, image, houseBgColor } = character
        return `<tr class="row" style="background-color: ${houseBgColor}">
            <td class="column">${name}</td>
            <td class="column">${actor}</td>
            <td class="column"><img src="${image}"/></td>
        </tr>`
    })
    document.getElementById("rows").innerHTML = text ;
}

const colors = {house1: "orange", house2: "blue", house3: "gray"}

<tr class="row" style="background-color: ${colors[house]}">