When i Query it takes one item only not all items present in db?

Ask the community
, ,
1

Hey,

My website finally works today but I’m facing a 2 little issue.
I created a website with Youtube API.

  1. My code is working fine for dynamic page but when I preview my website it only shows one item channel data that means when I change the dynamic page for other channel id’s it stuck to show only one channel data for every other channel when I change i know there is something missing in my query but I am not able to figure out.

  2. And when I preview my website my repeater not showing any result according to my understanding I connect all the repeater’s item but I don’t know why it’s not showing the result.

Backend code:

import { fetch } from 'wix-fetch';
import wixData from 'wix-data';

export async function getData() {

 const apiKey = "API KEY";
 let index = 0;

 let cId = await wixData.query("YouTubeChannels", "chId") // chId is the field name where all channel Id's are stored 

        .find()

        .then((results) => {

 while (index <= results.items.length - 1) {

 let channelId = (results.items[index].chId); 
                console.log(channelId);
                index++;
 return channelId;

            }
        });

 const response = await fetch("https://www.googleapis.com/youtube/v3/channels?part=statistics,snippet,brandingSettings&id=" + cId + "&key=" + apiKey, {
        method: 'get'
    });
    console.log(response)
 if (response.status >= 200 && response.status < 300) {
 const res = await response.json();
 return res;
    }
 let res = await response.json();
 return res;
}

Code for the dynamic page:

import { getData } from 'backend/youtube.jsw';

$w.onReady(function () {
    getData()
        .then((response) => {
 //Channel Name

 let channelName = response.items[0].snippet.title;
            $w("#channelName").text = channelName;

 //Channel Logo

 let channelLogo = response.items[0].snippet.thumbnails.medium.url;
            $w("#channelLogo").src = channelLogo;

 //Channel Thumbnail 

 let channelThumb = response.items[0].brandingSettings.image.bannerImageUrl;
            $w("#channelThumbnail").src = channelThumb;

 // Live Subscriber Count        

 let subCount = response.items[0].statistics.subscriberCount;
 //console.log(subCount);
            $w("#liveCount").text = subCount;

 // Total Views

 let totalView = response.items[0].statistics.viewCount;
 //console.log(subCount);
            $w("#totalViews").text = totalView;

 // Total Videos
 let totalVideo = response.items[0].statistics.videoCount;
 //console.log(subCount);
            $w("#totalVideos").text = totalVideo;
        });

});

// Subscriber Refresing
$w.onReady(function () {
    setInterval(() => {
        getData()
            .then((response) => {
 let subCount = response.items[0].statistics.subscriberCount;
                $w("#liveCount").text = subCount;
            });
    }, 5000); //5000 milliseconds
});

Code for the repeater:

import { getData } from 'backend/youtube.jsw';

export function channelRepeater_itemReady($item, itemData, index) {
    $w.onReady(function () {
        getData()
            .then((response) => {

 let data = response;

                data.forEach((item) => {

                    item._id = String(index++);

                })
                $item('#channelRepeater').data = itemData;

 //Channel Name

 let channelName = data.items[0].snippet.title;
                $item("#channelName").text = data.items[0].snippet.title;//itemData.channelName;

 //Channel Logo

 let channelLogo = data.items[0].snippet.thumbnails.medium.url;
                $item("#channelLogo").src = itemData.channelLogo;

 // Live Subscriber Count        

 let subCount = data.items[0].statistics.subscriberCount;
                $item("#liveCount").text = itemData.subCount;

 // Subscriber Refresing

                setInterval(() => {

 let subCountRef = response.items[0].statistics.subscriberCount;
                    $item("#liveCount").text = itemData.subCountRef;
                });
            }, 5000);
    }) //5000 milliseconds

}

Screenshot: Channel Id (1), Channel Id (2)

1742×555 111 KB

1592×573 249 KB

Observe that channel not change if I change the channel id Same channel for every dynamic page

1432×558 247 KB

#repeater #query #database #wixapi

2

Hi,

The same channel is showing for all the dynamic pages because you always collect items with the 0 index.

The same issue is with the repeater. The index of the item you collect from a database should change according to its id. You can see how do display data in a repeater using forEachItem() function here .

3

Thanks for your reply but when I delete the 0 everywhere it is not showing anything - updated code like this

let channelName = response.items[].snippet.title;
   $w("channelName").text  = channelName;

And I’m not able to understand why it is not showing any result in the repeater.