Fill repeater with array ('Stores/Products' additionalInfoSections)

Ask the community
, ,
1

I’m attempting to build a custom product page, and I’m trying to fill a repeater with the additionalInfoSections field in the ‘Stores/Products’ database.
Each product has 2–3 Additional Info Sections.

The code below successfully returns the results into the console log, as seen in this photo

2162×258 79.3 KB

But I am unable to properly fill the repeater with the results using the code below. I get errors saying “The data parameter that is passed to the data method cannot be set to the value [object Object]. It must be of type array.”

I’ve tried using both onItemReady() and forEachItem() with no luck

$w.onReady(async function () {
    product = await $w('#productData').getCurrentItem();

    let AdditionalInfo = []
    AdditionalInfo = product.additionalInfoSections;
    AdditionalInfo.forEach((info) => {
    
        console.log(info)
        //console.log(info.title)
        //console.log(info.description)
        
        $w('#infoRepeater').data = info;
        
        $w("#infoRepeater").forEachItem(($item, itemData) => {
            console.log("Done " + itemData.title)
            $item("#infoTitle").text = itemData.title;
            $item("#infoDescription").html = itemData.description;
        });
    })
})

Any help is appreciated!

2

How does look like your -->“product” - RESULT ? Console-log it!
Come on LMeyer, i know you can do it better!

→ “product” is a public VARIABLE ? Or why without any definition (let/const/var) ???

 product=await $w('#productData').getCurrentItem();

What you can learn from your Error-Message?

“The data parameter that is passed to the data method cannot be set to the value [object Object]. It must be of type array.”

You need an ARRAY! And you have an → OBJECT.

This is what you have …(i think so) :grin:

  {
    "_id": "1",
    "firstName": "John",
    "lastName": "Doe",
    "image": "http://someImageUrl/john.jpg"
  },
  {
    "_id": "2",
    "firstName": "Jane",
    "lastName": "Doe",
    "image": "http://someImageUrl/jane.jpg"
  }

And this is what you want…

[
  {
    "_id": "1",
    "firstName": "John",
    "lastName": "Doe",
    "image": "http://someImageUrl/john.jpg"
  },
  {
    "_id": "2",
    "firstName": "Jane",
    "lastName": "Doe",
    "image": "http://someImageUrl/jane.jpg"
  }
]

Tell me if it worked for you.

3

Figured it out! :partying_face:

First problem: I was trying to fill the repeater with the info variable (an object), when I should have been using the AdditionalInfo variable (an array).

Second problem: From the API I learned that order to fill a repeater, each item must have an _id associated with it. So I created one using the index .

Third problem: I was filling the repeater from within the forEach function on the AdditionalInfo variable (which created duplicates in the console, since it was running once for each item).

The code below works to find the additionalInfoSections field in the ‘Stores/Products’ database, and fill them into a repeater on a custom dynamic product page.

let product;

$w.onReady(async function () {

    product = await $w('#productData').getCurrentItem();

    let AdditionalInfo = []
    AdditionalInfo = product.additionalInfoSections;
    AdditionalInfo.forEach((info, index) => {
        //console.log(info.title)
        //console.log(info.description)
        info._id = "00000" + index.toString(); // Each item needs an ID
    })
    $w('#infoRepeater').data = AdditionalInfo; // Data needs to be an array
    $w("#infoRepeater").onItemReady(($item, itemData) => {
        console.log(itemData)
        $item("#infoTitle").text = itemData.title;
        $item("#infoDescription").html = itemData.description;
    });
})

Hope it helps someone out later

4

Thanks @russian-dima , you were right about the array, I had a few things set up wrong.
I was declaring product in the upper scope, just forgot to include it in my original post, but it is in the answer below!

5

@lmeyer
Yes, already have seen it. I knew you can it better! Your coding skills are good enough to be able to help yourself. And never forget → CONSOLE IS YOUR BEST FRIEND! :wink:

6

@russian-dima Console and Google search are the 2 best friends of every coder :stuck_out_tongue_winking_eye:

7

@lmeyer :stuck_out_tongue_winking_eye:

8

So with this technique- would it be possible to add an additional section that has YouTube URL’s - and then pass the data (as a proper URL) to the repeater that has a video player element on it?

9

Sounds like it could be possible, assuming the additional info section’s description had ONLY the url and nothing else. That way when you set the repeater data as I did above, you set the description (the url) to be the src of a video player .

Something like

$item("#yourVideo").src = itemData.description; 
// description must be only the url, with nothing else

No guarantees though, but give it a shot and let us know! If you have issues you should open your own thread to get the best help.