CODEWITHSUNDEEP
javascriptarraysjson
user10145145
user10145145

Reputation: 33

Push Object property values to an array

To convert the object into arrays based on the number of keys present inside the JSON object using JS.

the actual Object

  values: [
        {
          Label: "label1",
          Value: "10",
        },
        {
          Label: "label2",
          Value: "11",
        },
        {
          Label: "label3",
          Value: "12",
        },
      ],
    };

And I want the actual output to be something like this

label:['label1','label2','label3']
value:['10','11','12']

Using javascript or in react. Thanks in advance

Upvotes: 0

Views: 5418

Answers (6)

Most Noble Rabbit
Most Noble Rabbit

Reputation: 2776

You can reduce the objects in a single pass:

const values = [ { Label: "label1", Value: "10", }, { Label: "label2", Value: "11", }, { Label: "label3", Value: "12", } ];

let reduced =  values.reduce((total, curr) => {
    total.label.push(curr.Label)
    total.value.push(curr.Value)

    return total
}, {"label": [], "value": []})

console.log(reduced.label)
console.log(reduced.value)

Upvotes: 0

Nisala
Nisala

Reputation: 1338

The easiest and most intuitive way to do this is just using two for loops, like this, that automatically construct the object as they go. The benefit of this answer is that it works for an object with any number of different keys -- no key names are hard-coded, so it's completely adaptable.

const values = {
  values: [{
      Label: "label1",
      Value: "10",
    },
    {
      Label: "label2",
      Value: "11",
    },
    {
      Label: "label3",
      Value: "12",
    },
  ]
}

let ret = {};

// For each object,
for (let val of values.values) {
  // And each key in each object,
  for (let key in val) {
    // If the key is not in the return object, create an array there,
    if (!ret[key]) ret[key] = [];
    // and then push the value into the array.
    ret[key].push(val[key]);
  }
}

console.log(ret);

Upvotes: 0

Andy
Andy

Reputation: 63524

You can reduce over the array of objects, and use Object.values to extract the information.

const values = [{Label:"label1",Value:"10"},{Label:"label2",Value:"11"},{Label:"label3",Value:"12"}];

const out = values.reduce((acc, obj) => {

  // Object.values returns an array
  const [ label, value ] = Object.values(obj);

  // Push the data into the initial (accumulator) object
  acc.label.push(label);
  acc.value.push(value);

  // Return the accumulator for the next iteration
  return acc;

// The initial object that is returned with each iteration
}, { label: [], value: [] });

console.log(out);

Upvotes: 0

Sanee
Sanee

Reputation: 1

let obj = {
    values: [
        {
            Label: "label1",
            Value: "10",
        },
        {
            Label: "label2",
            Value: "11",
        },
        {
            Label: "label3",
            Value: "12",
        }
    ]
};

let output = {
    label: [],
    value: []
};

for (const [key, value] of Object.entries(obj.values)) {
    output.label.push(value.Label)
    output.value.push(value.Value)
}

console.log("output::", output)

Upvotes: 0

Vikram Aditya
Vikram Aditya

Reputation: 127

You can use forEach like following

 let  values = [
        {
          Label: "label1",
          Value: "10",
        },
        {
          Label: "label2",
          Value: "11",
        },
        {
          Label: "label3",
          Value: "06",
        },
         {
          Label: "label4",
          Value: "25",
        }
      ]
      let valueArray =[]
      let labels =[]
      values.forEach((value)=>{
      valueArray.push(value.Value)
      labels.push(value.Label) 
      })
       
     let finalObject = {label:labels,value:valueArray}
console.log(valueArray)
console.log(labels)
console.log(finalObject)

Upvotes: 0

Yash Maheshwari
Yash Maheshwari

Reputation: 2412

You can use map function of the array and return Label and Values from the input array.

let  values = [
        {
          Label: "label1",
          Value: "10",
        },
        {
          Label: "label2",
          Value: "11",
        },
        {
          Label: "label3",
          Value: "12",
        },
      ]

let value = values.map(v => v.Value)
let label = values.map(v => v.Label)

console.log(value)
console.log(label)

Upvotes: 2

Related Questions