Блог

Главная - Вопросы по программированию - Как добавить свойства к вложенному объекту в массиве в зависимости от условий

Как добавить свойства к вложенному объекту в массиве в зависимости от условий

#javascript #arrays #object #nested

#javascript #массивы #объект #вложенный

Вопрос:

Я снова застрял с добавлением свойств к глубоко вложенному массиву. Что у меня есть, так это:

 myArray = [
    {
      "id": "123",
      "station": {
        "id": 5,
        "name": "Teststation"
      },
      "values": [
        {
          "id": "way",
          "values": [ 339, 340, 341 ]
        },
        {
          "id": "time",
          "values": [ 1, 2, 3 ]
        },
        {
          "name": "element_1",
          "type": "line",
          "result": "nok"
        },
        {
          "name": "element_2",
          "type": "rect",
          "result": "nok"
        },
        {
          "name": "element_3",
          "type": "line",
          "result": "ok"
        }
      ]
    }
  ]

myArray может содержать больше объектов, которые будут иметь такую же структуру, как эта. Поэтому я должен их зацикливать. Чего я хочу добиться, так это:
Я хочу добавить свойства к объекту, которому принадлежит свойство, называемое «line» или «rect«, и новое свойство зависит от значения результата

Итак, новый результат должен выглядеть так:

 myArray = [
    {
      "id": "123",
      "station": {
        "id": 5,
        "name": "Teststation"
      },
      "values": [
        {
          "id": "way",
          "values": [ 339, 340, 341 ]
        },
        {
          "id": "time",
          "values": [ 1, 2, 3 ]
        },
        {
          "name": "element_1",
          "type": "line",
          "result": "nok"
          "line": { color: 'red' }
        },
        {
          "name": "element_2",
          "type": "rect",
          "result": "nok",
          "opacity": 0.2,
          "line": { color: 'gray', width: 0 },
          "fillcolor": 'green'
        },
        {
          "name": "element_3",
          "type": "line",
          "result": "ok"
          "line": { color: 'green' }
        }
      ]
    }
  ]

То, что я пробовал до сих пор, казалось, работало, пока я не понял: он возвращает массив с массивом с этим объектом. Я не понимаю, почему это так и как получить только массив с объектом. Кто-нибудь может мне помочь в этом?

   addColor(myArray) {
    return myArray.map(obj => {
      for (const prop in obj) {
        if (obj.hasOwnProperty(prop) amp;amp; Array.isArray(obj[prop])) {
          for (const item in obj[prop]) {
            if (obj[prop][item].hasOwnProperty('result') amp;amp; (obj[prop][item].type === 'line')) {
              obj[prop][item].result === 'nok' ? obj[prop][item].line = { color: 'red' } : obj[prop][item].line = { color: 'green' };
          } else if (obj[prop][item].hasOwnProperty('result') amp;amp; (obj[prop][item].type === 'rect')) {
              obj[prop][item].opacity = 0.2;
              obj[prop][item].line = { color: 'gray', width: 0 };
              obj[prop][item].result === 'nok' ? (obj[prop][item].fillcolor = 'red') : (obj[prop][item].fillcolor = 'green');
          }
          }
        }
    }
      console.log('myArray out', myArray);
      // It doesn't return anything so far so I added
      return myArray
      // But then I do get [[{}]]

  });
  }

Комментарии:

1. Я попробовал код, и я получаю массив. Есть ли многоточие в ответе консоли ( ... )? Если это так, попробуйте расширить его.

Ответ №1:

Добавление рабочего фрагмента с небольшим изменением в вашем коде:

 var myArray = [
      {
      "id": "123",
      "station": {
        "id": 5,
        "name": "Teststation"
      },
      "values": [
        {
          "id": "way",
          "values": [ 339, 340, 341 ]
        },
        {
          "id": "time",
          "values": [ 1, 2, 3 ]
        },
        {
          "name": "element_1",
          "type": "line",
          "result": "nok"
        },
        {
          "name": "element_2",
          "type": "rect",
          "result": "nok"
        },
        {
          "name": "element_3",
          "type": "line",
          "result": "ok"
        }
      ]
    }
  ];

function addColor(myArray) {
    const x =  myArray.map(obj => {

      for (const prop in obj) {
        if (obj.hasOwnProperty(prop) amp;amp; Array.isArray(obj[prop])) {
          for (const item in obj[prop]) {
            if (obj[prop][item].hasOwnProperty('result') amp;amp; (obj[prop][item].type === 'line')) {
              obj[prop][item].result === 'nok' ? obj[prop][item].line = { color: 'red' } : obj[prop][item].line = { color: 'green' };
          } else if (obj[prop][item].hasOwnProperty('result') amp;amp; (obj[prop][item].type === 'rect')) {
              obj[prop][item].opacity = 0.2;
              obj[prop][item].line = { color: 'gray', width: 0 };
              obj[prop][item].result === 'nok' ? (obj[prop][item].fillcolor = 'red') : (obj[prop][item].fillcolor = 'green');
          }
          }
        }
    }

    return obj; //<---- Check here
  });

  return x;
 }

 addColor(myArray);

Ответ №2:

 const myArray = [{
  "id": "123",
  "station": {
    "id": 5,
    "name": "Teststation"
  },
  "values": [{
      "id": "way",
      "values": [339, 340, 341]
    },
    {
      "id": "time",
      "values": [1, 2, 3]
    },
    {
      "name": "element_1",
      "type": "line",
      "result": "nok"
    },
    {
      "name": "element_2",
      "type": "rect",
      "result": "nok"
    },
    {
      "name": "element_3",
      "type": "line",
      "result": "ok"
    }
  ]
}]

const modifiedArray = myArray.map(item => {
  const newItem = Object.assign({}, item);
  if (newItem.values) {
    const newItemValues = newItem.values.map(value => {
      const additionalProps = {};

      if (value.type === 'line') {
        additionalProps.line = {
          color: (value.result === 'ok' amp;amp; 'green') || 'red'
        };
      }

      if (value.type === 'rect') {
        additionalProps.opacity = 0.2;
        additionalProps.line = {
          color: 'gray',
          width: 0
        };
        additionalProps.fillcolor = (value.result === 'ok' amp;amp; 'green') || 'red';
      }

      const newValue = Object.assign({}, value, additionalProps);
      return newValue;
    });
    newItem.values = newItemValues;
  }
  return newItem;
});

console.log('original:', myArray);
console.log('modified:', modifiedArray);