Package Exports

sort-nested-json
sort-nested-json/lib/cjs/index.js
sort-nested-json/lib/esm/index.js

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 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",
  },
};

If you sort on a column which also contains nulls, the functions sortNullsFirst() and sortNullsLast functions has been added. They work simular as the sort function.

License

MIT