Question

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

他们使用Wix作为平台，并准备保留它，因为大多数志愿者知道如何轻松调整其他页面。我研究发现Wix可以使用其提取方法连接到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错误：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获取结果？

1 个答案: