js-tree-normalizer

A lightweight Javascript library used for normalize and denormalize tree data structure! Required support for ES6 Syntax.

Demo

See demo.html or click here

How to Use

• Download normalizer.js from the package and import it into your javascript project
• Import two functions from normalizer.js, normalizeData and getDenormalizeMapper

Normalized Object Preview

node:{
 "occupied": "the total index occupied by the branch, included the count of all nested children"
 "key": "the index of this node in the normalized result array",
 "parentKey": "the index of the parent node in the normalized result array",
 "childrenPropertyName": "array of indexes of the children node in the normalized result array",
 ...otherProperties
}

Normalize Data (normalizeData)

The return result will be a object of questions and entires.

const {
    result //normalized data array,
    entries //the entries of the normalized data
} = normalizeData( OriginalDataArray, ChildrenPropertyNameString );

Denormalize Data (getDenormalizeMapper)

getDenormalizeMapper returns a callback function for Array.map

const denormalizedData = entries.map(
    getDenormalizeMapper(
        normalizedData, //first parameter take normalizedData array
        childPropertyName, //second parameter take the property name of the nested children
        entities => {...entities}, //third parameter take a callback function for mapping leaf
        (entities, mapper) => ({   //fourth parameter take a callback function for mapping node
          ...entities,
          children: entities.children.map(mapper)
        })
      )
  )
)

//or

const denormalizedData = entries.map(
    getDenormalizeMapper(
        normalizedData, //first parameter take normalizedData array
        childPropertyName, //second parameter take the property name of the nested children
        (entities, mapper) => mapper ?{   //mapper param is not null indicates the node is a leaf
          ...entities,
          children: entities.children.map(mapper)
        } : {...entities }
      )
  )
)

Example

Data HTML Display, (Using Normalized Structure)

• node 1
  • node 1-1
  • node 1-2
    • node 1-2-1
    • node 1-2-2
• node 2

Original Data

[
    {
        "title": "node 1",
        "nodes": [
            {
                "title": "node 1-1",
                "nodes": []
            },
            {
                "title": "node 1-2",
                "nodes": [
                    {
                        "title": "node 1-2-1",
                        "nodes": []
                    },
                    {
                        "title": "node 1-2-2",
                        "nodes": []
                    }
                ]
            }
        ]
    },
    {
        "title": "node 2",
        "nodes": []
    }
]

Normalized Data

{
    "result": [
        {
            "title": "node 1",
            "nodes": [
                1,
                2
            ],
            "occupied": 5,
            "key": 0,
            "parentKey": -1
        },
        {
            "title": "node 1-1",
            "nodes": [],
            "occupied":1,
            "key": 1,
            "parentKey": 0

        },
        {
            "title": "node 1-2",
            "nodes": [
                3,
                4
            ],
            "occupied":3,
            "key": 2,
            "parentKey": 0
        },
        {
            "title": "node 1-2-1",
            "nodes": [],
            "occupied":1,
            "key": 3,
            "parentKey": 2
        },
        {
            "title": "node 1-2-2",
            "nodes": [],
            "occupied":1,
            "key": 4,
            "parentKey": 2
        },
        {
            "title": "node 2",
            "nodes": [],
            "occupied":1,
            "key": 5,
            "parentKey": -1
        }
    ],
    "entries": [
        0,
        5
    ]
}

Denormalized Data

[
    {
        "title": "node 1",
        "nodes": [
            {
                "title": "node 1-1",
                "nodes": [],
                "key": 1,
                "parentKey": 0
            },
            {
                "title": "node 1-2",
                "nodes": [
                    {
                        "title": "node 1-2-1",
                        "nodes": [],
                        "key": 3,
                        "parentKey": 2
                    },
                    {
                        "title": "node 1-2-2",
                        "nodes": [],
                        "key": 4,
                        "parentKey": 2
                    }
                ],
                "key": 2,
                "parentKey": 0
            }
        ],
        "key": 0,
        "parentKey": -1
    },
    {
        "title": "node 2",
        "nodes": [],
        "key": 5,
        "parentKey": -1
    }
]