What is most performant way to iterate nested javascript objects and render inside jsx

Question

I would like to render this nested JS object inside React component into ol > li > ol > li format, and nested objects should be indented as per level.

JSON Sample data : https://jsfiddle.net/39o8nrpk/

It will be great help if I can get the solution to render this data in a performant way using JavaScript.

{
  "data": {
    "content": "Page Title",
    "url": "/",
    "categories": [
      {
        "href": "/",
        "name": "level 1",
        "category": [

        ]
      },
      {
        "href": "/",
        "name": "level 1",
        "category": [
          {
            "href": "/",
            "name": "level 2",
            "category": [

            ]
          },
          {
            "href": "/",
            "name": "level 2",
            "category": [{
                "href": "/",
                "name": "level 3"
              },
              {
                "href": "/",
                "name": "level 3"
              },
              {
                "href": "/",
                "name": "level 3"
              }
            ]
          },
          {
            "href": "/",
            "name": "level 2",
            "category": [

            ]
          },
          {
            "href": "/",
            "name": "level2",
            "category": [{
                "href": "/",
                "name": "level3"
              },
              {
                "href": "/",
                "name": "level3"
              },
              {
                "href": "/",
                "name": "level3"
              }
            ]
          }
        ]
      }
    ]
  }
}

Answer 1

I did it using this approach.

{categories.map(({ name, href, category }) => {
      return (
        <ol className="level-1">
          <h4><a href={href}>{name}</a></h4>
          {category && category.map(({ name: nameL2, href: hrefL2, category: categoriesL2 }) => {
            return (
                <li>
                  <ul className="level-2"> 
                  <h4><a href={hrefL2} >{nameL2}</a></h4>
                    {categoriesL3 &&
                      categoriesL3.map(({ name: nameL3, href: hrefL3 }) => {
                        return (
                          <li className="level-3">
                            <a href={hrefL3}>{nameL3}</a>
                          </li>
                          )
                        );
                      })}
                  </ul>
                </li>
              )
          })}
        </ol>
      );
    })}

Answer 2

It would be better if you split your code in different components, each one at charge of rendering an specific categories level. Once you have this scenario, maybe you should try to achieve it using recursion , which in my opinion would be the best solution.

const CategoryLevel3 = ({ href, name}) => {
  return (
    <li className="level-3">
      <a href={href}>{name}</a>
    </li>
  );
};

const CategoryLevel2 = ({ name, href, category = [] }) => {
  return (
    <li>
      <ul className="level-2">
        <h4>
          <a href={href}>{name}</a>
        </h4>
        {category.map(({ name, href }) => (
          <CategoryLevel3 href={href} name={name} key={name} />
        ))}
      </ul>
    </li>
  );
};

const CategoryLevel1 = ({ name, href, category = [] }) => {
  return (
    <ol className="level-1" key={name}>
      <h4>
        <a href={href}>{name}</a>
      </h4>
      {category.map(({ name, href, category = [] }) => (
        <CategoryLevel2 name={name} href={href} category={category} key={name} />
      ))}
    </ol>
  );
};

const Categories = ({ categories = [] }) => {
  return (
    <Fragment>
      {categories.map(({ name, href, category }) => (
        <CategoryLevel1 category={category} />
      ))}
    </Fragment>
  );
};