Combining arrays in JavaScript to form object values with lodash

Question

Combining arrays in JavaScript to form object values with lodash

In my current project, I am attempting to manipulate JavaScript object arrays using lodash. The goal is to stack array values from different objects and map them to corresponding objects in a new array. Here's an example of what I'm working with:

olympicmedals = {
    '2008': [{'country': 'China', 'golds': 51}, {'country': 'USA', 'golds': 36}],
    '2012': [{'country': 'China', 'golds': 38}, {'country': 'USA', 'golds': 46}]
}

The desired outcome is as follows:

olympicmedals = [
    {'country': 'China', 'golds2008': 51, 'golds2012': 38},
    {'country': 'USA', 'golds2008': 36, 'golds2012': 46}
]

I am looking to achieve this for the purpose of creating charts in amCharts, which can be seen here (click 'View Demo Source' therein).

My understanding is that the _.map() function may be useful for this task, but I am not entirely sure how to proceed. Any guidance would be greatly appreciated. Thank you!

javascript arrays lodash amcharts

Answer 1

Answer №1

To simplify the process, you can utilize the forEach() loop for iterating through objects within arrays to efficiently add years as keys. This approach offers flexibility in handling multiple object properties beyond just gold medals.

const data = {
  '2008': [{
    'country': 'China',
    'golds': 51,
    silver: 10
  }, {
    'country': 'USA',
    'golds': 36
  }],
  '2012': [{
    'country': 'China',
    'golds': 38
  }, {
    'country': 'USA',
    'golds': 46,
    bronze: 10
  }]
}

const result = []
Object.keys(data).forEach((e) => {
  const that = this;
  data[e].forEach((a) => {
    if (!that[a.country]) {
      that[a.country] = {
        country: a.country
      }
      Object.keys(a).forEach((key) => {
        if (key != 'country') that[a.country][e + key] = a[key]
      })
      result.push(that[a.country])
    } else {
      Object.keys(a).forEach((key) => {
        if (key != 'country') that[a.country][e + key] = a[key]
      })
    }
  })
}, {})

console.log(JSON.stringify(result, null, 4))

Answer 2

To simplify the process, you can utilize the forEach() loop for iterating through objects within arrays to efficiently add years as keys. This approach offers flexibility in handling multiple object properties beyond just gold medals.

const data = {
  '2008': [{
    'country': 'China',
    'golds': 51,
    silver: 10
  }, {
    'country': 'USA',
    'golds': 36
  }],
  '2012': [{
    'country': 'China',
    'golds': 38
  }, {
    'country': 'USA',
    'golds': 46,
    bronze: 10
  }]
}

const result = []
Object.keys(data).forEach((e) => {
  const that = this;
  data[e].forEach((a) => {
    if (!that[a.country]) {
      that[a.country] = {
        country: a.country
      }
      Object.keys(a).forEach((key) => {
        if (key != 'country') that[a.country][e + key] = a[key]
      })
      result.push(that[a.country])
    } else {
      Object.keys(a).forEach((key) => {
        if (key != 'country') that[a.country][e + key] = a[key]
      })
    }
  })
}, {})

console.log(JSON.stringify(result, null, 4))

Answer 3

Answer №2

Though a bit delayed, here's an alternative method using map and reduce:

data = {
    '2008': [{'country': 'China', 'golds': 51}, {'country': 'USA', 'golds': 36}],
    '2012': [{'country': 'China', 'golds': 38}, {'country': 'USA', 'golds': 46}]
}

const countriesList = data[Object.keys(data)[0]].map(element => element.country)

const outcome = countriesList.map(country => {
  return Object.keys(data).reduce((previous, year) => {
    previous[`golds${year}`] = data[year].find(item => item.country === country).golds
    return previous
  }, {country})
})
console.log(outcome)

When handling this type of conversion task, I prefer obtaining the necessary column information first and storing it in a variable (`countriesList`), which can then be used to filter or find the relevant data later on. While there may be methods to achieve this without any local state, readability might become compromised.

Answer 4

Though a bit delayed, here's an alternative method using map and reduce:

data = {
    '2008': [{'country': 'China', 'golds': 51}, {'country': 'USA', 'golds': 36}],
    '2012': [{'country': 'China', 'golds': 38}, {'country': 'USA', 'golds': 46}]
}

const countriesList = data[Object.keys(data)[0]].map(element => element.country)

const outcome = countriesList.map(country => {
  return Object.keys(data).reduce((previous, year) => {
    previous[`golds${year}`] = data[year].find(item => item.country === country).golds
    return previous
  }, {country})
})
console.log(outcome)

When handling this type of conversion task, I prefer obtaining the necessary column information first and storing it in a variable (`countriesList`), which can then be used to filter or find the relevant data later on. While there may be methods to achieve this without any local state, readability might become compromised.

Combining arrays in JavaScript to form object values with lodash

Answer №1

Answer №2

Similar questions

Design a collection of image icons to use as a toolbar in a web

The non-generic nature of Typescript's Type Object is a distinguishing feature

In order to display the particle-slider logo effect, the JavaScript on the page needs to be refreshed

Optimal method for reorganizing a 2D numpy array based on a separate 2D index array

What is the best way to display time instead of angles in highcharts?

Is there a more efficient method for handling this JSON dataset?

Retrieve a particular nested array value and print it using PHP

A beginner's guide to using Jasmine to test $http requests in AngularJS

Is it necessary to confirm the validity of url.format(urlObject)?

Providing dynamic string outputs depending on the current date using AngularJS

If all input values within every li element are equal to zero in jQuery

What is the process of encoding JSON in PHP using jQuery Ajax to send post data?

JavaScript does not recognize jsPDF

Sending dynamic data through AJAX to a CodeIgniter controller is a common task that allows for seamless

Obtain an array dynamically through a manufacturing plant

Understanding the performance of video in threejs when using getImageData

Lost variable during the ajax call

Issue with Vue3: The imported module is not defined

using VueJS, learn how to dynamically apply text to a data variable based on certain props

Encountering an error: [nsIWebProgressListener::onStatusChange] when utilizing jQuery AJAX within a click event?