Создать многомерный список из объектов Array

Question

Я пытаюсь создать многомерный список из объекта, полного массивов из запроса на отдых в Javascript. Проблема заключается в моей способности перебирать массив объектов. Может кто-нибудь дать мне пример того, как превратить эту структуру данных в компонент JSX?

Я пытаюсь создать список, который обернут в div и выглядит так:

<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>

Структура данных выглядит следующим образом,

Функция, заданная в компоненте React, следующая,

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

См. Песочницу здесь для живого примера: https://codesandbox.io/s/confident-heyrovsky-s0zg4

Предполагается, что ваша структура данных выглядит примерно так:

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

Мы можем использовать Object.entries() для простого создания массива массивов для каждой пары ключ-значение. Затем используйте .map() для создания элементов внешнего упорядоченного списка. И внутри каждой группы мы будем использовать другие .map() для создания неупорядоченных элементов списка.

Рабочий код:

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);