遍历 Javascript 中的多个嵌套数组

Question

我有以下响应数据： {name: "some Name", hobbies: Array(13), others: Array(17)}.

我想将收到的数据显示如下：

Name -- 表示为一个简单的段落。 Hobbies - 表示为 Name 下方 hobbies 的手风琴 - 其中每个手风琴的标题是各自的第一个单词hobby 数组条目，body 是整个数组条目。 Others - 再次表示为一个简单的段落，它在 Hobbies.

下方列出了 others 数组中的每个值

我尝试了多种访问元素的方法，但都无济于事。到目前为止，我得到了以下结果，但它们与我期望的相去甚远。请假设结果包含我使用 axios.post 并将请求发送到我的 API.

获得的响应

 <div className="searchResults">
                {Object.entries(results).map(([key, value]) =>
                    Object.entries(value).map(([index, value1]) =>
                <p key={index}>
                    {value1}
                </p>
                    ))}
            </div>

Answer 1

如果我理解正确，results 包含对象，例如{name: "some Name", hobbies: Array(13), others: Array(17)}.

如果是这样，您错误地迭代了 results。

解决方法是：

{Object.keys(results).length && (
    <div className="results">
          <p>{results.name}</p>
          <Accordion defaultActiveKey="0" style={{width: '80%'}}>
               {Object.entries(results.hobbies).map(([key, value]) =>
                    <Card key={key}>
                         <Accordion.Toggle as={Card.Header} eventKey="1">
                             {key}
                         </Accordion.Toggle>
                         <Accordion.Collapse eventKey="1">
                             <Card.Body>
                                  {value}
                             </Card.Body>
                         </Accordion.Collapse>
                     </Card>
               )}
          </Accordion>
          {Object.entries(results.others).map(([key, value]) =>
               <p>{value}</p>
          )}
    </div>
)}

遍历 Javascript 中的多个嵌套数组

Interate through multiple nested arrays in Javascript

javascript

html

arrays

reactjs

data-representation