Updating and eliminating text within an array of objects using Vue JS

Question

Updating and eliminating text within an array of objects using Vue JS

My Axios request pulls in an array of objects named 'uniquecolors'. Here is what it looks like:

     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]`

I want to retain only the colors 'RED' and 'GREEN' for each object
I intend to substitute 'RED' with 'Crimson'

I aim to swap 'GREEN' with 'Sage'

`methods:
....

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

The current result retains all original colors and appends 'Crimson' and 'Sage'. Thus it now displays 'GREEN,Sage,RED,Crimson,BLUE, YELLOW, ORANGE' without replacement.

What could be causing this?

In attempting to remove colors, I resorted to replacing them with blank strings. I realize this may not be ideal coding practice; any advice on better approaches would be appreciated.

Ultimately, I hope to alter all occurrences of colors during page rendering. Any guidance on how to achieve this would be welcomed.

Thank you in advance

javascript vue.js

Answer 1

Answer №1

Give this code a try utilizing the map and filter functions.

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.log(colored)

Answer 2

Give this code a try utilizing the map and filter functions.

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.log(colored)

Answer 3

Answer №2

To accomplish this task, you can make use of JavaScript's Array.map(), Array.filter(), Array.join(), and String.replaceAll() methods.

See the code snippet below for a live demonstration:

const data = [{
  fruits: ['APPLE', 'BANANA', 'ORANGE', 'PINEAPPLE']
},{
  fruits: ['GRAPE', 'KIWI', 'PEACH']
},{
  fruits: ['STRAWBERRY', 'BLUEBERRY', 'RASPBERRY']
}];

const result = data.map(({ fruits }) => {
  const filteredFruits = fruits.filter(fruit => fruit === 'APPLE' || fruit === 'BANANA');
  const newObj = {
    fruits: filteredFruits.join().replaceAll('APPLE', 'Red Apple').replaceAll('BANANA', 'Yellow Banana').split(',')
  };
  return newObj;
});

console.log(result);

Answer 4

To accomplish this task, you can make use of JavaScript's Array.map(), Array.filter(), Array.join(), and String.replaceAll() methods.

See the code snippet below for a live demonstration:

const data = [{
  fruits: ['APPLE', 'BANANA', 'ORANGE', 'PINEAPPLE']
},{
  fruits: ['GRAPE', 'KIWI', 'PEACH']
},{
  fruits: ['STRAWBERRY', 'BLUEBERRY', 'RASPBERRY']
}];

const result = data.map(({ fruits }) => {
  const filteredFruits = fruits.filter(fruit => fruit === 'APPLE' || fruit === 'BANANA');
  const newObj = {
    fruits: filteredFruits.join().replaceAll('APPLE', 'Red Apple').replaceAll('BANANA', 'Yellow Banana').split(',')
  };
  return newObj;
});

console.log(result);

Updating and eliminating text within an array of objects using Vue JS

Answer №1

Answer №2

Similar questions

Empty initial value for first item in array using React hooks

Complete Search with the press of Enter on the Auto Textbox

Innovative solution for detecting and replacing undefined object properties in Angular 2 with TypeScript

Jasmine spies falsely report the calling of functions when they have not actually been called

Grab the source attribute of the <img> tag (identified by class) across numerous HTML pages

Using Leaflet to make geojson XMLHttpRequests

Is there a way in React JS to attempt a function multiple times using try/catch?

JQuery is failing to parse JSON data

Exclude basic authentication for a specific route

How to activate select only when specific options are chosen using jQuery

What is the best way to fix multiple dropdown menus opening simultaneously in Vue.js?

Reversing the sequence of code in JavaScript - react native

What is the reason behind the content of a div tag not hiding while the content of a p tag does

load a particular section of another website into my own div

Secure your website against XSS attacks with DOMPurify

Navigating through two nested arrays in JavaScript to access an object

Placing a div tag directly beneath another div tag

Launching a React project using the terminal - my step-by-step process

Is there a way to modify the package version with yarn, either upgrading or downgrading?

jQuery breaks when working with ASP.NET forms