For each object Javascript

Question

hope all is fine for you I'm a beginner in javascript and i'm trying to integrate a video customer review API on my website. The integration is working on all my pages but on one product page i'd like to init the sdk for each videos id returned by the object to display all the video reviews of this product.

The sdk returned an object as below : enter image description here

And i have to display the sdk like that :

 SDK.init(
            {
                type: "player",
                args: {
                    key: playerKey,
                    id: videoId, // Id returned by the object on the screenshot
                    width: '100%',
                    height: "inherit",
                },
            },
            videoPlayer //=> my div element 
        )

i tried the for each method, objects as below but nothing work for me, each time only 1 player is displaying.

 Object.keys(videos).forEach(id => {
        console.log(videos); 
        SDK.init(
            {
                type: "player",
                args: {
                    key: playerKey,
                    id: videoId,
                    width: '100%',
                    height: "inherit",
                },
            },
            videoPlayer
        )
      });

I have no archive what i tried before this but i'm a little bit lost

Have a nice day and thank you

Answer 1

The documentation indicates that one HTML element should be dedicated to one player. So you cannot put several players in one element.

You could create child elements inside your container element.

Assuming that videos is an array, like depicted in the screenshot:

videos = [
    { id: '....' },
    { id: '....' }
]

then do this:

for (let {id} of videos) {
    console.log("video ID", id);
    const wrapper = document.createElement("div");
    videoPlayer.appendChild(wrapper);
    SDK.init(
        {
            type: "player",
            args: {
                key: playerKey,
                id,
                /* any other properties you want to add here */
            },
        },
        wrapper
    );
}

Answer 2

I didn't try the SDK, but as @T.J. Crowder mentioned in the comment you probably need to create new <div> for every init call, something like this:

 Object.keys(videos).forEach(id => {
        console.log(videos); 
        const node = document.createElement("div");
        node.style.width = '500px';
        node.style.height = '500px';
    
        videoPlayer.appendChild(node)

        SDK.init({
            type: "player",
            args: {
                key: playerKey,
                id: videoId,
                width: '100%',
                height: "inherit",
            },
        }, node)
      });