**Question:
Seeking assistance to correct newbie code for API array parsed to repeater
Product:
Wix Editor
What are you trying to achieve:
Format 4 items of a long list (array). The backend gets the data but I think I’m not converting the unique ID from “applID to _id”. GUI has 4 fields to show the list.
What have you already tried:
Ugh, videos, documentation, samples, ChatGPT, hope… This is the current output:
Additional information:
The + repeater came in with 3 containers but I stripped it to just one, I think that is okay as the list is dynamic.
Existing code:
import { getNihAwards } from ‘backend/nihAwards.jsw’;
// this fetches data but won’t populate repeater - need to format _ID - try… SOMETHIING WRONG!
export function buttonFetch_click(event, $w) {
getNihAwards($w(“#applID”).value)
.then(applID => {
// swap _id property to each object
applID.forEach(item => item._id = item.id);
// feed the data to the repeater
$w(‘#repeater1’).data = $w(‘#applID’);
});
}
$w.onReady(async function () {
try {
console.log("Fetching NIH API Data..."); // Log when the request starts
const data = await getNihAwards();
console.log("NIH API Data Response:", data); // Log the full API response
if (Array.isArray(data) && data.length > 0) {
console.log("NIH Data Exists! Populating repeater...");
// Set repeater data
$w('#repeater1').data = data;
// Define how each item in the repeater should display
$w('#repeater1').onItemReady(($item, itemData, index) => {
console.log(`Populating item ${index}:`, itemData); // Log each item's data
$item('#appID').text = itemData.applID ? itemData.applID : 'No ID available';
$item('#fiscalYear').text = itemData.fiscal_year ? itemData.fiscal_year.toString() : 'No FY info';
$item('#projectNum').text = itemData.proj_num ? itemData.proj_num : 'No Project number';
$item('#awardAmount').text = itemData.award_amount ? `$${itemData.award_amount.toLocaleString()}` : 'No amount available';
});
} else {
console.warn("No data returned from NIH API.");
$w('#errorText').text = 'No NIH awards found.';
$w('#errorText').show();
}
} catch (error) {
console.error("Error fetching NIH API Data:", error);
$w('#errorText').text = 'Failed to load NIH data. Please try again.';
$w('#errorText').show();
}
Sorry DeanAyalon, Thanks for the response. I don’t understand what you mean, what is ’ ’ 'js? The front end file name itself is “nihTest.js”. The backend is “nihAwards,jsw”. I’m not sure why this forum broke the code up in pieces above. Try again:
/*
export function buttonFetch_click(event, $w) {
getNihAwards($w(“#applID”).value)
.then(applID => {
// swap _id property to each object
applID.forEach(item => item._id = item.id);
// feed the data to the repeater
$w(‘#repeater1’).data = $w(‘#applID’);
});
}
$w.onReady(async function () {
try {
console.log(“Fetching NIH API Data…”); // Log when the request starts
const data = await getNihAwards();
console.log(“NIH API Data Response:”, data); // Log the full API response
if (Array.isArray(data) && data.length > 0) {
console.log(“NIH Data Exists! Populating repeater…”);
// Set repeater data
$w(‘#repeater1’).data = data;
// Define how each item in the repeater should display
$w(‘#repeater1’).onItemReady(($item, itemData, index) => {
console.log(Populating item ${index}:, itemData); // Log each item’s data
$item(‘#appID’).text = itemData.applID ? itemData.applID : ‘No ID available’;
$item(‘#fiscalYear’).text = itemData.fiscal_year ? itemData.fiscal_year.toString() : ‘No FY info’;
$item(‘#projectNum’).text = itemData.proj_num ? itemData.proj_num : ‘No Project number’;
$item(‘#awardAmount’).text = itemData.award_amount ? $${itemData.award_amount.toLocaleString()} : ‘No amount available’;
});
} else {
console.warn(“No data returned from NIH API.”);
$w(‘#errorText’).text = ‘No NIH awards found.’;
$w(‘#errorText’).show();
}
} catch (error) {
console.error(“Error fetching NIH API Data:”, error);
$w(‘#errorText’).text = ‘Failed to load NIH data. Please try again.’;
$w(‘#errorText’).show();
}
If I call the object, can I get rid of if/else altogether? ChatGPT gave me a start but that makes mistakes indeed.
It sounds like I need to put the $w(‘#repeater1’).data = data; before I call the object? Is that correct?
Forgive naivety, I did not know this was not an array, rather an object. Sure looked like an array. Apparently the IF statement is not needed, what do I code to just call the Object? Sorry for my lack of syntax knowledge, I’m learning. I’ll make a deal with you, code this to fruition and I’ll get you a $100 gift certificate to the restaurant of your choice. I can learn so much with valid code vs. my early attempts. Does that sound delicious??
I appreciate the offer, but I’m nowhere near Cincinnati, different continent actually. (Did use to live there though, coincidentally)
I would leave the if there, just change its condition:
// Sets the function triggered when items are loaded in the repeater
$w('#repeater1').onItemReady(($item, itemData, index => {
console.log(`Populating item ${index}:`, itemData); // Log each item's data
$item('#appID').text = itemData.applID ? itemData.applID : 'No ID available';
$item('#fiscalYear').text = itemData.fiscal_year ? itemData.fiscal_year.toString() : 'No FY info';
$item('#projectNum').text = itemData.proj_num ? itemData.proj_num : 'No Project number';
$item('#awardAmount').text = itemData.award_amount ? `$${itemData.award_amount.toLocaleString()}` : 'No amount available';
})
$w.onReady(async () => {
// Fetch data from the API
// ...
if (data) // Simply checks if the data object is not empty
// Process data, initialize an array to populate the repeater
// ...
$w('#repeater1').data = // when data is set, the function set for onItemReady is triggered for each item
else {
// ...
$w('#repeater1').collapse() // or .hide()
}
})
Thanks Dean, funny you spend time around here. Let me take a stab at plugging this in and will report back. When complete I’ll post the solution for others to view if needed.
