Rearrange a set of elements based on specific criteria

Question

Rearrange a set of elements based on specific criteria

I am completely lost when it comes to deciding on a suitable title for this piece. Here is the information I have retrieved from the API:

[
    {
      "order": 1,
      "role": {
        "label": "singer"
      },
      "artist": {
        "name": "AaRON"
      }
    },
    {
      "order": 1,
      "role": {
        "label": "author"
      },
      "artist": {
        "name": "Simon Buret"
      }
    },
    {
      "order": 2,
      "role": {
        "label": "author"
      },
      "artist": {
        "name": "Olivier Coursier"
      }
    },
    {
      "order": 1,
      "role": {
        "label": "composer"
      },
      "artist": {
        "name": "John Doe"
      }
    }
  ]

And here is the format in which I need to send the data:

"artist": {
  "singer": [
    "AaRON"
  ],
  "author": [
     "Simon Buret",
     "Olivier Coursier"
  ]
}

The order property needs to be considered in the process.

For instance, Simon Buret should appear first as his order is set to 1.

I am clueless about how to go about implementing this, I attempted a map function but I am unsure of what should be included inside it :/

this.artistControl.controls.map(artistControl => {
   ...
});

Is there any way to achieve the desired outcome?

javascript angular typescript sorting filter

Answer 1

Answer №1

Would you like to try this solution:

let musicians = [
    { "ranking": 1, "role": { "label": "singer" }, "artist": { "name": "AaRON" } },
    { "ranking": 1, "role": { "label": "author" }, "artist": { "name": "Simon Buret" } },
    { "ranking": 2, "role": { "label": "author" }, "artist": { "name": "Olivier Coursier" } },
    { "ranking": 1, "role": { "label": "composer" }, "artist": { "name": "John Doe" } }
];

let data = {'artist': {}};
musicians.forEach(m => {
    data['artist'][m.role.label] = data['artist'][m.role.label] || [];
    data['artist'][m.role.label][m.ranking-1] = m.artist.name;
});

console.log(data);

Answer 2

Would you like to try this solution:

let musicians = [
    { "ranking": 1, "role": { "label": "singer" }, "artist": { "name": "AaRON" } },
    { "ranking": 1, "role": { "label": "author" }, "artist": { "name": "Simon Buret" } },
    { "ranking": 2, "role": { "label": "author" }, "artist": { "name": "Olivier Coursier" } },
    { "ranking": 1, "role": { "label": "composer" }, "artist": { "name": "John Doe" } }
];

let data = {'artist': {}};
musicians.forEach(m => {
    data['artist'][m.role.label] = data['artist'][m.role.label] || [];
    data['artist'][m.role.label][m.ranking-1] = m.artist.name;
});

console.log(data);

Answer 3

Answer №2

To achieve this, you can utilize the `reduce` method by using an object as an accumulator parameter. Then, you can verify if the key does not exist, create it with an empty array as the value, and proceed to add names in order.

const data = [{"order":1,"role":{"label":"singer"},"artist":{"name":"AaRON"}},{"order":1,"role":{"label":"author"},"artist":{"name":"Simon Buret"}},{"order":2,"role":{"label":"author"},"artist":{"name":"Olivier Coursier"}},{"order":1,"role":{"label":"composer"},"artist":{"name":"John Doe"}]

const result = data.reduce((r, {
  role: { label },
  artist: { name },
  order
}) => {
  if (name) {
    if (!r[label]) r[label] = [];
    r[label][order - 1] = name;
  }
  
  return r;
}, {})

console.log(result)

Answer 4

To achieve this, you can utilize the `reduce` method by using an object as an accumulator parameter. Then, you can verify if the key does not exist, create it with an empty array as the value, and proceed to add names in order.

const data = [{"order":1,"role":{"label":"singer"},"artist":{"name":"AaRON"}},{"order":1,"role":{"label":"author"},"artist":{"name":"Simon Buret"}},{"order":2,"role":{"label":"author"},"artist":{"name":"Olivier Coursier"}},{"order":1,"role":{"label":"composer"},"artist":{"name":"John Doe"}]

const result = data.reduce((r, {
  role: { label },
  artist: { name },
  order
}) => {
  if (name) {
    if (!r[label]) r[label] = [];
    r[label][order - 1] = name;
  }
  
  return r;
}, {})

console.log(result)

Answer 5

Answer №3

let bandMembers = [{"order":1,"role":{"label":"singer"},"artist":{"name":"John Legend"}},{"order":1,"role":{"label":"guitarist"},"artist":{"name":"Tom Morello"}},{"order":2,"role":{"label":"bassist"},"artist":{"name":"Flea"}}];

const bandRoles = bandMembers
  .sort((member1, member2) => member1.order - member2.order)
  .reduce((acc, { role, artist }) => ({
    ...acc,
    artist: {
      ...acc.artist,
      [role.label]: [
        ...(acc.artist[role.label] || []),
        artist.name,
      ],
    },
  }), { artist: {} });
  
console.log(bandRoles);

Answer 6

let bandMembers = [{"order":1,"role":{"label":"singer"},"artist":{"name":"John Legend"}},{"order":1,"role":{"label":"guitarist"},"artist":{"name":"Tom Morello"}},{"order":2,"role":{"label":"bassist"},"artist":{"name":"Flea"}}];

const bandRoles = bandMembers
  .sort((member1, member2) => member1.order - member2.order)
  .reduce((acc, { role, artist }) => ({
    ...acc,
    artist: {
      ...acc.artist,
      [role.label]: [
        ...(acc.artist[role.label] || []),
        artist.name,
      ],
    },
  }), { artist: {} });
  
console.log(bandRoles);

Answer 7

Answer №4

Check out this new es5 implementation!

const records = [{ "order": 1, "role": { "label": "singer" }, "artist": { "name": "AaRON" } }, { "order": 1, "role": { "label": "author" }, "artist": { "name": "Simon Buret" } }, { "order": 2, "role": { "label": "author" }, "artist": { "name": "Olivier Coursier" } }, { "order": 1, "role": { "label": "composer" }, "artist": { "name": "John Doe" } }];

 var finalResult = records.reduce(function(mapObj, item) {
            mapObj["artist"] = mapObj["artist"] || {};
            if (item.role.label === 'author' || item.role.label === 'singer') {
                mapObj["artist"][item.role.label] = mapObj["artist"][item.role.label] || [];
                mapObj["artist"][item.role.label][item.order - 1] = item.artist.name;
            }
            return mapObj;
 }, {});
        
 console.log(finalResult)

Answer 8

Check out this new es5 implementation!

const records = [{ "order": 1, "role": { "label": "singer" }, "artist": { "name": "AaRON" } }, { "order": 1, "role": { "label": "author" }, "artist": { "name": "Simon Buret" } }, { "order": 2, "role": { "label": "author" }, "artist": { "name": "Olivier Coursier" } }, { "order": 1, "role": { "label": "composer" }, "artist": { "name": "John Doe" } }];

 var finalResult = records.reduce(function(mapObj, item) {
            mapObj["artist"] = mapObj["artist"] || {};
            if (item.role.label === 'author' || item.role.label === 'singer') {
                mapObj["artist"][item.role.label] = mapObj["artist"][item.role.label] || [];
                mapObj["artist"][item.role.label][item.order - 1] = item.artist.name;
            }
            return mapObj;
 }, {});
        
 console.log(finalResult)

Rearrange a set of elements based on specific criteria

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Incorporate highcharts data into your Laravel project using the power of AJAX

Combining two input text strings

The async waterfall is encountering a Typeerror due to the nextcallback function not being defined properly

Transferring a parameter from link_to to a popup window in a Rails application

Update the div element without needing to reload the entire page

What happens when Google Polymer platform is used without defining _polyfilled?

Discover the method for inserting a title attribute value into a span element

Compiling modal window content in AngularJS can lead to the creation of controllers that are left disconnected

When the ajax.beginform is successful, no action is required

Require.js and R.js optimizer overlooks shimming configuration

Submission event linked with AJAX code fails to execute

Suggestions for rectifying the calculation script to include the price, a phone number, 2 digits, and integrating a textfield for cost

Waiting for the HTTP response in NodeJS before sending the next request

Is there a way to change the screen upon clicking a button?

Guide on transforming a tuple of random types into a nested type structure with the help of recursive conditional types

Tips for seamlessly transitioning the background of Google Maps into view as you scroll down the page

What is the reason for index.html requesting the css or js modules as if they were directories when loading?

What is the best way to restore the original form of a string after using string.replaceAll in javascript

Modifying preset values in settings.json within the [Extension Development Host] environment

Having trouble updating attribute through ajax requests