JSON to Array (aka JSON to repeater.data)

Ask the community
,
1

Hi there guys! I’m working on a client site and I’m retrieving some cool data as JSON.

console.log(jsonData) // works beautifully

BUT! I have not been able to transform the JSON object into an array to be able to do this:

$w(myRepeater).data=jsonData // error indicates jsonData should be an array

I’ve been trying to find a function to transform my JSON to Array without any luck T_T

Can you give me a hand?

2

Hi,
Can you paste here the jsonData ?
Roi.

3

Yes I can good sir. Follows the JSON payload. Question would be: How do I make my repeater to take all of this data?

{
    "requestStatus": {
        "success": true,
        "version": "v1"
    },
    "product": {
        "productType": "TRANSFER",
        "name": "Airport Transfer",
        "shortDescription": "Available 24 hours a day.",
        "description": "Our driver will pick you up.",
        "productCode": "ABCDEF",
        "internalCode": "TMGA2SJ",
        "supplierId": 80718,
        "supplierAlias": "",
        "supplierName": "",
        "timezone": "America/Chicago",
        "advertisedPrice": 100,
        "priceOptions": [
            {
                "id": 1378348,
                "price": 100,
                "label": "Group from 1 to 3",
                "seatsUsed": 1,
                "minQuantity": 1,
                "maxQuantity": 3,
                "priceGroupType": "TOTAL",
                "productCode": ""
            },
            {
                "id": 1378349,
                "price": 130,
                "label": "Group from 4 to 8",
                "seatsUsed": 1,
                "minQuantity": 4,
                "maxQuantity": 8,
                "priceGroupType": "TOTAL",
                "productCode": ""
            }
        ],
        "currency": "USD",
        "unitLabel": "Guest",
        "unitLabelPlural": "Guests",
        "quantityRequired": true,
        "quantityRequiredMin": 1,
        "quantityRequiredMax": 10,
        "images": [
            {
                "id": 1023908,
                "itemUrl": "car.jpg",
                "thumbnailUrl": "car2.jpg",
                "mediumSizeUrl": "car3.jpg",
                "largeSizeUrl": "car4.jpg"
            }
        ],
        "videos": [],
        "bookingMode": "DATE_ENQUIRY",
        "charter": true,
        "terms": "",
        "generalTerms": "Deposits are refundable.",
        "bookingFields": [
            {
                "label": "Please let us know where you wish to be dropped off?",
                "requiredPerParticipant": false,
                "requiredPerBooking": true,
                "visiblePerParticipant": false,
                "visiblePerBooking": true
            }
        ],
        "latitude": 12.144782215856166,
        "longitude": -86.1712863995117,
        "confirmMode": "AUTOCONFIRM",
        "confirmModeMinParticipants": 0,
        "commissionIncludesExtras": false,
        "cancellationPolicyDays": 1,
        "minimumNoticeMinutes": 1080,
        "durationMinutes": 180,
        "dateUpdated": "2018-01-18T23:38:04Z",
        "locationAddress": {
            "addressLine": "",
            "postCode": "",
            "city": "mga",
            "state": "nicaragua",
            "countryCode": "ni",
            "latitude": 12.144782215856166,
            "longitude": -86.1712863995117
        },
        "languages": [
            "es"
        ]
    }
}
4

Hi,
How do you wish to use this data? Do you want to display all the data in the repeater?
check out the API here to see an example for repeater’s data.

5

Hey Or, I want to use several of those fields in the repeater (images, prices, descriptions, etc).

I have added the event handler for the onItemReady repeater and then added the data to the repeater as explained on the API documentation but I get the error I mentioned above about data needing to be of type Array…

6

Fixed it ( thank you @Ido for your last comment on my previous post about Promise.all( ) )

My solution (open for feedback!!): loop through the JSON and push parts of it into an array.
The repeater then asked for a “_id” key so I had to map it to FINALLY assign the data to the repeater…

fetch()
  .then((response) => {
	response.products.forEach((products) => data.push(products));
	return Promise.all(data.map(data => data._id = data.productCode));
  })
  .then(() => $w("#repeater1").data = data);

And that’s how I got my repeater to get data to build a category page.
Now I wonder what to do with the item page if I can’t use the collections structure for unique URLs…
What would be the best solution??? I’m thinking on the user experience and how my client would share specific webpages like “/services/item1”, “/services/item2”, etc…

Here’s the site (only available to Wix employees as I have not published):
https://www.elespino.travel/rezdy

7

Wix-Router API seems to be the solution :slight_smile: