将css动态地赋给数组中的元素

Question

我得到了以下对象：

{
"market": {
"blue": {
"walls": {
"north": false,
"east": false,
"south": true,
"west": true
}
},
"green": {
"walls": {
"north": true,
"east": true,
"south": false,
"west": false
}
},
"orange": {
"walls": {
"north": true,
"east": false,
"south": true,
"west": true
}
},
"yellow": {
"walls": {
"north": false,
"east": true,
"south": true,
"west": false
}
}
}
}

我想在市场上迭代，然后在蓝色、绿色、橙色和黄色上迭代。在这些颜色里，我想在墙上重复。如果某个键的值为true，我想在浏览器中应用一些CSS。然而，当在浏览器中记录此JSON对象时，它不会显示为数组，即浏览器无法识别市场长度、蓝色或其他颜色。

我尝试过用(嵌套的(for循环来迭代这个对象，但它没有返回任何内容。是否有可能对所述对象进行迭代，或者我是否坚持为每个键/值对编写16if语句？

这就是我迭代对象的方式：

const response = {
"market": {
"blue": {
"walls": {
"north": false,
"east": false,
"south": true,
"west": true
}
},
"green": {
"walls": {
"north": true,
"east": true,
"south": false,
"west": false
}
},
"orange": {
"walls": {
"north": true,
"east": false,
"south": true,
"west": true
}
},
"yellow": {
"walls": {
"north": false,
"east": true,
"south": true,
"west": false
}
}
}
};
for (let i = 0; i < response.market.length; i++) {
for (let j = 0; j < response.market[i].walls.length; j++) {
if (response.market[i].walls[0] === true) {
response.market[i].walls[0].style.borderTop = "3px solid black";
} else if (response.market[i].walls[1] === true) {
response.market[i].walls[1].style.borderRight = "3px solid black";
} else if (response.market[i].walls[2] === true) {
response.market[i].walls[2].style.borderBottom = "3px solid black";
} else if (response.market[i].walls[3] === true) {
response.market[i].walls[3].style.borderLeft = "3px solid black";
}
}
}

Answer 1

markets是一个对象，因此markets.length将返回undefined。为了遍历对象键和值，我们有Object.keys(obj)和Object.values(obj)。

Object.keys(response.market).forEach(paint =>{
//iterating through "blue","green","orange","yellow"
Object.keys(response.market[paint]["walls"]).forEach(wall =>{
//iterating through north,east,south,west
if(response.market[paint]["walls"][wall]==true){
switch(wall){
case "north": response.market[paint]["walls"]["borderTop"]="3px solid black";break;
case "east":  response.market[paint]["walls"]["borderRight"]="3px solid black";break;
case "south": response.market[paint]["walls"]["borderBottom"]="3px solid black";break;
case "west":  response.market[paint]["walls"]["borderLeft"]="3px solid black";break;
}
}
})
});

let response = {"market": {"blue": {"walls": {"north": false,"east": false,"south": true,"west": true}},"green": {"walls": { "north": true, "east": true,"south": false,"west": false}},"orange": {"walls": { "north": true,"east": false, "south": true,"west": true}},"yellow": {"walls": {"north": false, "east": true, "south": true,"west": false}}}};
Object.keys(response.market).forEach(paint => {
Object.keys(response.market[paint]["walls"]).forEach(wall => {
if (response.market[paint]["walls"][wall] == true) {
switch (wall) {
case "north":response.market[paint]["walls"]["borderTop"] = "3px solid black";break;
case "east":response.market[paint]["walls"]["borderRight"] = "3px solid black";break;
case "south":response.market[paint]["walls"]["borderBottom"] = "3px solid black";break;
case "west":response.market[paint]["walls"]["borderLeft"] = "3px solid black"; break;
}
}
})
});
console.log(response.market);

.as-console-wrapper { max-height: 100% !important; top: 0; }