javascript - 动态地将 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循环迭代这个对象，但它没有返回任何东西。是否甚至可以迭代所述对象，或者我是否坚持为每个键/值对编写 16 个 if 语句？

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

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";
    }
  }
}

标签： javascriptarraysjsonfor-loopif-statement

Answer 1

markets是一个对象，因此markets.length 将返回未定义。为了遍历我们拥有的对象键和值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; }