How can I convert 1 dimensional array into 2 dimensional array based on certain key in javascript?

Question

My code in javascript like this :

<script type="text/javascript">
    var test = {
        "0": {
            "parent_category_id": "1",
            "parent_category_name": "Asia",
            "id": "4",
            "name": "Japan"
        },
        "1": {
            "parent_category_id": "1",
            "parent_category_name": "Asia",
            "id": "5",
            "name": "Korea"
        },
        "2": {
            "parent_category_id": "1",
            "parent_category_name": "Asia",
            "id": "6",
            "name": "Arab"
        },
        "3": {
            "parent_category_id": "2",
            "parent_category_name": "Europa",
            "id": "7",
            "name": "England"
        },
        "4": {
            "parent_category_id": "2",
            "parent_category_name": "Europa",
            "id": "8",
            "name": "Spain"
        },
        "5": {
            "parent_category_id": "2",
            "parent_category_name": "Europa",
            "id": "9",
            "name": "Italy"
        },
        "6": {
            "parent_category_id": "3",
            "parent_category_name": "America",
            "id": "10",
            "name": "Brazil"
        },
        "7": {
            "parent_category_id": "3",
            "parent_category_name": "America",
            "id": "11",
            "name": "Argentina"
        },
        "8": {
            "parent_category_id": "3",
            "parent_category_name": "America",
            "id": "12",
            "name": "Mexico"
        },
    };
    console.log(test);

</script>

From the code :

parent_category_id = 1, 2, 3

parent_category_name = asia, europa, america

id = 4, 5, 6, 7, 8, 9, 10, 11

name = japan, korea, arab, england, spain, italy, brazil, argentina, mexico

I want to display like this :

asia
   japan
   korea
   arab
europa
   england
   spain
   italy
america
   brazil
   argentina
   mexico

So I need to convert array one dimensional to be array two dimensional to display like that

How can I do it?

Answer 1

You could take a hash table as reference to the categories.

Then iterate the data and assign the values to the same category by checking if the hash table has the specified id. If not create a new category and push the node to the result set.

For the output, you could create some nodes which reflects the nested order of each item.

function output(array, parent) {
    var ul = document.createElement('ul');
    parent.appendChild(ul);
    array.forEach(function (a) {
        var li = document.createElement('li');
        ul.appendChild(li);
        li.appendChild(document.createTextNode(a.name));
        if (a.children && a.children.length) {
            output(a.children, li);
        }
    });
}

var data = { 0: { parent_category_id: "1", parent_category_name: "Asia", id: "4", name: "Japan" }, 1: { parent_category_id: "1", parent_category_name: "Asia", id: "5", name: "Korea" }, 2: { parent_category_id: "1", parent_category_name: "Asia", id: "6", name: "Arab" }, 3: { parent_category_id: "2", parent_category_name: "Europa", id: "7", name: "England" }, 4: { parent_category_id: "2", parent_category_name: "Europa", id: "8", name: "Spain" }, 5: { parent_category_id: "2", parent_category_name: "Europa", id: "9", name: "Italy" }, 6: { parent_category_id: "3", parent_category_name: "America", id: "10", name: "Brazil" }, 7: { parent_category_id: "3", parent_category_name: "America", id: "11", name: "Argentina" }, 8: { parent_category_id: "3", parent_category_name: "America", id: "12", name: "Mexico" } },
    hash = Object.create(null),
    result = [];

Object.keys(data).forEach(function (k) {
    if (!hash[data[k].parent_category_id]) {
        hash[data[k].parent_category_id] = { id: data[k].parent_category_id, name: data[k].parent_category_name, children: [] };
        result.push(hash[data[k].parent_category_id]);
    }
    hash[data[k].parent_category_id].children.push({ id: data[k].id, name: data[k].name });
});

console.log(result);

output(result, document.body);

Answer 2

Countries should be an array since it doesn't have a relevant key.

var test = {
        "0": {
            "parent_category_id": "1",
            "parent_category_name": "Asia",
            "id": "4",
            "name": "Japan"
        },
        "1": {
            "parent_category_id": "1",
            "parent_category_name": "Asia",
            "id": "5",
            "name": "Korea"
        },
        "2": {
            "parent_category_id": "1",
            "parent_category_name": "Asia",
            "id": "6",
            "name": "Arab"
        },
        "3": {
            "parent_category_id": "2",
            "parent_category_name": "Europa",
            "id": "7",
            "name": "England"
        },
        "4": {
            "parent_category_id": "2",
            "parent_category_name": "Europa",
            "id": "8",
            "name": "Spain"
        },
        "5": {
            "parent_category_id": "2",
            "parent_category_name": "Europa",
            "id": "9",
            "name": "Italy"
        },
        "6": {
            "parent_category_id": "3",
            "parent_category_name": "America",
            "id": "10",
            "name": "Brazil"
        },
        "7": {
            "parent_category_id": "3",
            "parent_category_name": "America",
            "id": "11",
            "name": "Argentina"
        },
        "8": {
            "parent_category_id": "3",
            "parent_category_name": "America",
            "id": "12",
            "name": "Mexico"
        }
};
   
var _formatted = {};

for(obj in test){
     
    var region = test[obj].parent_category_name;
    if(typeof _formatted[region] === "undefined"){
        _formatted[region] = [];
    }    
    _formatted[region].push(test[obj].name);
}

console.log(_formatted);