我如何 return JSON 响应的特定部分？

Question

我在 javascript 中第一次使用 JSON 和 API 调用 - 特别是使用 What3Words 转换为坐标 API。

我了解使用 3 个词搜索 return 一个位置作为对象的基本教程，使用以下代码：

what3words.api.convertToCoordinates("shield.mats.windy").then(function (response) {
            console.log("[convertToCoordinates]", response);
        });

returning JSON 看起来像这样：

{
"country": "GB",
"square": {
    "southwest": {
        "lng": -0.119971,
        "lat": 51.517491
    },
    "northeast": {
        "lng": -0.119927,
        "lat": 51.517518
    }
},
"nearestPlace": "Clerkenwell, London",
"coordinates": {
    "lng": -0.119949,
    "lat": 51.517505
},
"words": "shield.mats.windy",
"language": "en",
"map": "https://w3w.co/shield.mats.windy"
}

然后我如何以编程方式将坐标对象从这个解析为 return 作为字符串并显示在 HTML 文件中？

Answer 1

json 不是字符串，因此您无需解析它即可检索数据。您可以直接访问您需要的字段：例如 response.coordinates.lng 将 return -0.119949。

Answer 2

将 JSON 字符串解析为 object 后，使用如下内容：

const myData = JSON.parse(myJSON);

您将能够编写指向该对象不同部分的指针。

例如

myData.square.northeast.lng
myData.square.northeast.lat
myData.square.southwest.lng
myData.square.southwest.lat

仅使用这些，您可以使用 .textContent 属性.

填充您的 HTML

工作示例：

const myJSON = `

{
  "country": "GB",
  "square": {
      "southwest": {
          "lng": -0.119971,
          "lat": 51.517491
      },
      "northeast": {
          "lng": -0.119927,
          "lat": 51.517518
      }
  },
  "nearestPlace": "Clerkenwell, London",
  "coordinates": {
      "lng": -0.119949,
      "lat": 51.517505
  },
  "words": "shield.mats.windy",
  "language": "en",
  "map": "https://w3w.co/shield.mats.windy"
}

`;

const myData = JSON.parse(myJSON);
const nelng = document.querySelector('table .northeast .longitude');
const nelat = document.querySelector('table .northeast .latitude');
const swlng = document.querySelector('table .southwest .longitude');
const swlat = document.querySelector('table .southwest .latitude');

nelng.textContent = myData.square.northeast.lng;
nelat.textContent = myData.square.northeast.lat;
swlng.textContent = myData.square.southwest.lng;
swlat.textContent = myData.square.southwest.lat;

thead,
td:first-of-type {
    font-weight: bold;
    color: #fff;
    background-color: #3f87a6;
}

tbody {
    background-color: #e4f0f5;
}

table {
    border-collapse: collapse;
    border: 2px solid rgb(200, 200, 200);
    letter-spacing: 1px;
    font-family: sans-serif;
    font-size: .8rem;
}

td,
th {
    border: 1px solid rgb(190, 190, 190);
    padding: 5px 10px;
}

td {
    text-align: center;
}

<table>
  <thead>
    <tr>
      <th></th>
      <th>Longitude</th>
      <th>Latitude</th>
    </tr>
  </thead>
  
  <tbody>
    <tr class="northeast">
      <td>Northeast</td>
      <td class="longitude"></td>
      <td class="latitude"></td>
    </tr>
    
    <tr class="southwest">
      <td>Southwest</td>
      <td class="longitude"></td>
      <td class="latitude"></td>
    </tr>
  </tbody>
</table>

我如何 return JSON 响应的特定部分？

how do i return a specific part of a JSON response?

javascript

rest

json

jsonparser