What is the best way to organize this JSON Object based on price using Javascript?

Question

What is the best way to organize this JSON Object based on price using Javascript?

Looking to organize a JSON object by sorting based on price from lowest to highest.

{
 "BEY": {
  "1": {
    "price": 2280,
    "airline": "QR",
  },
  "2": {
    "price": 2108,
    "airline": "UA",
  }
 },
 "BKK": {
  "1": {
    "price": 2956,
    "airline": "QR",
  },
  "2": {
    "price": 1718,
    "airline": "WS",
  }
 }
}

The goal is to re-arrange it so that the ticket price becomes the key. Here's an example:

{ 
  1718: {
   "airline" : "WS",
   "IATA_Code" : "BKK"
  },
  2108: {
   "airline" : "UA",
   "IATA_Code" : "BEY"
  },
  2280: {
   "airline" : "QR",
   "IATA_Code" : "BEY"
  },
  2956: {
   "airline" : "QR",
   "IATA_Code" : "BKK"
  }
}

javascript arrays json sorting

Answer 1

Answer №1

There are three obstacles hindering your progress with this task.

To achieve the desired outcome, you must navigate through both the main object and its sub-objects to extract the necessary key-value pairs.
Additionally, organizing an object of objects is not feasible; using an array is a more suitable approach. I have converted your structure into an array of objects for better manipulation.
Parsing your JSON accurately requires eliminating any extraneous commas following the "airline" values. Make sure to reference the correct JSON format provided in the text box before proceeding.

Hence, prior to converting your JSON data, it is crucial to utilize tools like JSLint or similar validators (e.g., JSHint) to confirm the validity of your JSON structure.

var inputJSON = JSON.parse(document.getElementById('json-data').value);
var outputJSON = JSON.stringify(convert(inputJSON), null, 4);

document.body.innerHTML = '<pre>' + outputJSON + '</pre>';

function convert(data) {
  var result = [];
  Object.keys(data).forEach(function(code) {
    Object.keys(data[code]).forEach(function(ticket) {
      var record = {
        'IATA_Code': code
      };
      Object.keys(data[code][ticket]).forEach(function(key) {
        record[key] = data[code][ticket][key];
      });
      result.push(record);
    });
  });
  return result.sort(function(a, b) {
    return a.price > b.price;
  });
};

<textarea id="json-data">
{
  "BEY": {
    "1": { "price": 2280, "airline": "QR" },
    "2": { "price": 2108, "airline": "UA" }
  },
  "BKK": {
    "1": { "price": 2956, "airline": "QR" },
    "2": { "price": 1718, "airline": "WS" }
  }
}
</textarea>

Upon executing the code snippet by clicking the button above, the JSON should be properly formatted as indicated below:

[{
  "IATA_Code": "BKK",
  "price": 1718,
  "airline": "WS"
}, {
  "IATA_Code": "BEY",
  "price": 2108,
  "airline": "UA"
}, {
  "IATA_Code": "BEY",
  "price": 2280,
  "airline": "QR"
}, {
  "IATA_Code": "BKK",
  "price": 2956,
  "airline": "QR"
}]

Answer 2

There are three obstacles hindering your progress with this task.

To achieve the desired outcome, you must navigate through both the main object and its sub-objects to extract the necessary key-value pairs.
Additionally, organizing an object of objects is not feasible; using an array is a more suitable approach. I have converted your structure into an array of objects for better manipulation.
Parsing your JSON accurately requires eliminating any extraneous commas following the "airline" values. Make sure to reference the correct JSON format provided in the text box before proceeding.

Hence, prior to converting your JSON data, it is crucial to utilize tools like JSLint or similar validators (e.g., JSHint) to confirm the validity of your JSON structure.

var inputJSON = JSON.parse(document.getElementById('json-data').value);
var outputJSON = JSON.stringify(convert(inputJSON), null, 4);

document.body.innerHTML = '<pre>' + outputJSON + '</pre>';

function convert(data) {
  var result = [];
  Object.keys(data).forEach(function(code) {
    Object.keys(data[code]).forEach(function(ticket) {
      var record = {
        'IATA_Code': code
      };
      Object.keys(data[code][ticket]).forEach(function(key) {
        record[key] = data[code][ticket][key];
      });
      result.push(record);
    });
  });
  return result.sort(function(a, b) {
    return a.price > b.price;
  });
};

<textarea id="json-data">
{
  "BEY": {
    "1": { "price": 2280, "airline": "QR" },
    "2": { "price": 2108, "airline": "UA" }
  },
  "BKK": {
    "1": { "price": 2956, "airline": "QR" },
    "2": { "price": 1718, "airline": "WS" }
  }
}
</textarea>

Upon executing the code snippet by clicking the button above, the JSON should be properly formatted as indicated below:

[{
  "IATA_Code": "BKK",
  "price": 1718,
  "airline": "WS"
}, {
  "IATA_Code": "BEY",
  "price": 2108,
  "airline": "UA"
}, {
  "IATA_Code": "BEY",
  "price": 2280,
  "airline": "QR"
}, {
  "IATA_Code": "BKK",
  "price": 2956,
  "airline": "QR"
}]

Answer 3

Answer №2

When dealing with multiple entries sharing the same price, it's important to consider your output data structure. Using the price as the key may pose a challenge, but you can overcome this by storing an array for each key to accommodate one or more entries at the same price.

To achieve this, you can utilize the following ES6 code snippet. The use of JSON.parse and JSON.stringify may not be necessary if the object is already available in JavaScript:

var obj = JSON.parse(`{
 "BEY": {
  "1": {
    "price": 2280,
    "airline": "QR"
  },
  "2": {
    "price": 2108,
    "airline": "UA"
  }
 },
 "BKK": {
  "1": {
    "price": 2956,
    "airline": "QR"
  },
  "2": {
    "price": 1718,
    "airline": "WS"
  }
 }
}`);

var result = Object.keys(obj).reduce( (acc, IATA_Code) =>
    Object.keys(obj[IATA_Code]).reduce( (acc, i) => {
        let price = obj[IATA_Code][i].price;
        acc[price] = (acc[price] || []).concat({
            airline: obj[IATA_Code][i].airline, 
            IATA_Code 
        });
        return acc;
    }, acc),
{});

console.log(JSON.stringify(result, null, 2));

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

Answer 4

When dealing with multiple entries sharing the same price, it's important to consider your output data structure. Using the price as the key may pose a challenge, but you can overcome this by storing an array for each key to accommodate one or more entries at the same price.

To achieve this, you can utilize the following ES6 code snippet. The use of JSON.parse and JSON.stringify may not be necessary if the object is already available in JavaScript:

var obj = JSON.parse(`{
 "BEY": {
  "1": {
    "price": 2280,
    "airline": "QR"
  },
  "2": {
    "price": 2108,
    "airline": "UA"
  }
 },
 "BKK": {
  "1": {
    "price": 2956,
    "airline": "QR"
  },
  "2": {
    "price": 1718,
    "airline": "WS"
  }
 }
}`);

var result = Object.keys(obj).reduce( (acc, IATA_Code) =>
    Object.keys(obj[IATA_Code]).reduce( (acc, i) => {
        let price = obj[IATA_Code][i].price;
        acc[price] = (acc[price] || []).concat({
            airline: obj[IATA_Code][i].airline, 
            IATA_Code 
        });
        return acc;
    }, acc),
{});

console.log(JSON.stringify(result, null, 2));

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

What is the best way to organize this JSON Object based on price using Javascript?

Answer №1

Answer №2

Similar questions

Basic library using babel, TypeScript, and webpack - Error: (...) is not a recognized function; within Object.<anonymous>

The Blueimp File Uploader seems to be sending numerous submissions at once

Guide to dynamically using array.map based on a condition in React

Mastering image focus with javascript: A comprehensive guide

Tips for resolving the issue: 'Unhandled Promise Rejection: Error: Unable to resolve bare specifier "app.js" from http://localhost:3000/'

Present array information in a Vue.js interface

Tips for fixing a missing page issue in an Angular 2 boilerplate

Developing customized tools for twitch broadcasters

What sets apart posting data through an HTML form submission from posting data through an Ajax request?

'Without the need to refresh the page, assign a JavaScript variable from JSP on the server side.'

javascript functionality may be affected in Internet Explorer and Firefox following the upgrade to jquery version 1.8.3

Is there a way for me to retrieve the name and extension of an attached file in an input field of type "text"?

What is the process for inputting data into a Inertia component?

Is there a way to retrieve MongoDB count results in Node.js using a callback function?

Wrapping an array into a string in Laravel: a step-by-step guide

What is the best way to add a multiselect option in Django to display detailed information for each selected item

looking to get into deeper levels of JSON data with json.load

What is the best way to apply a class to a button in Angular when clicking on

Incorporate npm libraries into vanilla JavaScript for HTML pages

Exploring ways to iterate through an array of objects to extract specific values