在 Wix 代码中重复来自 API 响应的数据集

Question

如何在 Wix 中重复显示来自 API 的响应？

我的后端模块中有以下代码查询 API 数据，如下所示：

export function getTopCoins() {
const url = 'https://api.coinmarketcap.com/v1/ticker/?limit=10';

return fetch(url, {method: 'get'})
    .then(response => response.json());
}

然后在前端，我想像这样在浏览器中呈现它：

export function page1_viewportEnter(event, $w) {
     getTopCoins().then(response => {
        response.forEach(($w, itemData, index) => {
            $w('#coinList').text = itemData.name;
        });
     });
}

基本上我有一个 ID 名称为 coinList 的 Paragraph 元素。如您所见，我想显示硬币市值排名前 10 位的硬币名称列表。我怎样才能做到这一点？

这个的工作版本是显示列表中第一项的名称，这是代码：

export function page1_viewportEnter(event, $w) {
     getTopCoins().then(response => {
        $w('#coinList').text = "Name: " + response[0].name + "\n";
     });
}

Answer 1

您可以使用 Wix 的（相当新的）功能 Repeaters。它目前处于测试阶段。您可以在添加面板 --> 列表和网格下找到它...

然后，在 Wix 代码 IDE 中，您可以编写类似的东西（假设您将所有正确的数据绑定与 连接面板 配置连接 dataset 和 repeater 组件：

export function page1_viewportEnter(event, $w) {
 getTopCoins().then(response => {
    $w('#repeater1').data = response;
 });
}

您可以参考这里的Repeater API。

还有一件事，如果允许我建议：如果从后端代码调用 getTopCoins 时没有任何后端逻辑，则可以在前端代码中使用 Wix Fetch API直接保存一个网络跃点（更快更好的性能）

尽情享受吧！

在 Wix 代码中重复来自 API 响应的数据集

Repeating Dataset from API response in Wix Code

velo