如何使用 Wix 代码显示 json 获取结果？

Question

我正在与一家非营利性猫收容所合作，试图更新他们的网站。他们希望有一个页面可以连接到他们的收容所管理器软件，以显示可供收养的可用猫。幸运的是，他们的避难所经理提供 API 电话以从中获取我需要的信息。

他们使用 Wix 作为他们的平台，并且非常愿意保留它，因为他们的大多数志愿者都知道如何轻松调整其他页面。我研究并发现 Wix 提供了使用他们的获取方法连接到 API 的能力。

基本上，我正在尝试获取一个动态页面来显示从他们的 json API Get 方法填充的转发器。

目前，我已经为后端删除了（URL 到 API 以确保安全）：

import {fetch} from 'wix-fetch';

export function  getdata(){
  return fetch('URL to API Service', {method: 'get'})
    .then( (httpResponse) => {
      if (httpResponse.ok) {
        return httpResponse.json();
      } 
    } );

}

在页面上，这是我认为卡住的地方：

import {getdata} from 'backend/fetchCats';

 getdata()
        .then(json => {

            console.log(json);          

            var catData = json;
// static repeater data

$w.onReady(function () {
  // handle creation of new repeated items
  $w("#repeater1").onItemReady( ($item, itemData, index) => {
    $item("#text23").text = itemData.ANIMALNAME;  
  } );

  // set the repeater data, triggering the creation of new items
  $w("#repeater1").data = catData;

} );
});

上面给出了错误：Wix 代码 SDK 错误：items 数组中的每个项目都必须有一个名为 _id 的成员，其中包含一个唯一的值来标识该项目。

我知道 JSON 调用中有一个 ID 字段，但我猜 Wix 需要一个 _id 字段。

我是不是做错了？还是我错过了一些简单的东西？我花了几个晚上搜索，但无法在网上真正找到使用 Wix 的 fetch 方法通过我的 HTTPS Get 获取数据的完整示例。

感谢您的帮助！

Answer 1

你做得很好。

您收到来自行 $w("#repeater1").data = catData; 的错误这是用于将项目设置到转发器中的行。转发器希望每个项目都有一个 _id 成员，而您的数据很可能没有这样的属性。

我假设您正在使用 API，当返回一个数组时，每个项目都有一些标识属性？如果是这样，你可以做一个简单的转换，比如 -

let catDataWithId = catData.map(item => {
  item._id = item.<whatever id attribute>;
  return item;
});
$w("#repeater1").data = catData;

如何使用 Wix 代码显示 json 获取结果？

How do I display json get result using Wix Code?

json

repeater

fetch

velo