Generate arrays by extracting each individual value from a multidimensional array based on their corresponding index objects

Question

Generate arrays by extracting each individual value from a multidimensional array based on their corresponding index objects

Witness the example of my primary array:

[
  {
    'data': [{'value': 'Yellow'}, {'value': 'Tiny'}, {'value': 'Excellent'}]
  },
  {
    'data': [{'value': 'Green'}, {'value': 'Large'}, {'value': 'Poor'}]
  },
  {
    'data': [{'value': 'Blue'}, {'value': 'Medium'}, {'value': 'Superb'}]
  }
]

The desired outcome is:

[
  ['Yellow', 'Green', 'Blue'],    
  ['Tiny', 'Large', 'Medium'],
  ['Excellent', 'Poor', 'Superb']       
]

I have attempted using forEach, for...in, filter, and so on. However, I have not been able to achieve the expected result.

javascript arrays

Answer 1

Answer №1

To organize the data, you can implement a combination of reduce() and forEach(). Within the loop of reduce(), utilize forEach() to iterate over each element in the array. Use the index within the forEach loop to identify the specific array where the value should be stored. If there is no existing value at that index, create a new array and push the value into it:

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

let arrangedData = information.reduce((arr, item) => {         // review each item in the information array
  item.information.forEach(({detail}, index) => {              // explore each item in the item.information array
    (arr[index] || (arr[index] = [])).push(detail)             // generate an array if needed and append detail to it
  })
  return arr
},[])

console.log(arrangedData)

Answer 2

To organize the data, you can implement a combination of reduce() and forEach(). Within the loop of reduce(), utilize forEach() to iterate over each element in the array. Use the index within the forEach loop to identify the specific array where the value should be stored. If there is no existing value at that index, create a new array and push the value into it:

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

let arrangedData = information.reduce((arr, item) => {         // review each item in the information array
  item.information.forEach(({detail}, index) => {              // explore each item in the item.information array
    (arr[index] || (arr[index] = [])).push(detail)             // generate an array if needed and append detail to it
  })
  return arr
},[])

console.log(arrangedData)

Answer 3

Answer №2

If you're looking to filter output based on specific conditions, consider using the filter() method as demonstrated below.

filter() method is essentially utilized when one wishes to obtain a filtered output based on certain criteria.

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' ] }
*/

Answer 4

If you're looking to filter output based on specific conditions, consider using the filter() method as demonstrated below.

filter() method is essentially utilized when one wishes to obtain a filtered output based on certain criteria.

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' ] }
*/

Answer 5

Answer №3

Here is how I tackled your issue: I utilized a main loop that iterates over the specified number of properties you wish to access, utilizing the functionality provided 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, instead of using Array.from(), you can opt for map(), like so:

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

Answer 6

Here is how I tackled your issue: I utilized a main loop that iterates over the specified number of properties you wish to access, utilizing the functionality provided 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, instead of using Array.from(), you can opt for map(), like so:

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

Generate arrays by extracting each individual value from a multidimensional array based on their corresponding index objects

Answer №1

Answer №2

Answer №3

Similar questions

Transfer the chosen language from the uib-dropdown language selector to the $scope variable

What is the best way to extract information from a text file and store it in an array of structures?

The Power of AngularJS Directives in Harnessing jQuery DOM Event Bindings

Exploring the World of C Pointers and Arrays

Displaying a loading indicator while a file is downloading and the page is being

Getting the (x,y) Coordinate Value from jQuery Script and Saving it as a NSString

Using JavaScript includes to verify the presence of various values

Categorize an array by their names using Jquery and present them as a list

A guide on utilizing the Check All feature in nglightning for Angular 2

Updating the input value in a React application

Is there a way to make an input field mandatory in Gravity Forms by utilizing javascript or jquery?

Is it possible for PHP to accomplish this task?

Utilize a random file import with the help of React JS, Babel, and ES6

What is the best way to find a partial string match within an array of objects when using Jest?

Utilizing Conditional Logic to Create a Dynamic Menu

What is the best way to retrieve combined reducers in react-redux?

Implement Babel with node.js 6.9

What steps can I take to avoid res.send() from replacing the entire document?

Choose a value to apply to the dropdown menus

I'm having trouble with my dropdown navigation menus - they keep popping back up and I can't seem to access