Дайте 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 объекта в браузере он не отображается как массив, т. Е. Браузер не распознает длину рынка или синий или другие цвета.

I ' мы пытались перебрать этот объект с (вложенными) циклами 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";
    }
  }
}

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