CODEWITHSUNDEEP
javascriptarraysobject
Acdn
Acdn

Reputation: 638

Push object value into array as separate items

I would like to add all the pink values of the objects below to the pink array as items.

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: ""
}
];

What i have so far:

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

The problem I have is that at the moment it's not pushing all the pink values in one pink array but it individually creates a pink array and adds one to each.

Upvotes: 0

Views: 524

Answers (5)

Wysiati
Wysiati

Reputation: 139

Try this.

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

Upvotes: 0

Menelaos
Menelaos

Reputation: 26609

Basic

You can do this using the filter method, which will automatically create an array with the values you want.

let pinkArray = ;
console.log(pinkArray);

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

Specific Values/Columns

You could also create an array with only specific fields in the objects:

 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/

And even more functional ( new objects)

 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/

Upvotes: 2

Rajeev
Rajeev

Reputation: 359

You can use like this

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)

Upvotes: 0

Nick Parsons
Nick Parsons

Reputation: 50974

You've almost got it. Simply put the const pink = []; outside your for loop like so (I've also changed the push to be the object rather than just the color)

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

Here is a working example:

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)

This will make it so that it doesn't create a pink array at every iteration of your for loop

Upvotes: 0

Koushik Chatterjee
Koushik Chatterjee

Reputation: 4175

You can simply create a call back passing the main array and colour, and simply filter the main array with the given colour.

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);

Upvotes: 0

Related Questions