Strange format of response.data

Ask the community
, ,
1

I’m new to coding in Wix. I am using a dynamic page with portrait and landscape images. As the image placeholder is not dynamic and can only be either portrait or lanscape (therefore always cropping the other orientation), I am trying to implement the approach described her: wix-router - Velo API Reference - Wix.com.
All is in place. However, I see that response.data.picture.orientation is not a know property.
So, I wanted to approach it by parsing the response.data for the pixel size. However, the response.data seems inconsistently formatted. Some of the tokens are enclosed in apostrophes other not, for example items or _id right at the beginning. It’s type of a misformed JSON. Is this by design or is something going wrong here? How can I drill down to the element containing the picture dimensions (1203_1620)?
If you now ask me for console.log, can somebody tell me how I can capture console.log output? I cannot copy it from the browser window :frowning: That’s why I have attached it as a screenshot.
Thanks for any assistance…

1890×105 17.1 KB

2

Ah, neither Firefox nor Edge let me copy console.log. Only Chrome. Here is my console.log output of the response:
{ items: [ { _id: ‘1cb50d1f-5add-4066-8081-b1e9a76a2a2b’, name: ‘1’, _owner: ‘a00cfb9c-3a2c-498f-adbd-bbe9bac2e834’, _createdDate: 2018-02-28T21:16:26.774Z, _updatedDate: 2018-03-23T18:47:52.456Z, description: ‘Impression of a street in the southern french town of Serignan.’, dimensions: ‘60 x 80 x 2 cm’, created: ‘2005’, properties: ‘1’, picture: ‘image://v1/a00cfb_67a8e3e407fa4600846b04178c118ea4~mv2.jpg/994_1396/Impression de Serignan FR_edited.jpg’, story: ‘

Yet to be told…

’, ‘link-ArtGallery1-name’: ‘/ArtGallery1/vertical-pic/1’, ‘link-ArtGallery1-horizontal-pic-name’: ‘/ArtGallery1/horizontal-pic/1’ } ], totalCount: 1, config: { dataset: { collectionName: ‘ArtGallery1’, sort: , collection: ‘ArtGallery1’, filter: [Object] } }, userDefinedFilter: undefined, dynamicUrl: ‘/ArtGallery1/vertical-pic/{name}’ }
My main concerns are:

3

Hi, can you please provide a link to your site so i can check out your configuration?

4

Www.RichardHenryBraitsch.com

5

Cool, thanks.
Please note that pictures do not come with an orientation property out of the box, you have to specify that yourself.
You can try the following:

  1. Add an ‘orientation’ column to your collection, and fill in the data. For each image, put either ‘vertical’ or ‘horizontal’. Another option would be using a boolean column named ‘isHorizontal’ and using true for horizontal or false for vertical.
  2. Try using the following code:
if(response.data.items[0].oreintation === "horizontal") {	      
      return ok("horizontal-pic", response.data, response.head);
}

Good Luck,
Itai

6

Hi Itai, that got me a good step further in my understanding and code. I added a “orientation” filed. Accessing the orientation field works fine. However, the if statement doesn’t work (I did use “orientation” correctly :-).

My code:
// In routers.js
import {ok} from ‘wix-router’;

export function ArtGallery1_afterRouter(request, response) {
//debugging lines
console.log(response.page);
console.log(response.data.items[0].orientation);
if(response.page === “horizontal-pic”) console.log(“h”);
if(response.page === “vertical-pic”) console.log(“v”);
//end debugging lines

if(response.status === 200 && response.page === “horizontal-pic”) {
if(response.data.items[0].orientation === “vertical”)
return ok(“vertical-pic”, response.data, response.head);
else
return response;
}

return response;
}

Console output:
(response.page) “ArtGallery1 Vertical Pic (Name)” in every case
(response.data.items[0].orientation) “vertical” / “horizontal” depending on the filed value
No further console output. It seems that the condition in the if statements is wrong. I tried removing all the hyphens in the page name and in the code, however no difference.
Any idea?

Thanks for your support
Richard

7

Hey Richard,

I think the part of the If statement that is failing is response.page === “horizontal-pic”
And I think this part is not actually needed.
You can try removing it and see if it helps:

if(response.status === 200) {
    if(response.data.items[0].orientation === "vertical")
      return ok("vertical-pic", response.data, response.head);
    else
      return response;
  }

Good Luck,
Itai

8

Hi Itai
I reduced the script as you described. Now it is working correctly in detecting what the orientation should be. I have renamed the pages to “p” for portrait and “l” for Lanscape (small “L”). However, when passing the new page name in the response, it never loads the page.

I get the following error message:
“Internal Server Error (500) … This page isn’t available: /ArtGallery1/p/Green …”. The shown URL is correct, as listed in the data collections columns, but doesn’t seem to get dynamically created?

Console.log = “Error page name doesn’t match any site page Error: page name doesn’t match any site page at exports.rejectWithError (wix/node_modules/wix-data-binding-router-core/lib/commons.js:13:25) at defaultRouterResponse.then.then (wix/node_modules/wix-data-binding-router-core/lib/router/utils/router-response.js:20:18) at run (node_modules/core-js/modules/es6.promise.js:66:22) at node_modules/core-js/modules/es6.promise.js:83:30 at flush (node_modules/core-js/modules/_microtask.js:18:9) at _combinedTickCallback (internal/process/next_tick.js:131:7) at process._tickDomainCallback (internal/process/next_tick.js:218:9)”

Any ideas?

Thanks, Richard