Need help - Populate text-element with Dialling-Codes, based on Country chosen in a dropdown

Ask the community
, , ,
1

Hi,

Disclaimer: - I am a total novice at coding… trying to learn along the way.

In a user input form I am trying to design ~

  • I have an address section (a simple text box)

  • I have a separate Dropdown element , attached to the end of the address section, where the user chooses their Country

  • The options (‘Choices’) for this Dropdown list is created with custom code

My custom code for the Dropdown Menu:-

[Country List FOUND > HERE - I have actually used the js provided in a comment by Daniel Winebush ]

$w.onReady(() => {
$w("#dropdownCountry").options = [
      { value: "Afghanistan", label: "Afghanistan" }, { value: "Albania", label: "Albania" },
 // deleting countries to shorten the code …
      { value: "Zambia", label: "Zambia" }, { value: "Zimbabwe", label: "Zimbabwe" }
  ];
});

I am trying to populate another element (text field) with the appropriate Dialling-Code for the particular country that the user has chosen in the Country Dropdown…

I found the following json, searching through Google, which I feel/am guessing should be ‘useful’ for what I am trying to do…

A JSON dataset of entities containing country name, code, dial (phone) code and flag emoji icon:-

[FOUND HERE > https://gist.github.com/DmytroLisitsyn/1c31186e5b66f1d6c52da6b5c70b12ad ]

[{"name":"Afghanistan","flag":"🇦🇫","code":"AF","dial_code":"+93"},{"name":"Åland Islands","flag":"🇦🇽","code":"AX","dial_code":"+358"},{"name":"Albania","flag":"🇦🇱","code":"AL","dial_code":"+355"}
//…
{"name":"Zambia","flag":"🇿🇲","code":"ZM","dial_code":"+260"},{"name":"Zimbabwe","flag":"🇿🇼","code":"ZW","dial_code":"+263"}]

Unlike the previous code, this one is referencing each item with “name” - instead of “label”… So, I guess I can’t use this to construct my custom Dropdown list? (I tried, and found that it doesn’t work)

Confusions:-

  • Where do I store the JSON - directly in the custom code panel? Or, do I need to make a database collection out of the JSON?

  • How do I ‘call’ the information provided by the json - and make that data populate my textbox?

Maybe I could add the second JSON as a separate piece of code (Function?) ~ and then combine the two (Dropdown Custom List & Country Dialling Code from the JSON) ~ to do what I’m trying to do?

However, I have no idea how to get the two to work together!

Any help would be much appreciated.