Building array recursively in Reactjs

Question

I am trying to create a menuTree from fetched arrays in React. My problem is that I don't know how to build my array recursively:

Lets say I do a fetch of a mainUrl and get the array:

[
 {"id":"EU","type":"l","text":"Europe"},
 {"id":"AS","type":"l","text":"Asia"}
]

Since type is "l" i need to do another fetch: mainUrl/EU

Now i get:

[
 {"id":"SP","type":"l","text":"Spain"},
 {"id":"FR","type":"l","text":"France"}
]

Again both types are "l" so I do another fetch: mainUrl/EU/SP

Now i get:

[
 {"id":"MA","type":"t","text":"Madrid"}
]

Since type is now "t" i stop and start again with France and then Asia.

Keeping in mind that i don't know the dept of they children in the array

The my array should look like this:

[
    {
        "id": "EU",
        "type": "l",
        "text": "Europe",
        "children": [
            {
                "id": "SP",
                "type": "l",
                "text": "Spain",
                "children":[
                    {
                        "id": "MA",
                        "type": "t",
                        "text": "Madrid"
                    }
                ]
            },
            {
                "id": "FR",
                "type": "l",
                "text": "France",
                "children": [
                    {
                        "id": "PA",
                        "type": "t",
                        "text": "Paris"
                    }
                ]
            }
        ]
    },
    {
        "id": "AS",
        "type": "l",
        "text": "Asia",
        "children":[...]
    }
]

Hi, Yes, many things, my main problem is that i don't know how to push a child array inside a child object recursively. Then I also nested foreach loops that I got working, but I am trying to figure out how to do it recursively so that the dept of children dose'nt matter. — Gray Dragon
– Gray Dragon, Commented Oct 8, 2019 at 12:39
I know how to print the menuTree array out recursively, Just not how to build the array itself — Gray Dragon
– Gray Dragon, Commented Oct 8, 2019 at 12:40

Maxime Girou · Accepted Answer · 2019-10-08 13:04:17Z

2

const mainUrl = "yourMainUrl"; 

const fetchDataTree = async url => {

  // I assume you will handle the fetch with your own method
  let countryArr = await yourFetchFunction(url);

  for (let key in countryArr) {
   if (countryArr[key].type === "l") {
     countryArr[key].children = await fetchDataTree(url + "/" + countryArr[key].id)
   }
 }

 return countryArr
}

const yourDataTree = await fetchDataTree(mainUrl);

edited Oct 8, 2019 at 13:04

answered Oct 8, 2019 at 12:52

Maxime Girou

1,5703 gold badges18 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user7290573 Over a year ago

Are you sure that will work? What about when the URL needs to be mainUrl/EU/SP?

Maxime Girou Over a year ago

well, i changed "mainUrl + / + id" by "url + / + id", it will work then

Gray Dragon Over a year ago

Thank you so much Maxime Girou! It with worked like a charm

Mojtaba Karimi · Accepted Answer · 2019-10-08 12:59:12Z

const results = fetch("");
        function getChildren(name){
            const fetchData = fetch(name);
            fetchData.forEach(item => {
                if (item.type === "l") {
                    item.children = getChildren(item.id);
                }
            });
            return fetchData;
        }

        results.forEach(item => {
            if (item.type === "l") {
                item.children = getChildren(item.id);
            }
        });

and fetch is like this:

function fetch(u) {
    switch (u){
        case "":
            return [
                {
                    id: "EU",
                    type: "l",
                    text: "Europe"
                },
                {
                    id: "AS",
                    type: "l",
                    text: "Asia"
                }
            ]
        case "EU":
            return [
                {
                    id:"SP",
                    type:"l",
                    text:"Spain"
                },
                {
                    id:"FR",
                    type:"l",
                    text:"France"
                }
            ];
        case "SP":
            return [
                {
                    id:"MA",
                    type:"t",
                    text:"Madrid"
                }
            ];
        default:
            return [];
    }
};

Collectives™ on Stack Overflow

Building array recursively in Reactjs

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related