Отображение и сопоставление нескольких ключей и данных их объектов

Question

У меня есть файл JSON, который мне нужно отобразить и отобразить, но я не уверен, как отобразить структуру, подобную этой, так как она немного отличается.

Ниже приведен мой JSON-файл:

var data = {
"megamenu": [
{
      "name": "level1.2",
      "link": "#",
      "multilevel": {
        "A": [
          {
            "name": "A-one",
            "link": "#"
          }
        ],
        "B": [
          {
            "name": "B-one",
            "link": "#"
          }
        ]
      }
    },
]
}

Функция карты:

{data.megamenu.map((menuitem, index) => (
    <li key={index}>{Object.entries(menuitem.multilevel).length}</li>
))}

Ниже приведен пример https://stackblitz.com/edit/react-8in6yq

Я хочу создать структуру примерно так:

<ul>
        <li>level1.2
        <ul>
            <li>multilevel
            <ul>
                <li>A
              <ul>
                    <li>A-one</li>
                  </ul>
                </li>
                <li>B
                <ul>
                    <li>B-one</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>

Примечание: я знаю, что могу изменить структуру на объект, а не на массив, но это то, что я не могу обработать и изменить,Так что приходится обходиться с этой структурой.

Answer 1

Вам нужно перебрать внутренний multilevels

{data.megamenu.map((menuitem, index) => (
    const innnerItemsDOM = menuitem.multilevel.map((item, index) =>{
       return <li>
                <ul>
                  <li>item.name</li>
                </ul>
              </li>
    })

    return <li> level1.2
     {innnerItemsDOM}
    </li>
))}

Answer 2

Так почему вы не можете сделать что-то вроде:

const Multilevel = ({multilevel}) => (
    <ul>
        {Object.keys(multilevel).map(key => (<li key={key}>{key} /* etc*/</li>))}
    </ul>
);

{data.megamenu.map((menuitem, index) => (
    <li key={menuitem.name}>
        {menuitem.name}
        <ul>
            <li>multilevel
                <Multilevel multilevel={menuitem.multilevel}/>
            </li>
        </ul>
    </li>
))}

Это немного сложно, и я советую вам разделить ваши списки на разные компоненты, чтобы сделать код читабельным.