Order JSON data based on a predetermined list of keys using JavaScript

Question

Order JSON data based on a predetermined list of keys using JavaScript

Imagine having a JSON list called LIST A:

LIST A

[
  {
    "address": "wellington lane",
    "age": "23",
    "country": "Australia",
    "name": "Mike",
    "profession": "Lawyer"
  },
  {
    "address": "Street 25",
    "age": "26",
    "country": "New Zealand",
    "name": "Parks",
    "profession": "Engineer"
  },
  {
    "address": "North cross",
    "age": "29",
    "country": "Korea",
    "name": "Wanda",
    "profession": "Doctor"
  }
]

LIST B

["name","age","address","country","profession"]

The task is to sort the JSON LIST A based on the array LIST B, resulting in:

[
  {
    "name": "Mike",
    "age": "23",
    "address": "wellington lane",
    "country": "Australia",
    "profession": "Lawyer"
  },
  {
    "name": "Parks",
    "age": "26",
    "address": "Street 25",
    "country": "New Zealand",
    "profession": "Engineer"
  },
  {
    "name": "Wanda",
    "age": "29",
    "address": "North cross",
    "country": "Korea",
    "profession": "Doctor"
  }
]

How can this be achieved? I attempted this approach but it did not work as expected.

javascript json sorting

Answer 1

Answer №1

Hello there, one possible approach is to iterate through both arrays and construct a new array with ordered attributes. Here's a sample code snippet to achieve this:

let data = [
      {
        "address": "wellington lane",
        "age": "23",
        "country": "Australia",
        "name": "Mike",
        "profession": "Lawyer"
      },
      {
        "address": "Street 25",
        "age": "26",
        "country": "New Zealand",
        "name": "Parks",
        "profession": "Engineer"
      },
      {
        "address": "North cross",
        "age": "29",
        "country": "Korea",
        "name": "Wanda",
        "profession": "Doctor"
      }
    ]

    let attributes = ["name","age","address","country","profession"]
    
    let result = [];
    
    data.forEach(element => {
       let resultObject = {}
       attributes.forEach(attribute => {
          resultObject[attribute] = element[attribute]          
       })
       result.push(resultObject)
    })
    
    console.log(result)

Answer 2

Hello there, one possible approach is to iterate through both arrays and construct a new array with ordered attributes. Here's a sample code snippet to achieve this:

let data = [
      {
        "address": "wellington lane",
        "age": "23",
        "country": "Australia",
        "name": "Mike",
        "profession": "Lawyer"
      },
      {
        "address": "Street 25",
        "age": "26",
        "country": "New Zealand",
        "name": "Parks",
        "profession": "Engineer"
      },
      {
        "address": "North cross",
        "age": "29",
        "country": "Korea",
        "name": "Wanda",
        "profession": "Doctor"
      }
    ]

    let attributes = ["name","age","address","country","profession"]
    
    let result = [];
    
    data.forEach(element => {
       let resultObject = {}
       attributes.forEach(attribute => {
          resultObject[attribute] = element[attribute]          
       })
       result.push(resultObject)
    })
    
    console.log(result)

Answer 3

Answer №2

Check out this innovative approach utilizing map and reduce:

const data = [
  {
    "name": "Mike",
    "age": "23",
    "address": "wellington lane",
    "country": "Australia",
    "profession": "Lawyer"
  },
  {
    "name": "Parks",
    "age": "26",
    "address": "Street 25",
    "country": "New Zealand",
    "profession": "Engineer"
  },
  {
    "name": "Wanda",
    "age": "29",
    "address": "North cross",
    "country": "Korea",
    "profession": "Doctor"
  }
];

const order = ["name", "age", "address", "country", "profession"];

const orderedData = data.map(item => order.reduce((acc, key) => ({ ...acc, [key]: item[key] }), {}));

console.log(orderedData);

Answer 4

Check out this innovative approach utilizing map and reduce:

const data = [
  {
    "name": "Mike",
    "age": "23",
    "address": "wellington lane",
    "country": "Australia",
    "profession": "Lawyer"
  },
  {
    "name": "Parks",
    "age": "26",
    "address": "Street 25",
    "country": "New Zealand",
    "profession": "Engineer"
  },
  {
    "name": "Wanda",
    "age": "29",
    "address": "North cross",
    "country": "Korea",
    "profession": "Doctor"
  }
];

const order = ["name", "age", "address", "country", "profession"];

const orderedData = data.map(item => order.reduce((acc, key) => ({ ...acc, [key]: item[key] }), {}));

console.log(orderedData);

Answer 5

Answer №3

Here is a method to achieve this task without the need for an external library:

const arr = [
  {
    'address': 'wellington lane',
    'age': '23',
    'country': 'Australia',
    'name': 'Mike',
    'profession': 'Lawyer',
  },
  {
    'address': 'Street 25',
    'age': '26',
    'country': 'New Zealand',
    'name': 'Parks',
    'profession': 'Engineer',
  },
  {
    'address': 'North cross',
    'age': '29',
    'country': 'Korea',
    'name': 'Wanda',
    'profession': 'Doctor',
  },
];
const keyOrder = ['name', 'age', 'address', 'country', 'profession'];

function applyKeyOrder(obj, keyOrder) {
  const res = {};
  for (const key of keyOrder) {
    res[key] = obj[key];
  }
  return res;
}

const result = arr.map(element => applyKeyOrder(element, keyOrder));
console.log(result);

It is important to note that this method assumes that all keys in the keyOrder array exist in the objects. Any fields not present in the array would be omitted in the final result.

Answer 6

Here is a method to achieve this task without the need for an external library:

const arr = [
  {
    'address': 'wellington lane',
    'age': '23',
    'country': 'Australia',
    'name': 'Mike',
    'profession': 'Lawyer',
  },
  {
    'address': 'Street 25',
    'age': '26',
    'country': 'New Zealand',
    'name': 'Parks',
    'profession': 'Engineer',
  },
  {
    'address': 'North cross',
    'age': '29',
    'country': 'Korea',
    'name': 'Wanda',
    'profession': 'Doctor',
  },
];
const keyOrder = ['name', 'age', 'address', 'country', 'profession'];

function applyKeyOrder(obj, keyOrder) {
  const res = {};
  for (const key of keyOrder) {
    res[key] = obj[key];
  }
  return res;
}

const result = arr.map(element => applyKeyOrder(element, keyOrder));
console.log(result);

It is important to note that this method assumes that all keys in the keyOrder array exist in the objects. Any fields not present in the array would be omitted in the final result.

Answer 7

Answer №4

When referencing "SECTION X" as sectionX and "SECTION Y" as sectionY:

const organizeSections = () => {
    return sectionX.map(sectionItem => {
        const result = {};
        sectionY.map(itemLabel => {
            result[itemLabel] = sectionItem[itemLabel];
        })
        return result;
    })
};

console.log(organizeSections())

Answer 8

When referencing "SECTION X" as sectionX and "SECTION Y" as sectionY:

const organizeSections = () => {
    return sectionX.map(sectionItem => {
        const result = {};
        sectionY.map(itemLabel => {
            result[itemLabel] = sectionItem[itemLabel];
        })
        return result;
    })
};

console.log(organizeSections())

Order JSON data based on a predetermined list of keys using JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Learn how to move a div inside another div using drag and drop, ensuring that the entire element moves along with it

Ways to create an angularJS $watch function that is able to recognize modifications in styling

Setting the Date in Angular.js: A Step-by-Step Guide

Using AJAX to assign PHP session variables

What is the method to show text on hover in angularjs?

Another option for authorizing a document

The sub-menu is being obscured by a PDF element in Internet Explorer, causing visibility issues

Google Maps Circle Radius Functionality Malfunctioning

Unlocking the Potential of Checkbox Values in AngularJS

Automatically select all options in MUI Autocomplete by default

Issues stemming from cross-domain AJAX have resulted in errors with Karma and Jasmine

Obtaining information from a local JSON file in AngularJS

How to Retrieve Upload Progress via HTTP Request in PHP

Creating a function in JavaScript to return an Unsubscribe and Array from a Firebase Snapshot Listener in Svelte

Please provide values in the input box, with each value separated by

What is the best way to reset the state to null when the input field is blank?

How can I pull the account creation date stored in MongoDB and display it using Handlebars?

Refresh a function following modifications to an array (such as exchanging values)

Utilizing Ajax to dynamically generate unique ID's for multiple checkboxes

Toggle switch with active state