Вставить значение объекта в массив как отдельные элементы

Question

Я хотел бы добавить все розовые значения объектов ниже в розовый массив как элементы.

const mainObj = [
{
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "green",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "green",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "blue",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "blue",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "green",
    text: "text",
    link: ""
}
];

Что у меня есть:

for(let i = 0; i < mainObj.length; i++) {
    if(mainObj[i].colour == "pink") {
        const pink = [];
        pink.push(mainObj[i].colour);   
    }
}

Проблема Iесть то, что в данный момент он не помещает все розовые значения в один розовый массив, но по отдельности создает розовый массив и добавляет по одному к каждому.

Answer 1

Попробуйте это.

mainObj.filter(item => item.colour=='pink').map(i =>i.colour))

Answer 2

Вы можете использовать как это

const mainObj = [
{
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "green",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "green",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "blue",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "blue",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "green",
    text: "text",
    link: ""
}
];

let pink = mainObj.filter(item => {
if (item.colour === 'pink') {
	return item.colour;
  }
}).map(item => item.colour);

console.log(pink)

Answer 3

Basic

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

let pinkArray = ;
console.log(pinkArray);

https://jsfiddle.net/1pjh56a3/2/

ОпределенныйЗначения / столбцы

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

 let pinkArray = mainObj.filter( e =>  e.colour == 'pink');
console.log(pinkArray);

var pinkArrayCopy = [];
for(i in pinkArray){
        let item = pinkArray[i];
    pinkArrayCopy.push({"colour": item.colour, "text": item.text});
 }

console.log(pinkArrayCopy);

https://jsfiddle.net/1pjh56a3/6/

И даже более функционально (новые объекты)

 let pinkArray = mainObj.filter( e =>  e.colour == 'pink').map( 
 j =>  {
                    return {"a": j.colour, "b": j.text}; 
            }
 );

console.log(pinkArray);

https://jsfiddle.net/1pjh56a3/16/

Answer 4

Вы можете просто создать обратный вызов, передав основной массив и цвет, и просто отфильтровать основной массив с заданным цветом.

const mainArr = [{
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
  },
  {
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
  },
  {
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
  },
  {
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
  },
  {
    image: 'test_icon.jpg',
    colour: "green",
    text: "text",
    link: ""
  },
  {
    image: 'test_icon.jpg',
    colour: "green",
    text: "text",
    link: ""
  }
],
filterByColor = (arr, colour) =>arr.filter(a=>a.colour===colour);

var pink = filterByColor(mainArr, 'pink'),
    green = filterByColor(mainArr, 'green');

console.log('Pink: ', pink);
console.log('Green: ', green);

Answer 5

Вы почти получили это.Просто поместите const pink = []; вне вашего цикла for следующим образом (я также изменил push как объект, а не просто цвет)

let pink = [];
for(let i = 0; i < mainObj.length; i++) {
    if(mainObj[i].colour == "pink") {
        pink.push(mainObj[i]);   
    }
}

Вот рабочий пример:

const mainObj = [
{
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "pink",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "green",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "green",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "blue",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "blue",
    text: "text",
    link: ""
},
{
    image: 'test_icon.jpg',
    colour: "green",
    text: "text",
    link: ""
}
];

let pink = [];
for(let i = 0; i < mainObj.length; i++) {
    if(mainObj[i].colour == "pink") {
        pink.push(mainObj[i]);   
    }
}

console.log(pink)

Это позволит избежать создания массива pink на каждой итерации цикла for