Controlling dropdown options with JSON response

Ask the community
,
1

I am using a postcode lookup API to retrieve addresses for a postcode provided by the user. Response example:

{
  "postcode": "N1 2AB",
  "latitude": 51.54189,
  "longitude": -0.09913820000000001,
  "addresses": [
    {
      "formatted_address": [
        "1 Braes Street",
        "",
        "",
        "London",
        ""
      ],
      "thoroughfare": "Braes Street",
      "building_name": "",
      "sub_building_name": "",
      "sub_building_number": "",
      "building_number": "1",
      "line_1": "1 Braes Street",
      "line_2": "",
      "line_3": "",
      "line_4": "",
      "locality": "",
      "town_or_city": "London",
      "county": "",
      "district": "Islington",
      "country": "England"
    },
    {
      "formatted_address": [
        "2 Braes Street",
        "",
        "",
        "London",
        ""
      ],
      "thoroughfare": "Braes Street",
      "building_name": "",
      "sub_building_name": "",
      "sub_building_number": "",
      "building_number": "2",
      "line_1": "2 Braes Street",
      "line_2": "",
      "line_3": "",
      "line_4": "",
      "locality": "",
      "town_or_city": "London",
      "county": "",
      "district": "Islington",
      "country": "England"
    }
  ]
}

I have written the following function which calls the API:

// Filename: backend/getaddressio.jsw
import {fetch} from ‘wix-fetch’;

export function getAddresses(postcode) {
const url = ‘https://api.getaddress.io/find/’;
const key = ‘XXXXXXXXXXXXXXXXXX’;

let fullUrl = url + postcode + ‘?api-key=’ + key + ‘&expand=true’;

return fetch(fullUrl, {method: ‘get’})
.then(response => response.json())
.then(json => json.addresses.building_name);
}

…and subsequently am calling the function upon my page loading:

import {getAddresses} from ‘backend/getaddressio’;
import {session} from ‘wix-storage’;
let sessionpostcode = session.getItem(“sessionpostcode”);

$w.onReady(function () {
getAddresses(sessionpostcode)
.then(what do I enter here to control options for #dropdown1?);
});

What do I enter in the two green-marked sections above so that I can update the options of the dropdown with all of the values for building_name in the JSON response?

2

Braes Street, London…eh

try

$w(“#dropdown1”).options = (sessionpostcode);

3

That doesn’t work as .options must be of type array. This would also only seem to insert the user’s given postcode into the options. What I am trying to achieve is to populate the dropdown with all of the returned addresses in the JSON response

4

@iaindowner

Is " sessionpostcode " not the list of addresses ?

what field keys are contained within "sessionpostcode " ?

5

@mikemoynihan99 sessionpostcode is the user’s input for their postcode which is stored within the session. This is parsed through the getAddresses function and returns the JSON response in the above example. With this response, I want to update the dropdown box options with all of the returned addresses (first line only).

6

@iaindowner

Ok so you are returning the postcode to the frontend so that you can store it for some other use, I was wondering why you would be returning something other than the actual list of addresses to the frontend.

So you just need to return the list of addresses to the front end and populate the dropdown using the $w(" #dropdown1 ").options method.

7

have you tried to return the addresses from the backend, something like this

return { json.addresses.building_name };

8

@mikemoynihan99 Thanks. I have been following this example: https://support.wix.com/en/article/corvid-accessing-third-party-services-with-the-fetch-api#backend-service-call

I’ve tried this but doesn’t seem to work:

$w.onReady( function () {
getAddresses(sessionpostcode)
.then(building_name => $w(“#dropdown1”).options = [
{“label” : building_name, “value” : building_name}]);
});

It’s the two sections above in green which seem to be where I am stuck

9

So, where I set the backend function as:

export function getAddresses(postcode) {
 const url = 'https://api.getaddress.io/find/';
 const key = 'XXXXXXXXXXXX';
  let fullUrl = url + postcode + '?api-key=' + key + '&expand=true'; 
  return fetch(fullUrl, {method: 'get'})
    .then(response => response.json())
    .then(json => json.postcode);
}

and front end onReady to:

$w.onReady(function () {
getAddresses(sessionpostcode)
.then(postcode => $w("#dropdown1").options = [
    {"label" : postcode, "value" : postcode}]);
});

…the dropdown is populated with the postcode from the JSON response. It seems i’m having trouble accessing the children of the ‘addresses’ node in the JSON response and populating the dropdown with the multiple returned addresses

10

@Iain

Talk about a pain in the ass to figure out but got it done eventually…

BACKEND CODE

import {fetch} from ‘wix-fetch’;

export function getAddresses(sessionpostcode) {

const url = ‘https://api.getaddress.io/find/’;
const key = ‘XXXXXXXXXX’;
let fullUrl = url + sessionpostcode + ‘?api-key=’ + key + ‘&expand=true’;

return fetch(fullUrl, {“method”: “get”})

.then( (httpResponse) => {

if (httpResponse.ok) {
let addresses = httpResponse.json();

//console.log(addresses);

return addresses;

}
})

}

PAGE CODE

import { getAddresses } from ‘backend/getaddressio’;
import {session} from ‘wix-storage’;
let sessionpostcode = session.getItem(“sessionpostcode”);

$w.onReady( function () {
getAddresses(sessionpostcode)

   .then((getAddressesResults) => { 

        console.log(getAddressesResults);

const uniqueTitles = getUniqueTitles(getAddressesResults.addresses);

            $w("#dropdown1").options = buildOptions(uniqueTitles); 

        });

function getUniqueTitles(items) {

const titlesOnly = items.map(item => item.line_1);

return [… new Set(titlesOnly)];

    }

function buildOptions(uniqueList) {

return uniqueList.map(curr => {

return { label: curr, value: curr };

        }); 

    }

})

11

Genius! It works:


Thanks a lot Mike - massive help.