"Utilize JavaScript to assign array values to the main object for efficient data

Question

"Utilize JavaScript to assign array values to the main object for efficient data

I am looking to parse a modified JSON file to create separate objects for each team and player. I want each object to have a key for the team name and the player name.

Using JavaScript, how can I achieve the following structure:

[
{ name: 'Dallas Stars', playerName: 'Alexander Radulov'},
{ name: 'Dallas Stars', playerName: 'Ben Bishop'},
{ name: 'Dallas Stars', playerName: 'Jamie Benn'}
...
{ name: 'Columbus Blue Jackets', playerName: 'Pierre-Luc Dubois'}
]

Given this JSON data:

[ { name: 'Dallas Stars',
        roster:
         [ 'Alexander Radulov',
           'Ben Bishop',
           'Jamie Benn',
           'Tyler Pitlick',
           'Miro Heiskanen' ] },
      { name: 'Los Angeles Kings',
        roster:
         [ 'Jonathan Quick',
           'Jonny Brodzinski',
           'Oscar Fantenberg' ] },
      { name: 'San Jose Sharks',
        roster:
         [ 'Joe Thornton',
           'Brent Burns',
           'Joe Pavelski',
           'Antti Suomela' ] },
      { name: 'Columbus Blue Jackets',
        roster:
         [ 'Sonny Milano',
           'Brandon Dubinsky',
           'Nick Foligno',
           'Pierre-Luc Dubois' ] } ]

I am attempting to link each team name to individual players. I have explored different lodash functions but have not yet found the solution.

Is it possible to utilize a flat map and duplicate the team name for each player?

javascript json parsing dictionary key-value

Answer 1

Answer №1

To effectively process the data, you should iterate through the main array elements and then within each of those, loop through the `roster` as well. Using the `reduce` method is commonly the best approach for transforming an array into another array in a non-one-to-one manner:

const teams=[{name:'Dallas Stars',roster:['Alexander Radulov','Ben Bishop','Jamie Benn','Tyler Pitlick','Miro Heiskanen']},{name:'Los Angeles Kings',roster:['Jonathan Quick','Jonny Brodzinski','Oscar Fantenberg']},{name:'San Jose Sharks',roster:['Joe Thornton','Brent Burns','Joe Pavelski','Antti Suomela']},{name:'Columbus Blue Jackets',roster:['Sonny Milano','Brandon Dubinsky','Nick Foligno','Pierre-Luc Dubois']}];

const players = teams.reduce((acc, { name, roster }) => {
  roster.forEach((playerName) => {
    acc.push({ name, playerName });
  });
  return acc;
}, []);
console.log(players);

Answer 2

To effectively process the data, you should iterate through the main array elements and then within each of those, loop through the `roster` as well. Using the `reduce` method is commonly the best approach for transforming an array into another array in a non-one-to-one manner:

const teams=[{name:'Dallas Stars',roster:['Alexander Radulov','Ben Bishop','Jamie Benn','Tyler Pitlick','Miro Heiskanen']},{name:'Los Angeles Kings',roster:['Jonathan Quick','Jonny Brodzinski','Oscar Fantenberg']},{name:'San Jose Sharks',roster:['Joe Thornton','Brent Burns','Joe Pavelski','Antti Suomela']},{name:'Columbus Blue Jackets',roster:['Sonny Milano','Brandon Dubinsky','Nick Foligno','Pierre-Luc Dubois']}];

const players = teams.reduce((acc, { name, roster }) => {
  roster.forEach((playerName) => {
    acc.push({ name, playerName });
  });
  return acc;
}, []);
console.log(players);

Answer 3

Answer №2

Utilizing the map and flat functions is another option.

Start by mapping over the original array, then for each item being "mapped," further map over its roster to construct the desired object. Finally, as the resulting array will be 2-dimensional, flatten it:

var data = [{ name: 'Dallas Stars', roster: ['Alexander Radulov', 'Ben Bishop', 'Jamie Benn', 'Tyler Pitlick', 'Miro Heiskanen' ] }, { name: 'Los Angeles Kings', roster: ['Jonathan Quick', 'Jonny Brodzinski', 'Oscar Fantenberg' ] }, { name: 'San Jose Sharks', roster: ['Joe Thornton', 'Brent Burns', 'Joe Pavelski', 'Antti Suomela' ] }, { name: 'Columbus Blue Jackets', roster: ['Sonny Milano', 'Brandon Dubinsky', 'Nick Foligno', 'Pierre-Luc Dubois' ] } ];

var res = data
  .map(({name, roster}) =>
    roster.map(playerName => ({name, playerName})))
  .flat();

console.log(res);

Answer 4

Utilizing the map and flat functions is another option.

Start by mapping over the original array, then for each item being "mapped," further map over its roster to construct the desired object. Finally, as the resulting array will be 2-dimensional, flatten it:

var data = [{ name: 'Dallas Stars', roster: ['Alexander Radulov', 'Ben Bishop', 'Jamie Benn', 'Tyler Pitlick', 'Miro Heiskanen' ] }, { name: 'Los Angeles Kings', roster: ['Jonathan Quick', 'Jonny Brodzinski', 'Oscar Fantenberg' ] }, { name: 'San Jose Sharks', roster: ['Joe Thornton', 'Brent Burns', 'Joe Pavelski', 'Antti Suomela' ] }, { name: 'Columbus Blue Jackets', roster: ['Sonny Milano', 'Brandon Dubinsky', 'Nick Foligno', 'Pierre-Luc Dubois' ] } ];

var res = data
  .map(({name, roster}) =>
    roster.map(playerName => ({name, playerName})))
  .flat();

console.log(res);

"Utilize JavaScript to assign array values to the main object for efficient data

Answer №1

Answer №2

Similar questions

Having trouble with submitting the AJAX form when trying to rate something

Plotting a course on Google Maps using various sets of latitude and longitude coordinates retrieved from a database

Position SVG's in relation to one another

What could be causing my Google Chrome extension to only allow me to open 25 tabs instead of more?

Even though I have successfully stored a key value pair in LocalStorage using JSON stringify and setItem, the data does not persist after the page is refreshed

Passing hooks down in React leads to input losing focus due to rerendering

How to programmatically clear an input field in Angular using Bootstrap's typeahead feature

Error: Unable to access the 'comments' property of a null value

Replace a string in an array using JavaScript

What is the best way to keep a checkbox unchecked after clicking cancel?

Troubleshooting CORS Problem with AWS CloudFront Signed Cookies

Testing a directive that has templates all contained within a single file with script tags

Can a web application determine if Microsoft Excel has been installed?

The Sluggishness of MongoDB Aggregation in Determining Distinct IDs within Retrieved Documents

When transferring files using formData via axios, the server is unable to interpret the data

Transforming FormData string key names into a Json Object that is easily accessible

What is the Python technique for arranging row values in an Excel file using a dictionary?

Error 414: The URL exceeds the maximum length and cannot be processed

Is it possible to obtain the output of a JavaScript file directly? (kind of like AJAX)

Is it possible to use an Ajax callback function to add a select dropdown HTML to a table