在 Javascript 中通過多個嵌套數組進行交互

Question

我有以下響應數據： {name: "some Name", hobbies: Array(13), others: Array(17)} 。

我想顯示接收到的數據如下：

名稱——表示為一個簡單的段落。 愛好- 表示為名稱下方的hobbies手風琴 - 其中每個手風琴的標題是相應愛好數組條目中的第一個單詞，正文是整個數組條目。 其他- 再次表示為一個簡單的段落，其中列出了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>
)}