Is there a way to efficiently transform an 'Array of Objects' with values 'Array of Object' into an array of Objects with individual array values using JS/lodash?

Question

Is there a way to efficiently transform an 'Array of Objects' with values 'Array of Object' into an array of Objects with individual array values using JS/lodash?

I utilized the lodash library to divide arrays into chunks (batches).

let values = {
    'key1' : [lotsOfValues1],
    'key2' : [lotsOfValues2]
};
let keys = ['key1', 'key2'];
let arrObj = [];
keys.forEach((key) => {
    arrObj.push([key] : lodash.chunk(values[key], 20)) // it will break lotsOfValues arrays into chunks of size 20
});
/* Now arrObj = [
  {
    key1: [[someVals1], [someVals2], [someVals3]],
  },
  {
    key2: [[someVals4], [someVals5]],
  },
];
*/

Is there a more efficient way to convert an array of Objects -

const arrObj = [
      {
        key1: [[someVals1], [someVals2], [someVals3]],
      },
      {
        key2: [[someVals4], [someVals5]],
      },
    ];

to an array of Objects where each object has individual array elements instead of an array of objects. For example -

const arrObjTransformed = [
      { key1: [someVals1] },
      { key1: [someVals2] },
      { key1: [someVals3] },
      { key2: [someVals4] },
      { key2: [someVals5] },
    ];

any assistance on this matter would be greatly appreciated.

I attempted to iterate through arrObj and nested loops to create a new object with each value, continuously updating the final output array.

However, I believe there might be a cleaner solution to accomplish this task.

javascript json object ecmascript-6 lodash

Answer 1

Answer №1

If you want to traverse an array of objects using _.flatMap(), it allows you to loop through the array and then the object's properties, mapping each chunk into new objects with specific chunks.

const { flatMap, map } = _

const arr = [{
    'key1': [[1, 1, 1], [2, 2, 2], [3, 3, 3]]
  },
  {
    'key2': [[4, 4, 4], [5, 5, 5], [6, 6, 6]],
  },
  {
    'key3': [[7, 7, 7]]
  }
]

const result = flatMap(arr, obj => 
  flatMap(obj, 
    (v, k) => map(v, chunk => ({
      [k]: chunk
    }))
  )
)
console.log(result)

.as-console-wrapper { max-height: 100% !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Alternatively, you can directly work with the original object and create both chunks and the desired structure in one go:

const { flatMap, map, chunk } = _

const obj = {
  'key1': [1, 1, 1, 2, 2, 2, 3, 3, 3],
  'key2': [4, 4, 4, 5, 5, 5, 6, 6, 6],
  'key3': [7, 7, 7]
}

const result = flatMap(obj, (arr, key) => 
  map(chunk(arr, 3), chunk => ({
    [key]: chunk
  }))
)
  
console.log(result)

.as-console-wrapper { max-height: 100% !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Answer 2

If you want to traverse an array of objects using _.flatMap(), it allows you to loop through the array and then the object's properties, mapping each chunk into new objects with specific chunks.

const { flatMap, map } = _

const arr = [{
    'key1': [[1, 1, 1], [2, 2, 2], [3, 3, 3]]
  },
  {
    'key2': [[4, 4, 4], [5, 5, 5], [6, 6, 6]],
  },
  {
    'key3': [[7, 7, 7]]
  }
]

const result = flatMap(arr, obj => 
  flatMap(obj, 
    (v, k) => map(v, chunk => ({
      [k]: chunk
    }))
  )
)
console.log(result)

.as-console-wrapper { max-height: 100% !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Alternatively, you can directly work with the original object and create both chunks and the desired structure in one go:

const { flatMap, map, chunk } = _

const obj = {
  'key1': [1, 1, 1, 2, 2, 2, 3, 3, 3],
  'key2': [4, 4, 4, 5, 5, 5, 6, 6, 6],
  'key3': [7, 7, 7]
}

const result = flatMap(obj, (arr, key) => 
  map(chunk(arr, 3), chunk => ({
    [key]: chunk
  }))
)
  
console.log(result)

.as-console-wrapper { max-height: 100% !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Answer 3

Answer №2

Let's attempt it by looping through an array of objects, then multiplying each key by the arrays associated with that key. Here is an example:

const arrObjects = [{
    'key1': [[1, 1, 1], [2, 2, 2], [3, 3, 3]]
  },
  {
    'key2': [[4, 4, 4], [5, 5, 5], [6, 6, 6]],
    'key3': [[7, 7, 7]]
  }
]

var resultArr = []
arrObjects.forEach(function(object) {
  Object.keys(object).forEach(function(key) {
    var arrayOfArrays = object[key];
    arrayOfArrays.forEach(function(array) {
      var newElement = {}
      newElement[key] = array;
      resultArr.push(newElement)
    })
  })
})

console.log(resultArr)

.as-console-wrapper {
  max-height: 100% !important
}

Answer 4

Let's attempt it by looping through an array of objects, then multiplying each key by the arrays associated with that key. Here is an example:

const arrObjects = [{
    'key1': [[1, 1, 1], [2, 2, 2], [3, 3, 3]]
  },
  {
    'key2': [[4, 4, 4], [5, 5, 5], [6, 6, 6]],
    'key3': [[7, 7, 7]]
  }
]

var resultArr = []
arrObjects.forEach(function(object) {
  Object.keys(object).forEach(function(key) {
    var arrayOfArrays = object[key];
    arrayOfArrays.forEach(function(array) {
      var newElement = {}
      newElement[key] = array;
      resultArr.push(newElement)
    })
  })
})

console.log(resultArr)

.as-console-wrapper {
  max-height: 100% !important
}

Is there a way to efficiently transform an 'Array of Objects' with values 'Array of Object' into an array of Objects with individual array values using JS/lodash?

Answer №1

Answer №2

Similar questions

Develop a JSON object containing a JSON array within an Android application

Automatically load VueJS components based on the prefix of the tag

Decisive presentation of Laravel data in an appropriate structure

Personalizing Material-UI Components using Styled-Components

Begin a new countdown timer upon clicking the next button

Using ngFor results in duplicate instances of ng-template

What are some effective ways to utilize localstorage efficiently?

Retrieve the JSON data once the user has applied the filter

"Troubleshooting conversion issue in Laravel when converting integer to string in JSON response

Duplicate key error occurred in the collection resulting in Error Handling: E11000

Creating a dynamic drag-and-drop layout in React using react-grid-layout

Populate an ng-repeat table again while maintaining its original sorting order

Tips for accessing a DOM element's ::before content using JavaScript

What is the process for converting an attribute ArrayList<String>, ArrayList<Integer>, or ArrayList<MYCLASS> from a JSON object into a Java object?

Verify whether the JSON string is equal to 1, then show "one"; if it is 2

How can you effectively transfer arguments from one component to another using router.push() in Vue.js?

Exploring the method of inserting an element into a nested array using JavaScript's ES6 features

Getting JSON data from an Angular JS controller can be achieved by utilizing the built-in

Expanding the functionality of the Ember JSONAPIAdapter for retrieving JSON data from a specified URL

Refresh text displayed on a button with the help of setInterval