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

Question

I'm playing with JSON and API calls for the first time in javascript - specifically using the What3Words convert to co-ordinates API.

I understand the basic tutorial as far as using a 3 word search to return a location as an object using the following code:

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

the returning JSON looks like this:

{
"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"
}

How might I then programmatically parse the co-ordinates object from this to return as a string and display on the HTML file, for example?

score 3 · Accepted Answer · answered Mar 09 '21 at 16:42

3

the json is not a string so you do not need to parse it in order to retrieve the data. You can directly access the fields you need: response.coordinates.lng will return -0.119949 for example.

answered Mar 09 '21 at 16:42

tstoev

1,415
11
12

1

well the string is a sequences of bytes in that regard anything you deal with is a string of some sort. I meant that a json returned by the promise is a structured object and not a blob of characters that you need to parse in order to pull data/make sense of. – tstoev Mar 09 '21 at 17:37
Relevant: https://stackoverflow.com/questions/54122999/is-json-a-string/54123061 – Rounin Mar 09 '21 at 17:57
1

you are picking the words here. If we want to be accurate JSON is a data format that is string based. Javascipt however uses it to describe objects- which is pretty much the name of the thing. Since in javascript everything is an object of some type, I am referring it as an object. The latter can be somewhat wrong in the general context, but given that I need to use JSON.stringify and JSON.parse to serialize(to string)/deserialize(from object) I tend to refer the datatype as JSON(and not a string). Technically it is a dictionary/map, but definitely not a class(instance). – tstoev Mar 09 '21 at 17:59
its javascript for you. when you lack strict types things are up for interpretation. Don't get too deep into it. Getting the promises right and producing clean code with those is much more productive, than the type philosophy of type-less language mess(if you are not designing an interpreter yourself of course) – tstoev Mar 09 '21 at 18:05

Rounin · Answer 2 · 2021-03-09T17:10:54.710

Once you have parsed the JSON string into an object, using something like:

const myData = JSON.parse(myJSON);

You will be able to write pointers which point to different parts of that object.

E.g.

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

Using only these, you can populate your HTML, using the .textContent property.

Working Example:

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>

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

2 Answers2