How can I use JSON object data to populate a text element in response to user action?

Ask the community
, , ,
1

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

In a user-input custom-form that I am trying to design :-

  • I have an address section (text boxes)

  • Where I have a separate Dropdown element for the user to choose their Country

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

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

Additional info:-

  • My custom-form writes data to a database I created

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

//… deleting the bulk of the code here, to save space

{"name":"Zambia","flag":"🇿🇲","code":"ZM","dial_code":"+260"},{"name":"Zimbabwe","flag":"🇿🇼","code":"ZW","dial_code":"+263"}]

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?

  • Also, I have no idea how to CODE either of those options!

Any help would be much appreciated.

2

You could parse the JSON-data back to a DB-Collection-format.
https://www.w3schools.com/js/js_json_parse.asp

Also take a look here onto this post…

3

Thanks a tonne, for your input @russian-dima !

I’m trying to wrap my head around the concepts that are jumping at me, from all the examples/ references you mention, and the ones they are leading me to…

I think it’s going to take me a while to wrap my head around the basics of the problem - looks like I’ve ventured into a domain that is pretty much beyond my present understanding of coding, or rather, the lack thereof!

One particular thing that is bothering me at the moment is:-

  • How do I query the JSON first in response to the dropdown-click > match the “name” id in the JSON with the dropdown choice - and then fetch the corresponding value from the “dial_code” id of the JSON?!

As far as I have explored the examples, I am still not able to locate a scenario which matches/ comes close to this requirement.

Don’t know if I could express my confusion clearly enough…

I’ll keep studying the examples and try to figure out the basic concept better than I do at the moment!

4

Not sure if this is what you want to achieve…try it out…
https://www.media-junkie.com/country-codes

Site-Code:

import {countryCollection} from 'public/Public-Countries.js'

$w.onReady(function () {
    console.log(countryCollection)
    populateDropDown(); 

    $w('#dropdown1').onChange((event)=>{
        findDialCode(event.target.selectedIndex);
    })
});

function populateDropDown() {
 let dropdownOptions = []
 for (var i=0; i<countryCollection.length; i++) {
        dropdownOptions.push({label: countryCollection[i].name , value: countryCollection[i].name},)
    }
    $w('#dropdown1').options=dropdownOptions
}

function findDialCode(index) {
    console.log(countryCollection[index].dial_code)
    $w('#input1').value = countryCollection[index].dial_code
}

JS-File-Code: “Public-Countries.js”

export const countryCollection = [
    {"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"}
]

To understand my code better, take a look again HERE
especialy Yisraels suggestion and the corresponding DEMO.

Good luck.

P.S.: You could also create your own DB instead of a fixed LIST.
You could also fetch the data from an ENDPOINT like this…
https://gist.githubusercontent.com/DmytroLisitsyn/1c31186e5b66f1d6c52da6b5c70b12ad/raw/01b1af9b267471818f4f8367852bd4a2814cbae6/country_dial_info.json
like you mentioned it here…

…and put it automaticaly to your DB.

To know how ENDPOINTs works… take alook here…

More information of how to get (fetch) the Endpoint, see here…

EDIT: Working Fetch-example…
https://russian-dima.wixsite.com/meinewebsite/ip-adress

5

@russian-dima … Wow!!!

Thank you so much for taking all that trouble…

I think your code itself will do the trick for me! (At least it looks like it will, from what I can make out trying to understand the parts of your code, given my limited understanding)
Let me try it out, and get back to you, in case I’m stuck.

Will definitely study the other options and leads you provided, as well.

Much obliged!

6

@bablifarm
I’m curious what you will do with all this information, good luck!

7

@russian-dima - as I guessed, your code was perfect - it’s getting the job done just the way I need it!
Thanks again!!

I’ve just made one small variation (accidentally, as I misunderstood the code initially) - but it’s still working fine…

Just wanted to check with you - whether, for any reason (maybe it might make the process slower?), I should NOT go with the ‘variation’ and stick to your code design, strictly?

My variation:-

  • Instead of uploading the Public-Countries.js as a file to my Wix-Media/Public folder (I guess that’s what you wanted me to do, right?), and then calling the file at the top of the code, with " import { countryCollection } from ‘public/Public-Countries.js’ "…

  • I have actually inserted the JSON object directly into my code panel - with
    export const countryCollection = [
    {…},
    {…}
    ]

  • And then, I’ve left out the “import” part of your code, calling the countryCollection constant directly in the rest of the code.

Should I not do this , for any reason?

As far as I can see, my code is working .

To answer your question, “I’m curious what you will do with all this information”…

Well, it’s a “long story”…:smile:

I work with an organisation that is trying to do experimental work with rural-action and jungle-reconstruction - in an interior part of West Bengal , India .

We have no money … a severe shortage of manpower… and a serious need for a comprehensive website , which showcases the uniqueness of our experiment clearly - but at the same time, acts as an interface for a Farmstay (guesthouse) that we run within the project.

The particular coding-problem in question here is for the " Guesthouse-Reservation Form " that I’ve been trying to design…

Cheers… And thanks again for your support!

8

PS: I also have a fetish for trying to learn new things - and once I give myself a new ‘problem’, I tend to get fixated with it till It’s been resolved… In this case, it’s JavaScript, and all the wonderful things that it can apparently do! :yum::grin:

9

@bablifarm This is the material which good coders are made of. Continue that way and open more doors to new worlds of coding.

As i already mentioned, everything what is shown by me can be modified & expanded a lot. But it’s on you, your imaginations and creativity, what you can create with JS-code.

I’ve just made one small variation…
To go the own way is the best way. On your own track you will learn automaticaly new coding-methods and shematics and also your own coding structure.

And i wish you good luck with your project…

I work with an organisation that is trying to do experimental work with rural-action and jungle-reconstruction - in an interior part of West Bengal , India .