Efficient ways to organize JSON objects using JavaScript

Question

Efficient ways to organize JSON objects using JavaScript

I am in need of restructuring the data retrieved from an API call, which currently looks like this:

{
  "Label3":
    [
      { "name": "superman", "power": 8900 },
      { "name": "iron man", "power": 3000 },
      { "name": "spike spiegal", "power": 200 },
      { "name": "doctor strange", "power": 800 }
    ],
  "Label18":
    [
      { "name": "goku", "power": 9000 },
      { "name": "vegeta", "power": 8500 },
      { "name": "pringles can", "power": 1 }
    ],
  "Label37":
    [
      { "name": "dr manhattan", "power": 100000 },
      { "name": "mayonaise", "power": 10 }
    ]
}

My goal is to extract the highest power value from each array and reorganize the structure to look like this:

{
    "groupName": 'Label3',
    "highestPower": 8900,
    "heroes": [
        {"name":"superman","power":8900},
        {"name":"iron man","power":3000},
        {"name":"spike spiegal","power":200},
        {"name":"doctor strange","power":800}
    ],
},
{
    "groupName": 'Label18',
    "highestPower": 9000,
    "heroes": [
        {"name":"goku","power":9000},
        {"name":"vegeta","power":8500},
        {"name":"pringles can","power":1}
    ],
},
{
    "groupName": 'Label37',
    "highestPower": 100000,
    "heroes": [
        {"name":"dr manhattan","power":100000},
        {"name":"mayonaise","power":10}
    ],
}

I have been considering using a forEach loop on each array element to find the maximum value and assign it to a variable for comparison. However, I am unsure how to proceed with restructuring the data as required.

javascript arrays json algorithm sorting

Answer 1

Answer №1

You can retrieve the entries and construct a new object with the desired properties.

var data = { Label3: [{ name: "superman", power: 8900 }, { name: "iron man", power: 3000 }, { name: "spike spiegal", power: 200 }, { name: "doctor strange", power: 800 }], Label18: [{ name: "goku", power: 9000 }, { name: "vegeta", power: 8500 }, { name: "pringles can", power: 1 }], Label37: [{ name: "dr manhattan", power: 100000 }, { name: "mayonaise", power: 10 }] },
    result = Object
        .entries(data)
        .map(([groupName, heroes]) => ({
            groupName,
            highestPower: heroes.reduce((max, { power }) => Math.max(max, power), -Infinity),
            heroes
        }));

console.log(result);

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

Answer 2

You can retrieve the entries and construct a new object with the desired properties.

var data = { Label3: [{ name: "superman", power: 8900 }, { name: "iron man", power: 3000 }, { name: "spike spiegal", power: 200 }, { name: "doctor strange", power: 800 }], Label18: [{ name: "goku", power: 9000 }, { name: "vegeta", power: 8500 }, { name: "pringles can", power: 1 }], Label37: [{ name: "dr manhattan", power: 100000 }, { name: "mayonaise", power: 10 }] },
    result = Object
        .entries(data)
        .map(([groupName, heroes]) => ({
            groupName,
            highestPower: heroes.reduce((max, { power }) => Math.max(max, power), -Infinity),
            heroes
        }));

console.log(result);

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

Answer 3

Answer №2

To loop through the labels and find the highest power, you can utilize Object.keys() along with Array.reduce like this:

var attributes = {
  "Attribute5":
    [
      { "name": "batman", "power": 7000 },
      { "name": "wonder woman", "power": 5000 },
      { "name": "hulk", "power": 6000 }
    ],
  "Attribute13":
    [
      { "name": "flash", "power": 8000 },
      { "name": "thor", "power": 7500 },
      { "name": "black widow", "power": 4500 }
    ],
  "Attribute21":
    [
      { "name": "cyborg", "power": 4000 },
      { "name": "catwoman", "power": 3000 }
    ]
}

var groupedAttributes = Object.keys(attributes).map((key) => {
  return {
    category: key,
    maxPower: attributes[key].reduce(( total, current ) => Math.max( total, current.power ), 0),
    characters: attributes[key]
  }
});

console.log(groupedAttributes);

Answer 4

To loop through the labels and find the highest power, you can utilize Object.keys() along with Array.reduce like this:

var attributes = {
  "Attribute5":
    [
      { "name": "batman", "power": 7000 },
      { "name": "wonder woman", "power": 5000 },
      { "name": "hulk", "power": 6000 }
    ],
  "Attribute13":
    [
      { "name": "flash", "power": 8000 },
      { "name": "thor", "power": 7500 },
      { "name": "black widow", "power": 4500 }
    ],
  "Attribute21":
    [
      { "name": "cyborg", "power": 4000 },
      { "name": "catwoman", "power": 3000 }
    ]
}

var groupedAttributes = Object.keys(attributes).map((key) => {
  return {
    category: key,
    maxPower: attributes[key].reduce(( total, current ) => Math.max( total, current.power ), 0),
    characters: attributes[key]
  }
});

console.log(groupedAttributes);

Answer 5

Answer №3

Assuming the source data is already sorted:

var src = getSortedData();
var dst = [];
for(var i in src) {
    dst.push({
        "groupName":i,
        "highestPower":src[i][0].power,
        "heroes":src[i]
    });
}
console.log( JSON.stringify(dst,null,2) );

function getSortedData() {
    return {
    "Label3":
      [
        { "name": "superman", "power": 8900 },
        { "name": "iron man", "power": 3000 },
        { "name": "spike spiegal", "power": 200 },
        { "name": "doctor strange", "power": 800 }
      ],
    "Label18":
      [
        { "name": "goku", "power": 9000 },
        { "name": "vegeta", "power": 8500 },
        { "name": "pringles can", "power": 1 }
      ],
    "Label37":
      [
        { "name": "dr manhattan", "power": 100000 },
        { "name": "mayonaise", "power": 10 }
      ]
  };
}

Answer 6

Assuming the source data is already sorted:

var src = getSortedData();
var dst = [];
for(var i in src) {
    dst.push({
        "groupName":i,
        "highestPower":src[i][0].power,
        "heroes":src[i]
    });
}
console.log( JSON.stringify(dst,null,2) );

function getSortedData() {
    return {
    "Label3":
      [
        { "name": "superman", "power": 8900 },
        { "name": "iron man", "power": 3000 },
        { "name": "spike spiegal", "power": 200 },
        { "name": "doctor strange", "power": 800 }
      ],
    "Label18":
      [
        { "name": "goku", "power": 9000 },
        { "name": "vegeta", "power": 8500 },
        { "name": "pringles can", "power": 1 }
      ],
    "Label37":
      [
        { "name": "dr manhattan", "power": 100000 },
        { "name": "mayonaise", "power": 10 }
      ]
  };
}

Efficient ways to organize JSON objects using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Broadcasting events across the entire system

Exploring the concept of making nested API requests within a route using Node.js and

Unable to capture screenshot of hovered element using Cypress

Error in Mocha test: Import statement can only be used inside a module

What is the best way to gradually transform a continuously shifting text color into a single, consistent hue?

How can I remove the popover parents when clicking the confirm button using jQuery?

Using jQuery AJAX to Redirect to a 404 Page in Case the Load Method Encounters Failure

Unusual behavior observed within for loop; code within not running as expected

Angular UI Bootstrap collapse directive fails to trigger expandDone() function

A deep-dive into using recursive queries in Postgres with json data types

The Glyphicon icon fails to appear on the initial page load and only shows up after refreshing the

send the variable to the deferred done function

Is there a way to position the menu above the button?

Converting numerical data from JSON to a structured model

What are the steps to resolve the error 'content-type missing boundary' and encountering the issue with getBoundary not being recognized as a function?

MVC5 Toggle Button for Instant Display and Concealment

Looking to organize my divs by data attributes when clicked - how can I achieve this with javascript?

Selecting any of the bar chart labels will reveal just a two-day timeframe

What is the best way to align content in the left center of a Paper component and ensure it stays that way on smaller devices?

Avoiding drag events in hammer.js until the previous event is finished