How do I display json get result using Wix Code?

Question

I'm working with a non-profit cat shelter trying to update their website. They want to have a page that connects to their shelter manager software to display the available cats for adoption. Luckily, their shelter manager offers API calls to get the information I need from it.

They use Wix as their platform and are pretty set on keeping it as most of their volunteers know how to make easy adjustments to other pages. I researched and found Wix offers the ability to connect to the API using their fetch method.

Basically, I am trying to get a dynamic page to display a repeater that is populated from their json API Get method.

Currently, for the backend I have (URL to API removed for security):

import {fetch} from 'wix-fetch';

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

}

On the page, this is where I think I am getting stuck:

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;

} );
});

The above is giving me the error: Wix code SDK error: Each item in the items array must have a member named _id which contains a unique value identifying the item.

I know the JSON call has an ID field in it, but I am guessing Wix is expecting an _id field.

Am I just doing this wrong? Or am I missing something simple? I've spent a couple nights searching but can't really find a full example online that uses Wix's fetch method to get data via my HTTPS Get.

Thanks for any help!

Yoav Avrahami · Accepted Answer · 2018-11-08 12:11:42Z

0

You are doing fine.

You are getting the error from the line $w("#repeater1").data = catData; which is the line used to set the items into the repeater. A repeater expects to have a _id member for each of the items, and your data quite probably does not have such an attribute.

I assume the API you are using, when returning an array, each item has some identifying attribute? if so, you can just do a simple transform like -

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

answered Nov 8, 2018 at 12:11

Yoav Avrahami

464 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

A.Myford Over a year ago

So the API does have an item called ID for each cat and it is unique per cat. I used your code to map _id to this ID column and got an error stating that _id needed to be a string. So I did: let catDataWithID = catData.map(item => { item._id = String(item.ID); return item; and it works...sort of. The page sits and spins and I can see the repeater being updated, but it is so slow. API currently returns 90 items. API call does give me a lot of attributes I don't need (returns 272 attributes when I am only going to maybe use 10 of those). Can I do anything to limit the attributes read?

A.Myford Over a year ago

Nevermind on my comment above. Found out how to limit data using the map function a bit more. Also, my issue with it being slow was due to me having an error on trying to have one of the text values load with some text in front of the attributes and was using an ampersand instead of plus. Thank you sooo much for your help!

Anthony Tiefenbach Over a year ago

My wife is asking me to help do this very thing for the organization we foster for. Any chance you could post the final code you used so I could understand the process better? Thanks

Collectives™ on Stack Overflow

How do I display json get result using Wix Code?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related