Заменить и удалить текст в массиве объектов Vue JS

У меня есть массив объектов, которые я извлекаю через запрос Axios под названием «уникальные цвета». Это выглядит так:

     mycolors 
      color: [GREEN, RED, BLUE, YELLOW, ORANGE,ORANGE,GREEN,]
      color: [GREEN, RED, BLUE, YELLOW, ORANGE,ORANGE,GREEN,]
      color: [GREEN, RED, BLUE ]
      color: [YELLOW, ORANGE]
      color: [GREEN, GREEN,GREEN,RED]
      color: [ORANGE,GREEN,ORANGE,GREEN,RED]`

Я хотел бы удалить все цвета, кроме «КРАСНЫЙ» и «ЗЕЛЕНЫЙ» для каждого объекта
Я хотел бы заменить «КРАСНЫЙ» на «Багровый».

Я хотел бы заменить «ЗЕЛЕНЫЙ» на «Шалфей».

`methods:
....

    const uniquecolorscationwithduplicates = uniquecolors
     .toString()
     .replace("RED", "Crimson")
     .replace("GREEN", "Sage")  
     .replace("YELLOW,", "")
     .split("|");``

Это на самом деле сохраняет все цвета, но добавляет малиновый и шалфейный. Таким образом, он отображает «ЗЕЛЕНЫЙ, Шалфей, КРАСНЫЙ, Малиновый, СИНИЙ, ЖЕЛТЫЙ, ОРАНЖЕВЫЙ» вместо замены.

С чего бы это?

Чтобы удалить, я заменял пустой строкой. Я знаю, что это плохой способ кодирования, но я не уверен, как еще это сделать.

В идеале я хотел бы изменить все экземпляры цветов при отображении страницы, поэтому любые указатели будут полезны.

заранее спасибо

Здравствуйте, пожалуйста, опишите ответ axios как json или что-то в этом роде, ответ, который вы описали, неоднозначен.

— 15.11.2022 09:46

javascript vue.js

15.11.2022 09:28

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Вы можете просто добиться этого, используя методы JavaScript Array.map() , Array.filter() , Array.join() и String.replaceAll().

Живая демонстрация:

const arr = [{
  color: ['GREEN', 'RED', 'BLUE', 'YELLOW', 'ORANGE', 'ORANGE', 'GREEN']
},{
  color: ['GREEN', 'RED', 'BLUE', 'YELLOW', 'ORANGE', 'ORANGE', 'GREEN']
},{
  color: ['GREEN', 'RED', 'BLUE']
},{
  color: ['YELLOW', 'ORANGE']
},{
  color: ['GREEN', 'GREEN', 'GREEN', 'RED']
},{
  color: ['ORANGE', 'GREEN', 'ORANGE', 'GREEN', 'RED']
}];

const res = arr.map(({ color }) => {
  const filteredColor = color.filter(c => c === 'GREEN' || c === 'RED');
  const obj = {
    color: filteredColor.join().replaceAll('RED', 'Crimson').replaceAll('GREEN', 'Sage').split(',')
  };
  return obj;
});

console.info(res);

15.11.2022 14:31

попробуйте этот код, вы можете использовать карту и фильтр.

const mycolors = [
    {color: ['GREEN', 'RED', 'BLUE', 'YELLOW', 'ORANGE', 'ORANGE', 'GREEN']},
    {color: ['GREEN', 'RED', 'BLUE', 'YELLOW', 'ORANGE', 'ORANGE', 'GREEN']},
    {color: ['GREEN', 'RED', 'BLUE']},
    {color: ['YELLOW', 'ORANGE']},
    {color: ['GREEN', 'GREEN', 'GREEN', 'RED']},
    {color: ['ORANGE', 'GREEN', 'ORANGE', 'GREEN', 'RED']}
];

const colored = mycolors.map(({color}) => {
    let filtered = color.filter(col => col === 'RED' || col === 'GREEN')
        .map(el => {
            return el === 'RED' ? 'Crimson' : 'Sage';
        });
    return {color: filtered};
});

console.info(colored)

15.11.2022 16:06

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

Как изменить реквизиты в дочернем компоненте, созданном с помощью v-for в VueJs 3

Как вы можете установить глобальное правило проверки с помощью FormKit

Нижний колонтитул не прилипает к нижней части бутстрапа 5.2.2

Как добавить данные в предопределенный объект, если данных нет?

Компонент Flip Card в VueJs 3

Как вызвать событие колеса на мобильном телефоне

Связывание v-модели в vue multiselect и создание на ее основе объекта в списке

Что мне делать, чтобы ускорить мой проект vue.js?

Использовать переменную env в компонентах VueJS SPA во время выполнения?

Как создать молочный оверлей в vue js

Заменить и удалить текст в массиве объектов Vue JS

Ответы 2

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

Похожие вопросы