Package Exports

sort-nested-json

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (sort-nested-json) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

sort-nested-json

You can use sort-nested-json to sort an array containing JavaScript Objects or a JSON String (containing an array).

Install

npm install --save sort-nested-json

Usage

Here is an basic example of using sort-nested-json on an array filled with objects.

import sorter from 'sort-nested-json';

let list = [{  
                "id": 1,
                "firstname": "John",
                "lastname": "Smith"
            },
            {  
                "id": 2,
                "firstname": "Jane",
                "lastname": "Wilson"
            },
            {  
                "id": 3,
                "firstname": "Peter",
                "lastname": "Brown"
            }]

list = sorter.sort(list).desc("firstname")

console.log(list)

list = sorter.sort(list).asc("firstname")

console.log(list)

Here is an example of using sort-nested-json on array filled with JavaScript objects, the sort is executed on a nested value.

import sorter from 'sort-nested-json';

let list = [{  
                id: 1,
                details:{
                    firstname: "John",
                    lastname: "Smith"
                } 
            },
            {  
                id: 2,
                details:{                
                    firstname: "Jane",
                    lastname: "Wilson"
                }
            },
            {  
                id: 3,
                details:{                
                    firstname: "Peter",
                    lastname: "Brown"
                }
            }]

list = sorter.sort(list).desc("id")

console.log(list)            

list = sorter.sort(list).desc("details.firstname")

console.log(list)

list = sorter.sort(list).asc("details.firstname")

console.log(list)

Here is an example of using sort-nested-json within a React Component. The sortWithMemory function returns the previous sort settings with the result. If you provide this result with your second sort request it will automatically switch between ascending (ASC) and descending (DESC) when your sort request is on the same column.

import React, { Component } from "react";
import sorter from "sort-nested-json"

export default class SortExampleComponent extends Component {

    state = {
        sortresult: null
    }

    componentDidMount() {
        const sortresult = sorter.sortWithMemory(exampleList).run("id")
        this.setState({ sortresult })
    }

    sort(orderby) {
        let { sortresult } = this.state
        sortresult = sorter.sortWithMemory(sortresult).run(orderby)
        this.setState({ sortresult })
    }


    render() {

        const { sortresult } = this.state

        return (
            <div>
                <h1>ExampleTable</h1>
                <table>
                    <thead>
                        <tr>
                            <th style={style.th} onClick={() => this.sort("id")}>id</th>
                            <th style={style.th} onClick={() => this.sort("details.firstname")}>first name</th>
                            <th style={style.th} onClick={() => this.sort("details.lastname")}> last name</th>
                        </tr>
                    </thead>
                    <tbody>
                        {sortresult && sortresult.result.map(person =>
                            (<tr>
                                <td style={style.td} >{person.id}</td>
                                <td style={style.td} >{person.details.firstname}</td>
                                <td style={style.td} >{person.details.lastname}</td>
                            </tr>))}
                    </tbody>
                </table>
            </div>
        );
    }
}

const exampleList = [{
    id: 1,
    details: {
        firstname: "John",
        lastname: "Smith"
    }
},
{
    id: 2,
    details: {
        firstname: "Jane",
        lastname: "Wilson"
    }
},
{
    id: 3,
    details: {
        firstname: "Peter",
        lastname: "Brown"
    }
}]

const style = {
    th: {
        cursor: "pointer",
        width: 200,
        border: "1px solid black",
    },
    td: {
        width: 200,
        border: "1px solid #d7d7d7"
    }
}

License

MIT