如何从 fetch API 中获取 JSON 数组的嵌套元素？

Question

我正在尝试在 React Native 中使用 fetch api 从服务器获取一些数据。我怎样才能以 JSON 格式获取它，并显示所有字段，包括嵌套字段？

我已经尝试从 promise 获取数据后转换为 JSON。但是，数据格式不正确。使用邮递员获取相同的数据为我提供了所有填充的数据和字段。

我的抓取 api 看起来像这样：

fetch("https://someurl.com/apps/api/", {
    method: "GET",
    headers: {
      api_key: "somekey",
      "Content-Type": "application/json"
    },
    params: JSON.stringify({
      device_latitude: deviceLat,
      device_longitude: deviceLong
    })
  })
    .then(response => response.json())
    .then(restData => {
      dispatch({
        type: FETCH_REST,
        payload: restData
      });
    })
    .catch(error => {
      console.error(error);
    });

这是我在 reducer 中对 restData 进行控制台登录时来自 fetch api 的响应数据：

[  
   Object {  
      "restID":1,
      "name":"Rest1",
      "restLocation": null
   },
  Object {  
      "restID":2,
      "name":"Rest2",
      "restLocation": null
   }
]

以下是我使用 Postman 调用端点时的结果。

注意：下面的 restLocation 字段有更多数据，当使用上面的提取 api 时不存在：

[  
   {  
      "restID":1,
      "name":"Rest1",
      "restLocation":{  
         "id":2,
         "distance":2
      }
   },
   {  
      "restID":2,
      "name":"Rest2",
      "restLocation":{  
         "id":3,
         "distance":1
      }
   }
]

Answer 1

GET参数应该url编码并放入fetchurl.

例如 GET /test 邮递员 PARAMS foo1=bar1 和 foo2=bar2 应该向 /test?foo1=bar1&foo2=bar2 发送 GET 请求。

我们可以对您的参数 {device_latitude: deviceLat, device_longitude: deviceLong} 进行如下编码：

const url = `https://someurl.com/apps/api/?device_latitude=${deviceLat}&device_longitude=${deviceLong}`;
const fetchableUrl = encodeURI(url);

然后 fetch 以相同的方式但删除 params 因为它们属于 url:

fetch(fetchableUrl, {
    method: "GET",
    headers: {
      api_key: "somekey",
      "Content-Type": "application/json"
    }
})
.then(response => response.json())
.then(restData => {
    dispatch({
        type: FETCH_REST,
        payload: restData
    });
})
.catch(error => {
    console.error(error);
});

如何从 fetch API 中获取 JSON 数组的嵌套元素？

How can I get the nested elements of JSON array from fetch API?

reducers

es6-promise

react-native

redux

fetch-api