Hello everyone,
I would like to find a solution to display results from a Webhook.
I receive the information from an API like that
[{"idTech":113878,"iderp":20935,"clientName":"Bilbon SAQUET"},
{"idTech":114578,"iderp":222235,"clientName":"gANDALF"}]
The result is displayed correctly in the console :
Array(20)
0:{…}
idTech:1724
iderp:2847
clientName:“MCM”
shopCode:“GNAREBF”
postCode:“69400”
city:“LUCENO”
1:{…}
idTech:3749
iderp:5578
clientName:“LORRAINE”
shopCode:“FVUXXX”
postCode:“57000”
city:“METZ”
But now i want to display these results in adropdown with options
for example a dropdown list with the clientName
“MCM
LORRAINE…”
Can you help me ?
On my page, this is the code :
import { getGroupe } from 'backend/fetchFile'
$w.onReady(function () {
});
export function searchButton_click(event) {
getGroupe()
.then((json) => {
console.log(json);
let count = json.length;
for (var e = 0; e < count; e++) {
let idTech = json[e].idTech;
let clientName = json[e].clientName;
let code = json[e].shopCode;
let postCode = json[e].postCode;
let city = json[e].city;
$w('#test').text = "IDTECH = " + idTech + "\n NOM = " + clientName + "\n code = " + clientName;
}
});
}
The Backend “fetchFile.jsw”
which is imported in the main page is :
import { fetch } from 'wix-fetch';
export async function getGroupe() {
let url = "https://mcsapikXSGFHDFHSDSHD/api/Customers?clientName=saquet";
return fetch(url, {"method":"get"})
.then((httpResponse)=>{
if(httpResponse.ok){
return httpResponse.json();
} else{
return Promise.reject("Fetch did not succeed");
}
})
}
Could you help me ?
I have modified my topic
because it wasn’t clear,
Do you think that is clear ?
To assign choices to a dropdown, you can use this piece of code:
const dropDownOptions = json.map(client => ({“label”: client.clientName , “value”: client.idTech}));
$w(‘#dropdownClient’).options = dropDownOptions;
1 Like
Thank you very much Webstudioflip
On the same moment i find a solution similar
there is my code
export function searchButton_click(event) {
getGroupe()
.then((json) => {
//const groupeData=[json];
//console.log("TEST" + json[0].idTech);
let count = json.length;
console.log("total=" + count);
if(count > 10){count=10;}
for (var e = 0; e < count; e++) {
let idTech = json[e].idTech.toString();
let clientName = json[e].clientName;
let code = json[e].shopCode;
let postCode = json[e].postCode;
let city = json[e].city;
console.log("idTech=" + idTech);
console.log("clientName=" + clientName);
console.log("code=" + code);
console.log("postCode=" + postCode);
console.log("city=" + city);
let opts = $w("#inputVille").options;
let x = (e).toString();
opts.push({ label: (clientName) , value: idTech});
$w("#inputVille").options = opts;
}
});
}
Now my dropdown works.
But i have an other question :
For example
the customer chosen LORRAINE on the dropdown
he clic on the “buttonville”
and i display the “repeaterGroup” with all information of his choice
example :
he clic on “LORRAINE”
I display on the repeater :
idTech:3749
iderp:5578
clientName:“LORRAINE”
shopCode:“FVUXXX”
postCode:“57000”
city:“METZ”
Thank you very much
Regarding the second question, I did not understand you. If you only need to show 1 card, then you don’t need a repeater. You can simply display a box with text fields.
Your code can be optimized like this:
let data = [];
export function searchButton_click(event) {
$w("#errorMessage").hide();
getGroupe()
.then((json) => {
if (!json?.length) throw "Missing data";
data = json;
let count = json.length;
if (count > 10) { count = 10; }
let opts = [];
for (let e = 0; e < count; e++) {
const idTech = json[e].idTech.toString();
let clientName = json[e].clientName;
opts.push({ label: (clientName), value: idTech });
}
$w("#inputVille").options = opts;
})
.catch(error => {
$w("#errorMessage").text = error;
$w("#errorMessage").show();
})
}
export function inputVille_change(event) {
$w("#errorMessage").hide();
const selectedData = data.find(e => e.idTech === event.target.value);
if (!selectedData) {
$w("#errorMessage").text = "Error selected data";
$w("#errorMessage").show();
$w("#box").collapse();
}
$w("#text1").text = "idTech: " + selectedData.idTech;
$w("#text2").text = "clientName: " + selectedData.clientName;
$w("#text3").text = "postCode: " + (selectedData.postCode ?? "N/A");
$w("#box").expand();
}
Hello webstudioflip
Thank you very much for your help.
You are right !
I don’t nead repeater
A box it is good for me
I try your code, and it seems good
Just i have nothing when i change the option of the dropdown.
when I change option in the dropdown, nothing happens.
However, the drop-down list is full of the right information,
The drop-down list is called “inputVille” like in the function (so i don"t understand)
I put a console.log(“hello”) just after opening the function (see the code below)
to verify if the function is called
and I have nothing in the backlog.
so the function doesn’t work.
import { getGroupe } from 'backend/fetchFile';
$w.onReady(function () { });
let data = [];
export function searchButton_click(event) {
$w("#errorMessage").hide();
getGroupe()
.then((json) => {
if (!json?.length) throw "Missing data";
data = json;
let count = json.length;
if (count > 10) { count = 10; }
let opts = [];
for (let e = 0; e < count; e++) {
const idTech = json[e].idTech.toString();
let clientName = json[e].clientName;
opts.push({ label: (clientName), value: idTech });
}
$w("#inputVille").options = opts;
})
.catch(error => {
$w("#errorMessage").text = error;
$w("#errorMessage").show();
})
}
export function inputVille_change(event) {
console.log("hello");
$w("#errorMessage").hide();
const selectedData = data.find(e => e.idTech === event.target.value);
console.log("selectdata = " + selectedData);
if (!selectedData) {
$w("#errorMessage").text = "Error selected data";
$w("#errorMessage").show();
$w("#box").collapse();
}
$w("#idtech").value = selectedData.idTech;
$w("#nomGroupe").text = selectedData.clientName;
$w("#cpGroupe").text = (selectedData.postCode ?? "N/A");
$w("#cityGroupe").text = selectedData.idTech;
console.log("idselect = " + selectedData.idTech);
$w("#box").expand();
}
Do you have an idea?
You must add an event handler function for the dropdown list (using the Events Handlers block, or through code).
I feel more comfortable using everything in code. Below is an example of the modified code:
import { getGroupe } from 'backend/fetchFile';
let data = [];
$w.onReady(function () {
addEvents();
});
function addEvents() { // when using this approach, remove the functions from the "Events Handlers block"
$w("#inputVille").onChange(inputVille_change);
$w("#searchButton").onClick(searchButton_click);
}
function searchButton_click(event) {
$w("#errorMessage").hide();
getGroupe()
.then((json) => {
if (!json?.length) throw "Missing data";
data = json;
let count = json.length;
if (count > 10) { count = 10; }
let opts = [];
for (let e = 0; e < count; e++) {
const idTech = json[e].idTech.toString();
let clientName = json[e].clientName;
opts.push({ label: (clientName), value: idTech });
}
$w("#inputVille").options = opts;
})
.catch(error => {
$w("#errorMessage").text = error;
$w("#errorMessage").show();
})
}
function inputVille_change(event) {
console.log("hello");
$w("#errorMessage").hide();
const selectedData = data.find(e => e.idTech === event.target.value);
console.log("selectdata = " + selectedData);
if (!selectedData) {
$w("#errorMessage").text = "Error selected data";
$w("#errorMessage").show();
$w("#box").collapse();
}
$w("#idtech").value = selectedData.idTech;
$w("#nomGroupe").text = selectedData.clientName;
$w("#cpGroupe").text = (selectedData.postCode ?? "N/A");
$w("#cityGroupe").text = selectedData.idTech;
console.log("idselect = " + selectedData.idTech);
$w("#box").expand();
}
Thank you very much,
Now i have the “hello” on the console log.
So the function is called
But there is still a problem because the selectdata is undefined
The console log write “selectdata = undefined”
Why the value is undefined ? It s strange because the dropdown works so the data is ok. I don’t understand
I just had a conclusive result by sharing my code with chatgpt,
Here is his proposal that works
Does that sound good to you?
import { getGroupe } from 'backend/fetchFile';
let data = [];
$w.onReady(function () {
addEvents();
});
function addEvents() {
$w("#inputVille").onChange(inputVille_change);
$w("#searchButton").onClick(searchButton_click);
}
function searchButton_click(event) {
$w("#errorMessage").hide();
getGroupe()
.then((json) => {
if (!json?.length) throw "Missing data";
data = json;
let count = json.length;
if (count > 10) { count = 10; }
let opts = [];
for (let e = 0; e < count; e++) {
const idTech = json[e].idTech.toString();
let clientName = json[e].clientName;
opts.push({ label: (clientName), value: idTech });
}
$w("#inputVille").options = opts;
console.log("Options loaded: ", opts); // Log des options chargées
})
.catch(error => {
$w("#errorMessage").text = error;
$w("#errorMessage").show();
})
}
function inputVille_change(event) {
console.log("Input Ville changed, value: ", event.target.value); // Log de la valeur sélectionnée
$w("#errorMessage").hide();
const selectedData = data.find(e => e.idTech.toString() === event.target.value);
console.log("selectedData: ", selectedData); // Log des données sélectionnées
if (!selectedData) {
$w("#errorMessage").text = "Error selected data";
$w("#errorMessage").show();
$w("#box").collapse();
return;
}
$w("#idtech").value = selectedData.idTech;
$w("#nomGroupe").text = selectedData.clientName;
$w("#cpGroupe").text = (selectedData.postCode ?? "N/A");
$w("#cityGroupe").text = selectedData.idTech;
console.log("idselect: ", selectedData.idTech); // Log de l'idTech sélectionné
$w("#box").expand();
}```