Egert Aia
Reputation: 469
Javascript generate array from given array using recursion
Let's say I had an API call, which gives me result in three objects.
Example data, which i generated is here: https://pastebin.com/TSPLP8yf
How would i go into generating a full array list in javascript?
function generateNewSectorList(sectors, newList) {
for (var i = 0; i < sectors.length; i++){
var obj = sectors[i];
newList.push(obj);
if (hasChildren(obj)) {
for (var j = 0; j < obj.Children.length; j++) {
newList = generateNewSectorList(obj.Children[j], newList);
}
}
}
return newList;
}
This is where I am right now.
This is first initialized with data on that pastebin link and empty array ( [] ).
Function hasChildren is following:
function hasChildren(obj) {
if (obj.Children.length === 0) {
return false;
}
return true;
}
In the end i need that list to be so that whenever there is a children element, it's name should have an extra in front of it compared to it's parent.
The elements are sorted in correct order already on the backend.
Reason for using recursion is that right now there is 3 layers of elements: Parent, Children and GrandChildren, but I would like the application work even, when there is 4 or more layers.
If there were no fourth layer I would not go with recursion, and just have three for-cycles inside the method.
Upvotes: 2
Views: 88
Answers (1)
llama
Reputation: 2537
"In the end i need that list to be so that whenever there is a children element, it's name should have an extra
in front of it compared to it's parent."
All you need to do is pass in a string, and add to it on each recursive call.
EDIT: I missed that you were handling the recursion incorrectly. The function expects an array, so that's what you need to pass. No need for the inner loop.
function generateNewSectorList(sectors, newList, indent) {
for (var i = 0; i < sectors.length; i++){
var obj = sectors[i];
// I guess this is where you want the indentation?
obj.Name = indent + obj.Name;
newList.push(obj);
if (hasChildren(obj)) {
newList = generateNewSectorList(
obj.Children,
newList,
indent + " " // Increase the indentation
);
}
}
}
return newList;
}
So then the first call will pass an empty string, or whatever amount of indentation you want to start with.
generateNewSectorList(data, [], "");
Here's a demo:
setTimeout(function() {
const div = document.querySelector("div");
const res = generateNewSectorList(data, [], "");
res.forEach(obj => div.insertAdjacentHTML("beforeend", obj.Name + "<br>"))
}, 100);
function generateNewSectorList(sectors, newList, indent) {
for (var i = 0; i < sectors.length; i++) {
var obj = sectors[i];
// I guess this is where you want the indentation?
obj.Name = indent + obj.Name;
newList.push(obj);
if (hasChildren(obj)) {
newList = generateNewSectorList(
obj.Children,
newList,
indent + " " // Increase the indentation
);
}
}
return newList;
}
function hasChildren(obj) {
if (obj.Children.length === 0) {
return false;
}
return true;
}
var data = [{
"Children": [{
"Children": [],
"Forms": [],
"SectorId": 4,
"Name": "Construction materials",
"ParentSectorId": 1
},
{
"Children": [],
"Forms": [],
"SectorId": 5,
"Name": "Electronics and Optics",
"ParentSectorId": 1
},
{
"Children": [{
"Children": [],
"Forms": [],
"SectorId": 23,
"Name": "Bakery & confectionery products",
"ParentSectorId": 6
},
{
"Children": [],
"Forms": [],
"SectorId": 24,
"Name": "Beverages",
"ParentSectorId": 6
},
{
"Children": [],
"Forms": [],
"SectorId": 25,
"Name": "Fish & fish products",
"ParentSectorId": 6
},
{
"Children": [],
"Forms": [],
"SectorId": 26,
"Name": "Meat & meat products",
"ParentSectorId": 6
},
{
"Children": [],
"Forms": [],
"SectorId": 27,
"Name": "Milk & dairy products",
"ParentSectorId": 6
},
{
"Children": [],
"Forms": [],
"SectorId": 28,
"Name": "Other (Food)",
"ParentSectorId": 6
},
{
"Children": [],
"Forms": [],
"SectorId": 29,
"Name": "Sweets & snack food",
"ParentSectorId": 6
}
],
"Forms": [],
"SectorId": 6,
"Name": "Food and Beverage",
"ParentSectorId": 1
},
{
"Children": [{
"Children": [],
"Forms": [],
"SectorId": 30,
"Name": "Bathroom/sauna",
"ParentSectorId": 7
},
{
"Children": [],
"Forms": [],
"SectorId": 31,
"Name": "Bedroom",
"ParentSectorId": 7
},
{
"Children": [],
"Forms": [],
"SectorId": 32,
"Name": "Children’s room",
"ParentSectorId": 7
},
{
"Children": [],
"Forms": [],
"SectorId": 33,
"Name": "Kitchen",
"ParentSectorId": 7
},
{
"Children": [],
"Forms": [],
"SectorId": 34,
"Name": "Living room",
"ParentSectorId": 7
},
{
"Children": [],
"Forms": [],
"SectorId": 35,
"Name": "Office",
"ParentSectorId": 7
},
{
"Children": [],
"Forms": [],
"SectorId": 36,
"Name": "Other (Furniture)",
"ParentSectorId": 7
},
{
"Children": [],
"Forms": [],
"SectorId": 37,
"Name": "Outdoor",
"ParentSectorId": 7
},
{
"Children": [],
"Forms": [],
"SectorId": 38,
"Name": "Project furniture",
"ParentSectorId": 7
}
],
"Forms": [],
"SectorId": 7,
"Name": "Furniture",
"ParentSectorId": 1
},
{
"Children": [{
"Children": [],
"Forms": [],
"SectorId": 39,
"Name": "Machinery components",
"ParentSectorId": 8
},
{
"Children": [],
"Forms": [],
"SectorId": 40,
"Name": "Machinery equipment/tools",
"ParentSectorId": 8
},
{
"Children": [],
"Forms": [],
"SectorId": 41,
"Name": "Manufacture of machinery",
"ParentSectorId": 8
},
{
"Children": [],
"Forms": [],
"SectorId": 42,
"Name": "Maritime",
"ParentSectorId": 8
},
{
"Children": [],
"Forms": [],
"SectorId": 43,
"Name": "Aluminium and steel workboats",
"ParentSectorId": 8
},
{
"Children": [],
"Forms": [],
"SectorId": 44,
"Name": "Boat/Yacht building",
"ParentSectorId": 8
},
{
"Children": [],
"Forms": [],
"SectorId": 45,
"Name": "Ship repair and conversion",
"ParentSectorId": 8
},
{
"Children": [],
"Forms": [],
"SectorId": 46,
"Name": "Metal structures",
"ParentSectorId": 8
},
{
"Children": [],
"Forms": [],
"SectorId": 47,
"Name": "Other (Machinery)",
"ParentSectorId": 8
},
{
"Children": [],
"Forms": [],
"SectorId": 48,
"Name": "Repair and maintenance service",
"ParentSectorId": 8
}
],
"Forms": [],
"SectorId": 8,
"Name": "Machinery",
"ParentSectorId": 1
},
{
"Children": [{
"Children": [],
"Forms": [],
"SectorId": 49,
"Name": "Construction of metal structures",
"ParentSectorId": 9
},
{
"Children": [],
"Forms": [],
"SectorId": 50,
"Name": "Houses and buildings",
"ParentSectorId": 9
},
{
"Children": [],
"Forms": [],
"SectorId": 51,
"Name": "Metal products",
"ParentSectorId": 9
},
{
"Children": [],
"Forms": [],
"SectorId": 52,
"Name": "Metal works",
"ParentSectorId": 9
},
{
"Children": [],
"Forms": [],
"SectorId": 53,
"Name": "CNC-machining",
"ParentSectorId": 9
},
{
"Children": [],
"Forms": [],
"SectorId": 54,
"Name": "Forgings, Fasteners",
"ParentSectorId": 9
},
{
"Children": [],
"Forms": [],
"SectorId": 55,
"Name": "Gas, Plasma, Laser cutting",
"ParentSectorId": 9
},
{
"Children": [],
"Forms": [],
"SectorId": 56,
"Name": "MIG, TIG, Aluminum welding",
"ParentSectorId": 9
}
],
"Forms": [],
"SectorId": 9,
"Name": "Metalworking",
"ParentSectorId": 1
},
{
"Children": [{
"Children": [],
"Forms": [],
"SectorId": 57,
"Name": "Packaging",
"ParentSectorId": 10
},
{
"Children": [],
"Forms": [],
"SectorId": 58,
"Name": "Plastic goods",
"ParentSectorId": 10
},
{
"Children": [],
"Forms": [],
"SectorId": 59,
"Name": "Plastic processing technology",
"ParentSectorId": 10
},
{
"Children": [],
"Forms": [],
"SectorId": 60,
"Name": "Blowing",
"ParentSectorId": 10
},
{
"Children": [],
"Forms": [],
"SectorId": 61,
"Name": "Moulding",
"ParentSectorId": 10
},
{
"Children": [],
"Forms": [],
"SectorId": 62,
"Name": "Plastics welding and processing",
"ParentSectorId": 10
},
{
"Children": [],
"Forms": [],
"SectorId": 63,
"Name": "Plastic profiles",
"ParentSectorId": 10
}
],
"Forms": [],
"SectorId": 10,
"Name": "Plastic and Rubber",
"ParentSectorId": 1
},
{
"Children": [{
"Children": [],
"Forms": [],
"SectorId": 64,
"Name": "Advertising",
"ParentSectorId": 11
},
{
"Children": [],
"Forms": [],
"SectorId": 65,
"Name": "Book/Periodicals printing",
"ParentSectorId": 11
},
{
"Children": [],
"Forms": [],
"SectorId": 66,
"Name": "Labelling and packaging printing",
"ParentSectorId": 11
}
],
"Forms": [],
"SectorId": 11,
"Name": "Printing",
"ParentSectorId": 1
},
{
"Children": [{
"Children": [],
"Forms": [],
"SectorId": 67,
"Name": "Clothing",
"ParentSectorId": 12
},
{
"Children": [],
"Forms": [],
"SectorId": 68,
"Name": "Textile",
"ParentSectorId": 12
}
],
"Forms": [],
"SectorId": 12,
"Name": "Textile and Clothing",
"ParentSectorId": 1
},
{
"Children": [{
"Children": [],
"Forms": [],
"SectorId": 69,
"Name": "Other (Wood)",
"ParentSectorId": 13
},
{
"Children": [],
"Forms": [],
"SectorId": 70,
"Name": "Wooden building materials",
"ParentSectorId": 13
},
{
"Children": [],
"Forms": [],
"SectorId": 71,
"Name": "Wooden houses",
"ParentSectorId": 13
}
],
"Forms": [],
"SectorId": 13,
"Name": "Wood",
"ParentSectorId": 1
}
],
"Forms": [],
"Parent": null,
"SectorId": 1,
"Name": "Manufacturing",
"ParentSectorId": null
},
{
"Children": [{
"Children": [],
"Forms": [],
"SectorId": 14,
"Name": "Business Services",
"ParentSectorId": 2
},
{
"Children": [],
"Forms": [],
"SectorId": 15,
"Name": "Engineering",
"ParentSectorId": 2
},
{
"Children": [],
"Forms": [],
"SectorId": 16,
"Name": "Tourism",
"ParentSectorId": 2
},
{
"Children": [],
"Forms": [],
"SectorId": 17,
"Name": "Translation Services",
"ParentSectorId": 2
},
{
"Children": [{
"Children": [],
"Forms": [],
"SectorId": 72,
"Name": "Data processing, Web portals, E-marketing",
"ParentSectorId": 18
},
{
"Children": [],
"Forms": [],
"SectorId": 73,
"Name": "Programming, Consultancy",
"ParentSectorId": 18
},
{
"Children": [],
"Forms": [],
"SectorId": 74,
"Name": "Software, Hardware",
"ParentSectorId": 18
},
{
"Children": [],
"Forms": [],
"SectorId": 75,
"Name": "Telecommunications",
"ParentSectorId": 18
}
],
"Forms": [],
"SectorId": 18,
"Name": "Information Technology and Telecommunications",
"ParentSectorId": 2
},
{
"Children": [{
"Children": [],
"Forms": [],
"SectorId": 76,
"Name": "Air",
"ParentSectorId": 19
},
{
"Children": [],
"Forms": [],
"SectorId": 77,
"Name": "Rail",
"ParentSectorId": 19
},
{
"Children": [],
"Forms": [],
"SectorId": 78,
"Name": "Road",
"ParentSectorId": 19
},
{
"Children": [],
"Forms": [],
"SectorId": 79,
"Name": "Water",
"ParentSectorId": 19
}
],
"Forms": [],
"SectorId": 19,
"Name": "Transport and Logistics",
"ParentSectorId": 2
}
],
"Forms": [],
"Parent": null,
"SectorId": 2,
"Name": "Service",
"ParentSectorId": null
},
{
"Children": [{
"Children": [],
"Forms": [],
"SectorId": 20,
"Name": "Creative Industries",
"ParentSectorId": 3
},
{
"Children": [],
"Forms": [],
"SectorId": 21,
"Name": "Energy technology",
"ParentSectorId": 3
},
{
"Children": [],
"Forms": [],
"SectorId": 22,
"Name": "Environment",
"ParentSectorId": 3
}
],
"Forms": [],
"Parent": null,
"SectorId": 3,
"Name": "Other",
"ParentSectorId": null
}
];<div></div>Upvotes: 2
Related Questions
- returning an array using recursion
- JS array recursion
- Recursively create a nested array
- recursion in javascript making array, from codeacademy
- How to create an array of a given value recursively?
- Recursive Javascript Array
- Javascript recursion with array
- Recursive algorithm to build nested arrays
- JavaScript array recursion without generators
- Creating a List Object from Array in Javascript