从 API 获取的数组对象的解构答案

【问题标题】：De-structuring of an array object fetched from an API从 API 获取的数组对象的解构
【发布时间】：2019-07-04 09:35:26
【问题描述】：

我的任务是使用 url https://randomapi.com/api/d12c99b82acfefae33f7ce9239b57811 从 API 获取数组对象，我需要解构数组并仅将数组中的结果值分配给代码中的变量数据。这是我尝试过的示例

const displayMenu = ({ results } = {}) => {
            const [data] = results[1];
            menu = Object.values(data);
        };

 const fetchAndDisplayMenu = () => {
     const api = 'https://randomapi.com/api/d12c99b82acfefae33f7ce9239b57811';
          fetch(api)
            .then(response => response.json())
            .then((data) => {
                displayMenu();
                });
        };

它带来了你试图解构的数组没有迭代的错误？

从 API 获取的对象如下所示

{
  results: [
    {
      "17651135-1987-4d14-af8e-6dd5d5356cab": {
        id: "17651135-1987-4d14-af8e-6dd5d5356cab",
        price: 4829,
        sample: "https://lorempixel.com/640/480/food",
        origin: "Tanzania"
      },
      "bdeb5dc0-3c6c-4b20-9e4a-7d3c9dd9e969": {
        id: "bdeb5dc0-3c6c-4b20-9e4a-7d3c9dd9e969",
        price: 5786,
        sample: "https://lorempixel.com/640/480/food",
        origin: "Congo Brazzaville"
      },
      "12ca14ea-f791-4390-82bf-3b2db8f20311": {
        id: "12ca14ea-f791-4390-82bf-3b2db8f20311",
        price: 3418,
        sample: "https://lorempixel.com/640/480/food",
        origin: "Seychelles"
      },
      "fb2c0876-03b0-4885-9d40-781393903524": {
        id: "fb2c0876-03b0-4885-9d40-781393903524",
        price: 5411,
        sample: "https://lorempixel.com/640/480/food",
        origin: "Eritrea"
      }
    }
  ],
  info: {
    seed: "5e5bcec11b782295",
    results: "1",
    page: "1",
    version: "0.1",
    time: {
      instruct: 10,
      generate: 5
    }
  }
};

【问题讨论】：

您没有将 data 传递给 yiur 函数。 .then((data) => { displayMenu(data); });
修复后：没有results[1]。 results 数组中只有一个元素。而且那个元素不是数组，所以解构也不起作用。
尝试查看正在获取的对象，我只需要从该对象中捕获结果

标签： javascript

【解决方案1】：

您收到此错误有两个原因：

results[1] 不存在
您没有向displayMenu() 传递任何参数，因此您一开始就没有数据可以使用。

你应该这样写你的代码：

const displayMenu = ({ results } = {}) => {
  const [data] = results;
  const menu = Object.values(data);
  console.log(menu)
};

const fetchAndDisplayMenu = () => {
  const api = 'https://randomapi.com/api/d12c99b82acfefae33f7ce9239b57811';
  fetch(api)
    .then(response => response.json())
    .then(displayMenu);
};

fetchAndDisplayMenu()

【讨论】：