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

У меня есть вкладка const, где я хочу изменить свойство isActive с логического на «включено» или «выключено» в зависимости от того, истинно оно или ложно.

   const tab = [
   {id:'0',original:{lineId:'4', isActive:false, length: '3'}},
   {id:'1',original:{lineId:'5', isActive:true, length: '4'}},
   {id:'2',original:{lineId:'6', isActive:false, length: '7'}}
  ];

Я пытался использовать .map(), но что-то делаю не так. Не могли бы вы подсказать, где проблема?

const newTab = tab.map(x => x.original.isActive === false ? 'off' : x.original.isActive === true ? 'on' : x);

Вот как должен выглядеть newTab после изменения:

  const newTab = 
[
    {id:'0',original:{lineId:'4', isActive:'off', length: '3'}},
      {id:'1',original:{lineId:'5', isActive:'on', length: '4'}},
      {id:'2',original:{lineId:'6', isActive:'off', length: '7'}}
     ];

С текущим кодом он возвращает только измененное свойство isActive:

const newTab = ["off", "on", "off"]

Спасибо !

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
34
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

вы можете использовать сопоставление и вернуть JSON, скопировав значения.

const tab = [
    { id: '0', original: { lineId: '4', isActive: false, length: '3' } },
    { id: '1', original: { lineId: '5', isActive: true, length: '4' } },
    { id: '2', original: { lineId: '6', isActive: false, length: '7' } }
];

const tab2 = tab.map(e => {
        return {
            id: e.id,
            original: {
                lineId: e.original.lineId,
                isActive: e.original.isActive ? 'on' : 'off',
                length: e.original.length
            }
        }
    });

Выход : Вывод изображения

Ответ принят как подходящий

Вы хотите вернуть весь объект, а не только on или off внутри вашей карты. Вы можете сжать это, используя ... (оператор расширения) и изменить только isActive, возвращая все остальное как есть:

const tab = [{
    id: '0',
    original: {
      lineId: '4',
      isActive: false,
      length: '3'
    }
  },
  {
    id: '1',
    original: {
      lineId: '5',
      isActive: true,
      length: '4'
    }
  },
  {
    id: '2',
    original: {
      lineId: '6',
      isActive: false,
      length: '7'
    }
  }
];

const newTab = tab.map(item => ({
  ...item,
  original: {
    ...item.original,
    isActive: item.original.isActive ? 'on' : 'off',
  }
}));

console.info(newTab)

Вы можете использовать синтаксис распространения и обновлять переменные в методе карты.

tab.map((e) => (
    {
        ...e,
        original: {
            ...e.original,
            isActive: e.original.isActive ? 'on' : 'off'
        }
    }
))

Не размещайте код только ответы. Пожалуйста, попробуйте сообщить OP, где они ошибаются и как ваш код исправляет это.

Tushar Shahi 23.03.2022 18:16

спасибо @TusharShahi, я обновляю.

Yusuf İlker Oğuz 24.03.2022 00:08

Другие вопросы по теме