0

如何在 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。如您所见，我想显示硬币市值前 10 名硬币的名称列表。我怎样才能做到这一点？

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

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

1 回答 1

0

您可以使用 Wix 的（相当新的）功能，称为Repeaters。目前处于 Beta 阶段。您可以在 Add Panel --> Lists & Grids 下找到它...

然后，在 Wix Code IDE 中，您可以编写类似的内容（假设您使用您和组件之间的连接面板配置连接了所有正确的数据绑定：datasetrepeater

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

您可以参考这里的中继器 API。

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

享受！

于 2018-02-07T09:49:42.497 回答