I have a huge set of data, basically a family tree ranging back to about 800 years old and have a lot of nested parent/child arrays.

I know .map method to loop over array/nested array to a limited size. However, how can thee code be minimalistic for mapping over nested arrays?

FYI: Its a react app.

Sample data:

const complete_date = [
    {
        "fullname": "some name",
        "dob": "",
        "children": [
          {
            "id": "someid",
            "fullname": "some name",
            "dob": "",
            "children": [
              {
                "id": "someid",
                "fullname": "some name",
                "dob": "",
                "children": [
                  {
                    "id": "someid",
                    "fullname": "some name",
                    "dob": "",
                    "children": [
                      {
                        "id": "someid",
                        "fullname": "some name",
                        "dob": "",
                        "children": [
                          {
                            "id": "someid",
                            "fullname": "some name",
                            "dob": ""
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "id": "someid",
                    "fullname": "some name",
                    "dob": "",
                    "children": [
                      {
                        "id": "someid",
                        "fullname": "some name",
                        "dob": "",
                        "children": [
                          {
                            "id": "someid",
                            "fullname": "some name",
                            "dob": ""
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "id": "someid",
                    "fullname": "some name",
                    "dob": "",
                    "children": [
                      {
                        "id": "someid",
                        "fullname": "some name",
                        "dob": "",
                        "children": [
                          {
                            "id": "someid",
                            "fullname": "some name",
                            "dob": "",
                            "children": [
                              {
                                "id": "someid",
                                "fullname": "some name",
                                "dob": "",
                                "children": [
                                  {
                                    "id": "someid",
                                    "fullname": "some name",
                                    "dob": "",
                                    "children": [
                                      {
                                        "id": "someid",
                                        "fullname": "some name",
                                        "dob": "",
                                        "children": [
                                          {
                                            "id": "someid",
                                            "fullname": "some name",
                                            "dob": ""
                                          }
                                        ]
                                      }
                                    ]
                                  },
                                  {
                                    "id": "someid",
                                    "fullname": "some name",
                                    "dob": "",
                                    "children": [
                                      {
                                        "id": "someid",
                                        "fullname": "some name",
                                        "dob": "",
                                        "children": [
                                          {
                                            "id": "someid",
                                            "fullname": "some name",
                                            "dob": ""
                                          }
                                        ]
                                      }
                                    ]
                                  },
                                  {
                                    "id": "someid",
                                    "fullname": "some name",
                                    "dob": "",
                                    "children": [
                                      {
                                        "id": "someid",
                                        "fullname": "some name",
                                        "dob": "",
                                        "children": [
                                          {
                                            "id": "someid",
                                            "fullname": "some name",
                                            "dob": ""
                                          }
                                        ]
                                      }
                                    ]
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      },
                      {
                        "id": "someid",
                        "fullname": "some name",
                        "dob": "",
                        "children": [
                          {
                            "id": "someid",
                            "fullname": "some name",
                            "dob": "",
                            "children": [
                              {
                                "id": "someid",
                                "fullname": "some name",
                                "dob": ""
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
    }
]

Currently I know of writing .map method everytime.

Sample: This is a snippet from the current implementation which is a real pain.

  {complete_data.map((data) => (
  <li>
    {data.fullname}
    <ul className="list-disc">
      {data.children.map((d) => (
        <li className="ml-10">
          {d.fullname}
          {d.children.length
            ? d.children.map((d2) => (
                <ul className="list-disc">
                  <li className="ml-10">
                    {d2.fullname}
                    <ul className="list-disc">
                      {d2.children.length
                        ? d2.children.map((d3) => (
                            <li className="ml-10">
                              {d3.fullname}
                              <ul className="list-disc">
                                {d3.children.length
                                  ? d3.children.map((d4) => (
                                      <li className="ml-10">
                                        {d4.fullname}
                                        <ul className="list-disc">
                                          {d4.children.length
                                            ? d4.children.map(
                                                (d5) => (
                                                  <li className="ml-10">
                                                    {d5.fullname}
                                                  </li>
                                                )
                                              )
                                            : null}
                                        </ul>
                                      </li>
                                    ))
                                  : null}
                              </ul>
                            </li>
                          ))
                        : null}
                    </ul>
                  </li>
                </ul>
              ))
            : null}
        </li>
      ))}
    </ul>
  </li>
))}

Any ideas or help to simplify the process would be immensely appreciated. Thanks.

CodePudding user response：

const List = ({complete_data})=> {
   return (
      <ul className="list-disc">
        {complete_data.map(x=> <Item key={x.id} data={x} />)}
      </ul>
   )
}

const Item = ({data})=> {
   return (
     <li className="ml-10">
         {data.fullname}
         {data.children.length > 0 && (
            <ul className="list-disc">
               {data.children.map((x)=> <Item key={x.id} data={x} />)}
            </ul>
         )}
     </li>
   )
}

CodePudding user response：

These seems a good use case for a recursive function. Start by writing the code for the simplest case (a person does not have children), then call this same function with a map on the children (if any). I didn't try it but could be something like this:

const formatPerson = (data) => {
if (data.children.length) {
    return (
    <li className="ml-10">
        {data.fullname}
        <ul className="list-disc">
            {data.children.map((child) => (<li>{formatPerson(child)}</li>))}
        </ul>
    </li>);
} else {
    return (
    <li className="ml-10">
        {data.fullname}
    </li>
    );
}

}