displaying top 4 products in home page using adobe target

async function fetchAndSendProducts() {
try {
const response = await fetch('med_products.json'); // Await the fetch call
const products = await response.json(); // Await the JSON parsing

// Create a string for the product ids and other attributes
const productIds = products.map(product => product.id).join(",");
const productNames = products.map(product => product.name).join(",");
const productCategoryIds = products.map(product => product.categoryId).join(",");
const productManufacturers = products.map(product => product.manufacturer).join(",");

// Set the target page parameters
const targetPageParams = {
"entity.id": productIds,
"entity.name": productNames,
"entity.categoryId": productCategoryIds,
"entity.manufacturer": productManufacturers
};

// Ensure products are available before sending to Adobe Target
adobe.target.getOffer({
"mbox": "target-global-mbox", // Your mbox name
"params": targetPageParams, // Pass the page parameters here
"success": function(offer) {
// Handle the offer (e.g., apply content changes to the page)
console.log("Offer successfully received:", offer);
adobe.target.applyOffer({
"mbox": "target-global-mbox", // Ensure the same mbox name
"offer": offer // Apply the received offer
});
},
"error": function(error) {
// Handle any error while getting the offer
console.error("Error in getting offer:", error);
}
});
} catch (error) {
console.error('Error fetching products or sending to Adobe Target:', error);
}
}

// Call the function when needed, such as on page load
fetchAndSendProducts();
...................................................................
ca i do like this i even attached the pageload parameters i getting after this