How to Sort JSON Data Based on Property in JavaScript

Question

How to Sort JSON Data Based on Property in JavaScript

I've got a serialized JSON collection:

[
    {
        "_id":"person1",
        "date":"7/20/2014 17:20:09",
        "listed_name":"Tom",
        "name":"Tom",
        "contact_info":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e0a11133e19131f1712501d1113">[email protected]</a>"
    },
    {
        "_id":"person2",
        "date":"7/20/2014 17:20:09",
        "listed_name":"Jane",
        "name":"Jane",
        "contact_info":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8bdbeef9f8e4e5b9cbece6eae2e7a5e8e4e6">[email protected]</a>"
    },
    {
        "_id":"person3",
        "date":"7/20/2014 17:20:09",
        "listed_name":"John",
        "name":"John",
        "contact_info":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="14447166677b7a27547379757d783a777b79">[email protected]</a>"
    }
]

On another page, there is property name information...

["_id", "date", "listed_name"]

The question at hand is...

Using JavaScript, how can I filter the JSON objects to only display columns specified in the second array?

For example: if using this array ["_id"]... how might one use it as a filter to show only the _id data but exclude date, listed_name, name, etc... for all objects?

When filtering with ["_id"] array, the expected console output should be as follows:

person1
person2
person3

javascript arrays json

Answer 1

Answer №1

Assume you have the JSON data stored in a variable.

var jsonData = JSON.parse(incomingData)
var filterKeys = ["name", "age"]

for (var j = 0; j < jsonData.length; ++j) {
    for (var key in filterKeys) {
        console.log(jsonData[j][filterKeys[key]])
    }
}

Answer 2

Assume you have the JSON data stored in a variable.

var jsonData = JSON.parse(incomingData)
var filterKeys = ["name", "age"]

for (var j = 0; j < jsonData.length; ++j) {
    for (var key in filterKeys) {
        console.log(jsonData[j][filterKeys[key]])
    }
}

Answer 3

Answer №2

If you create a small helper function called select (or utilize underscore's _.select) to choose specific properties from an object, then in ES6 it can be written simply as:

input . map(element => select(element, fields))

In simpler terms, elaborated with emphasized words related to the code snippet above:

Take the input and map each element within it to the result of selecting from that element certain specified fields.

Alternatively, using array comprehensions:

[ for (elt of input) select(elt, fields) ]

Or in ES5:

input . map(function(elt) { return select(elt, fields); })

How do you implement the select function? In ES6, you can define it like this:

function select(o, fields) {
    return Object.assign({}, ...(for (p of fields) {[p]: o[p]}));
}

Refer to One-liner to take some properties from object in ES 6 for more insights. The question also suggests non-ES6 alternatives, such as:

function select(o, fields) {
    return fields.reduce(function(result, field) {
        result[field] = o[field];
        return result;
    }, {});
}

Answer 4

If you create a small helper function called select (or utilize underscore's _.select) to choose specific properties from an object, then in ES6 it can be written simply as:

input . map(element => select(element, fields))

In simpler terms, elaborated with emphasized words related to the code snippet above:

Take the input and map each element within it to the result of selecting from that element certain specified fields.

Alternatively, using array comprehensions:

[ for (elt of input) select(elt, fields) ]

Or in ES5:

input . map(function(elt) { return select(elt, fields); })

How do you implement the select function? In ES6, you can define it like this:

function select(o, fields) {
    return Object.assign({}, ...(for (p of fields) {[p]: o[p]}));
}

Refer to One-liner to take some properties from object in ES 6 for more insights. The question also suggests non-ES6 alternatives, such as:

function select(o, fields) {
    return fields.reduce(function(result, field) {
        result[field] = o[field];
        return result;
    }, {});
}

Answer 5

Answer №3

To simplify the array, I would deserialize it first and utilize the .map method to iterate over each item in the array of identifiers that need to be preserved. Then, I would create a new object by copying these identifiers and returning it within the map function. In basic code terms:

var filters = [/* list of identifiers to preserve */];
var filtered = JSON.parse(unfiltered).map(function(currObj) {
  var temp = {};
  for identifier in filters:
    temp[identifier] = currObj[identifier];
  return temp;
});

This process will result in an array of objects that have been filtered and stored in the variable filtered.

Answer 6

To simplify the array, I would deserialize it first and utilize the .map method to iterate over each item in the array of identifiers that need to be preserved. Then, I would create a new object by copying these identifiers and returning it within the map function. In basic code terms:

var filters = [/* list of identifiers to preserve */];
var filtered = JSON.parse(unfiltered).map(function(currObj) {
  var temp = {};
  for identifier in filters:
    temp[identifier] = currObj[identifier];
  return temp;
});

This process will result in an array of objects that have been filtered and stored in the variable filtered.

Answer 7

Answer №4

Appreciate the assistance from everyone, but I managed to find a solution. It may not be the most efficient, but it does the job. Below is the complete code:

    $.getJSON( '/jsonData', function(data) {

            //Storing JSON list data in a variable.
            var listData = data;
            //Getting external query array.
var parsedArray = JSON.parse([storedArray]); //output displayed on console:["_id", "date", "listed_name"]
//Looping through parsedArray to retrieve filters.
for(var i=0;i<parsedArray.length;i++){
    //Assigning array items to a variable.
    var queryKeys = parsedArray[i];
    //Iterating over all JSON data.
    for(var x=0;x<ListData.length;x++){
        //Filtering output by using the queryKeys variable.
        console.log(makerListData[x][queryKeys]);
    }
});

Output on console:

person1
person2
person3
7/20/2014 17:20:09
7/20/2014 17:20:09
7/20/2014 17:20:09
Tom
Jane
John

Answer 8

Appreciate the assistance from everyone, but I managed to find a solution. It may not be the most efficient, but it does the job. Below is the complete code:

    $.getJSON( '/jsonData', function(data) {

            //Storing JSON list data in a variable.
            var listData = data;
            //Getting external query array.
var parsedArray = JSON.parse([storedArray]); //output displayed on console:["_id", "date", "listed_name"]
//Looping through parsedArray to retrieve filters.
for(var i=0;i<parsedArray.length;i++){
    //Assigning array items to a variable.
    var queryKeys = parsedArray[i];
    //Iterating over all JSON data.
    for(var x=0;x<ListData.length;x++){
        //Filtering output by using the queryKeys variable.
        console.log(makerListData[x][queryKeys]);
    }
});

Output on console:

person1
person2
person3
7/20/2014 17:20:09
7/20/2014 17:20:09
7/20/2014 17:20:09
Tom
Jane
John

Answer 9

Answer №5

If you don't mind using a library, lodash can simplify this process:

function selectAttributes(collection, attributes) {
  return _(attributes)
    .map(function(attr) { return _.pluck(collection, attr); })
    .flatten()
    .value();
}

Examples:

selectAttributes(data, ['_id']);
// -> ["person1", "person2", "person3"]

selectAttributes(data, ['_id', 'date', 'listed_name']);
// -> ["person1", "person2", "person3", "7/20/2014 17:20:09", "7/20/2014 17:20:09", "7/20/2014 17:20:09", "Tom", "Jane", "John"]

Answer 10

If you don't mind using a library, lodash can simplify this process:

function selectAttributes(collection, attributes) {
  return _(attributes)
    .map(function(attr) { return _.pluck(collection, attr); })
    .flatten()
    .value();
}

Examples:

selectAttributes(data, ['_id']);
// -> ["person1", "person2", "person3"]

selectAttributes(data, ['_id', 'date', 'listed_name']);
// -> ["person1", "person2", "person3", "7/20/2014 17:20:09", "7/20/2014 17:20:09", "7/20/2014 17:20:09", "Tom", "Jane", "John"]

How to Sort JSON Data Based on Property in JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

VueJS - Input Image Display Issue Causing Browser Slowdown

Error Notification Regarding Java Array Operations

Is there a tool that can help pinpoint the original collection for shared elements across multiple collections?

Revamping an npm package on GitHub

Is there a different npm package that can extract paragraph data since pdf2json npm package is not working properly?

Center-aligned text animation in CSS3

Concealing a div based on empty textboxes using backbone and javascript

Getting the Nth Keys from a Struct in Python

Issues occurring with PhoneGap preventing the execution of AngularJS code

Is it possible to initialize an array literal using variables in the C programming language?

Halting Execution After Placing an Object in Three.js Scene with Javascript

What is the best way to include a class in the <td> element of a dynamic table?

Error encountered due to an unset offset on an array that was previously displayed?

It is not possible for AngularJS to retrieve values using ng-model when ng-repeat is being used

What is the best way to retrieve a list of unchecked checkboxes in a Razor Page model?

What is the best way to extract information from a text file and store it in an array of structures?

The output returned by the `reduce()` method cannot be displayed in HTML within a React component when using the `map()` function

Creating a distinctive vue form component from scratch

Exploring the jQuery Solution for Enhancing Dojo Widget Framework

What is the name of the event triggered when a jQuery UI draggable element is reverting back to its original position?