Create a multidimensional list from Array Objects

Question

I am trying to create a multidimensional list from object full of arrays from a rest request in Javascript. The issue is my ability iterate over an array of objects. Can someone give me an example on how to turn this data structure into a JSX component?

I am trying to create a list that is wrapped in a div and looks like:

<div>
<lo>
   <li>
     <ul>
        <li>Row Cell</li>
        <li>Row Cell</li>
     </ul>
   </li>
   <li>
     <ul>
        <li>Row Cell</li>
        <li>Row Cell</li>
     </ul>
   </li>
</lo>
</div>

The data structure looks like this,

The function that is set in the React Component is the following,

createBodyDisplay(){
        var ar = this.state.data.request.body;
        var returnString = '';
        for (var key in ar) {
            console.log(ar);
            if (ar.hasOwnProperty(key)) {
                if(ar instanceof Array){
                    console.log('This is a test to see if there is an array');
                } else if (ar instanceof Object){
                    for (var key1 in ar) {
                        if (ar.hasOwnProperty(key1)) {
                            console.log(ar[key1]);
                        }
                    }


                    console.log(ar);
                } else {
                    console.log('Not sure what this is');
                }

            //  returnString= returnString+'<div>';

            /// var x = numbers.map(Math.sqrt)

            //  console.log(ar[key]);
            //  returnString= returnString+'</div>';
            }
        }

    //  console.log(returnString);

    return returnString;

    }

Answer 1

See sandbox here for live example: https://codesandbox.io/s/confident-heyrovsky-s0zg4

Assuming your data-structure looks something like:

const newData = {
      dogs: [
        { type: "row-cell", value: "Golden" },
        { type: "row-cell", value: "Husky" }
      ],
      cats: [
        { type: "row-cell", value: "Feline" },
        { type: "row-cell", value: "Hairless" }
      ]
    };

We can use Object.entries() to cleanly create an array of arrays, for each key-value pair. Then use .map() to create our outer-ordered-list items. And within each group, we will use another .map() to create the unordered-list-items.

Working code:

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  state = {
    data: {}
  };

  componentDidMount() {
    const newData = {
      dogs: [
        { type: "row-cell", value: "Golden" },
        { type: "row-cell", value: "Husky" }
      ],
      cats: [
        { type: "row-cell", value: "Feline" },
        { type: "row-cell", value: "Hairless" }
      ]
    };
    this.setState({
      data: newData
    });
  }

  createNestedLists = () => {
    const { data } = this.state;
    const lists = Object.entries(data).map(([type, arr]) => {
      return (
        <li>
          <ul>
            {arr.map(item => {
              return (
                <li>
                  {item.type} - {item.value}
                </li>
              );
            })}
          </ul>
        </li>
      );
    });

    return <ol>{lists}</ol>;
  };

  render() {
    return <div>{this.createNestedLists()}</div>;
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);