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

Question

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

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

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

目前，对于我拥有的后端（为安全起见，删除了 API 的 URL）：

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 错误：item 数组中的每个项目都必须有一个名为 _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;