Create arrays from a multidimensional array by each index object value

Question

Here is an example of my main array:

[
  {
    'data': [{'value': 'Red'}, {'value': 'Small'}, {'value': 'Good'}]
  },
  {
    'data': [{'value': 'Black'}, {'value': 'Medium'}, {'value': 'Bad'}]
  },
  {
    'data': [{'value': 'White'}, {'value': 'Large'}, {'value': 'Best'}]
  }
]

And I want as output:

[
  ['Red', 'Black', 'White'],    // all values from first index of data array
  ['Small', 'Medium', 'Large'], // all values from second index of data array
  ['Good', 'Bad', 'Best']       // all values from third index of data array
]

I have tried with forEach , for...in, filter etc. But I did not success to get the previous output.

Hi!! Please read through the help center, in particular How do I ask a good question? Your best bet here is to do your research, search for related topics on SO, and give it a go. If you get stuck and can't get unstuck after doing more research and searching, post a minimal reproducible example of your attempt and say specifically where you're stuck. People will be glad to help. — T.J. Crowder
– T.J. Crowder, Commented Dec 23, 2018 at 18:33
@T.J.Crowder thank you for comment. next time i will share my code. already I get my answer. so next time of course i will share my code. — Imran
– Imran, Commented Dec 23, 2018 at 18:40

Mark · Accepted Answer · 2018-12-23 18:37:51Z

5

You can use reduce() and then within the reduce loop use forEach(). In the forEach loop use the index to determine which array to push. It there's no value yet at that index, make a new array and push into that:

let data = [{'data': [{'value': 'Red'},{'value': 'Small'},{'value': 'Good'}]},{'data': [{'value': 'Black'},{'value': 'Medium'},{'value': 'Bad'}]},{'data': [{'value': 'White'},{'value': 'Large'},{'value': 'Best'}]}]

let arr = data.reduce((arr, item) => {            // look at each item in the data array
  item.data.forEach(({value}, index) => {         // look at each item in the item.data array
    (arr[index] || (arr[index] = [])).push(value) // create and array if necessary and push value into it
  })
  return arr
},[])

console.log(arr)

answered Dec 23, 2018 at 18:37

Mark

92.7k8 gold badges116 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shidersz Over a year ago

I like this one, reduce would be my first option too, +1

hygull · Accepted Answer · 2018-12-23 19:36:26Z

1

You can also try as the below example shows.

filter() method is basically used when we want filtered output based on some conditions.

var a = [
    {
       'data': [
       {
          'value': 'Red'
       },
       {
        'value': 'Small'
       },
      {
        'value': 'Good'
       }
     ]
    },
    {
        'data': [
        {
        'value': 'Black'
        },
        {
        'value': 'Medium'
        },
       {
        'value': 'Bad'
       }
     ]
   },
     {
     'data': [
      {
        'value': 'White'
      },
      {
        'value': 'Large'
      },
      {
        'value': 'Best'
      }
      ]
     }
    ]


var obj = {};

for(var o of a) {
    for(var i in o.data) {
        if(obj[i] === undefined) {
            obj[i] = [o.data[i].value];
        } else {
            obj[i].push(o.data[i].value);
        }
    }
}

console. log(obj);
/*
{ '0': [ 'Red', 'Black', 'White' ],
  '1': [ 'Small', 'Medium', 'Large' ],
  '2': [ 'Good', 'Bad', 'Best' ] }
*/

edited Dec 23, 2018 at 19:36

answered Dec 23, 2018 at 18:45

hygull

8,7282 gold badges47 silver badges55 bronze badges

3 Comments

jvk Over a year ago

Hi @hygull, the result is displaying multiple times

Mark Over a year ago

It's not the desired result (['Red', 'Black', 'White'] ... etc)

hygull Over a year ago

Now I have updated my answer. Thank you for pointing out my mistake.

Shidersz · Accepted Answer · 2019-09-19 17:59:30Z

This is my solution to your problem, using a main loop over the number of different properties you want to read, and inside each loop uses the facility provides by the method Array.from()

let a = [
    {'data': [{'value': 'Red'}, {'value': 'Small'}, {'value': 'Good'}]},
    {'data': [{'value': 'Black'}, {'value': 'Medium'}, {'value': 'Bad'}]},
    {'data': [{'value': 'White'}, {'value': 'Large'}, {'value': 'Best'}]}
];

// The new array.
let newArr = [];

// Number of properties for each "data" object.
let keys = 3;

for (let k = 0; k < keys; k++)
{
    newArr.push(Array.from(a, v =>  v.data[k].value));
}

console.log(newArr);

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

Alternatively, you can replace Array.from() by map(), like this:

for (let k = 0; k < keys; k++)
{
    newArr.push(a.map(v => v.data[k].value));
}

Example:

let a = [
    {'data': [{'value': 'Red'}, {'value': 'Small'}, {'value': 'Good'}]},
    {'data': [{'value': 'Black'}, {'value': 'Medium'}, {'value': 'Bad'}]},
    {'data': [{'value': 'White'}, {'value': 'Large'}, {'value': 'Best'}]}
];

// The new array.
let newArr = [];

// Number of properties for each "data" object.
let keys = 3;

for (let k = 0; k < keys; k++)
{
    newArr.push(a.map(v =>  v.data[k].value));
}

console.log(newArr);

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

Collectives™ on Stack Overflow

Create arrays from a multidimensional array by each index object value

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related