How I can pass response to any wix element

Ask the community
,
1

I have a response from a third party api I want to pass those responses to a table and or wix elements

content:
Array(5)
json Table Copy JSON

0:
{…}
json Table Copy JSON

_links:
{…}
json Table Copy JSON

self:
{…}
json Table Copy JSON

href:
“https://test.connect.boomi.com/ws/rest/masterdealer/inventory/456669”

id:
“456669”

sku:
“D2 APPLE IPHONE 11 128GB WHITE OEM HSO”

manufacturer:
“APPLE”

model:
“IPHONE 11”

color:
“WHITE”

grade:
“Grade”

storage_capacity:
“128GB”

price:
615

quantity_on_hand:
17

carrier:
“OEM”

currency_code:
“USD”

country:
“US”

effective_date:
“2021-10-01”

1:
{…}
json Table Copy JSON

_links:
{…}
json Table Copy JSON

self:
{…}
json Table Copy JSON

href:
“https://test.connect.boomi.com/ws/rest/masterdealer/inventory/262528”

id:
“262528”

sku:
“D2 APPLE IPHONE 6 64GB SILVER SPRINT HSO”

manufacturer:
“APPLE”

model:
“IPHONE 6”

color:
“SILVER”

grade:
“Grade”

storage_capacity:
“64GB”

price:
100

quantity_on_hand:
18

carrier:
“SPRINT”

currency_code:
“USD”

country:
“US”

effective_date:
“2021-10-01”

2:
{…}
json Table Copy JSON

_links:
{…}

id:
“178888”

sku:
“D2 APPLE IPHONE 8P 64GB SILVER OEM JP”

manufacturer:
“APPLE”

model:
“IPHONE 8P”

color:
“SILVER”

grade:
“Grade”

storage_capacity:
“64GB”

price:
1

quantity_on_hand:
95

carrier:
“OEM JP”

currency_code:
“USD”

country:
“US”

effective_date:
“2021-10-01”

2

It’s not clear what you’re trying to do.
Do you want to store the response in a data collection?
Do you want to show the response to users who’re currently using the site (Realtime)?
something else?

3

@jonatandor35 That for replying I want to show that json data to table.

4

@alifraz456
Why not using a → REPEATER instead ?

5

Ok let lets say I want to fill a repeater than I how I can do that? How I can use that json response to fill out the repeater?

import { getInventory } from ‘backend/getInventory’ ;

getInventory ()
. then ( JSON => {

        console . log ( JSON );           

        var  catData  =  JSON ;

$w . onReady ( function () {

});

});

when I try to get data on the page then I get the error of undefined

1887×72 7.29 KB

What I need to do ?

6

@alifraz456

Just to make your situation clear.

You have a JASON-Object?
An ARRAY of OBJECTS, or what is it what you have?

And now take a look at the repeater and what the repeater expects to be feeded with.

[
  {
    "_id": "1",
    "firstName": "John",
    "lastName": "Doe",
    "image": "http://someImageUrl/john.jpg"
  },
  {
    "_id": "2",
    "firstName": "Jane",
    "lastName": "Doe",
    "image": "http://someImageUrl/jane.jpg"
  }
]

Do you already recognize the similarity?

…expanded example… → just some helping tips…

import {getInventory} from 'backend/getInventory';

   $w.onReady(function () {
      Your JSON-PART HERE............................................
      //-----------------------------------------------------------
      JSON-RESULTS: ---> [{"_id":"1", "name":"John-Doe"}, {"_id":"2", "name":"Jane-Doe"}]
      //-----------------------------------------------------------
      $w('#yourRepeaterIDhere').data = JSON-RESULTS;
      //-----------------------------------------------------------
      $w('#yourRepeaterIDhere').onItemReady(($item, itemData, index)=>{
         console.log("TITLE: ", itemData.title)
         $item('#yourElementIDhere_elementInsideRepeater').show();
      });      
   });    
});
7

@russian-dima thanks for your replying
so I tried with your method

let response = await Inventory ();

// console.log( ${ JSON.stringify((response)) });

// console.log(Object.keys(response.content.items))
var obj = Object . keys ( response ). map (( key ) => [ Number ( key ), response [ key ]]);

var result = Object . entries ( obj [ 1 ][ 1 ]);
console . log ( result )
$w ( ‘#repeater4’ ). data = obj [ 1 ][ 1 ];
//-----------------------------------------------------------
$w ( ‘#repeater4’ ). onItemReady (( $item , itemData , index )=>{
console . log ( "TITLE: " , itemData . id )

  });

And here is what I am getting

1313×285 57.1 KB

8

@alifraz456
How do look like your generated → RESULT-OBJECT ← ??? → obj [ 1 ][ 1 ] ← ???
It seems that you did not include a unique → ID ← for each of the → ITEMS ← inside your → OBJECT ← !!!

Take a carefull look again onto the EXAMPLE-REPEATER-OBJECT…

let ready2useRepeaterObject =
[
  {
    "_id": "1", //-------> TYPE (STRING)
    "firstName": "John",
    "lastName": "Doe",
    "image": "http://someImageUrl/john.jpg"
  },
  {
    "_id": "2", //-------> TYPE (STRING)
    "firstName": "Jane",
    "lastName": "Doe",
    "image": "http://someImageUrl/jane.jpg"
  }
]

$w('#myRepeaterIDhere').data = ready2useRepeaterObject;

Generale a for-loop and inject the index of the loop for each item to generate a STRING-ID. Do not forget → it MUST be an ID of TYPE → STRING !

9

@russian-dima How I can achieve that can you please guide me?
here what I tried so far

var obj = Object . keys ( response ). map (( key ) => [ Number ( key ), response [ key ]]);

var result = Object . entries ( obj [ 1 ][ 1 ]);

  //----------------------------------------------------------- 
  

  **var**  result1 ;

result . forEach (( item , index )=>{
console . log ( item [ 1 ])
result1 =( Object . entries ( item [ 1 ]) )
})
$w ( ‘#repeater4’ ). data = result1 ;
$w ( ‘#repeater4’ ). onItemReady (( $item , itemData , index )=>{
console . log ( "TITLE: " , itemData . _id )
$item ( ‘#text7’ ). text = itemData . _id ;
//$item(‘#yourElementIDhere_elementInsideRepeater’).show();
});

10

@alifraz456
I will give you just an example…

Let’s say this is your initial-object… → or to be more precise ARRAY-OBJECT.

let objectArray = [
    {
        "firstName": "John",
        "lastName": "Doe",
    },
    {
        "firstName": "Jane",
        "lastName": "Doe",
    }
]

As you can see → there is no → _id ← property given, what is essential for repeater, as data-input. Without the _id-property, the repeater won’t work…read the following article-excerpt…

Description
A repeater’s data is stored as an array of objects. Each object in the array must contain a unique _id property which is used to match the object’s data to the individual repeated items of the repeater as described below. The value of the _id property can only contain alphanumeric characters (A-Z, a-z, 0-9) and hyphens (-). Other than _id, the objects in the repeater’s data array can contain anything you want.

That means → you have to configure/manipulate your Initial-Array-Object and injecting the _id-property into your initial Array-Object, to prepare the right data-format for the repeater.

Only if you have prepared your Array-Object the right way, your repeater will work.

Another very important checkpoint is → that your _id-property has to be a → STRING, what is not mentioned in the VELO-API-DOCs.

So let’s do the → INJECTION…

function start_idInjection(objectArray){
    for (let i = 0; i < objectArray.length; i++) {
        objectArray[i]._id = String(i);
    }
    return (objectArray);
}

The results after running the INJECTION-FUNCTION, should look like…

let objectArray = [
    {
        "_id": "0",
        "firstName": "John",
        "lastName": "Doe",
    },
    {
        "_id": "1",
        "firstName": "Jane",
        "lastName": "Doe",
    }
]

…at the end, including the ID for every item inside the Array-Object.

Example:

let objectArray = [
    {
        "firstName": "John",
        "lastName": "Doe",
    },
    {
        "firstName": "Jane",
        "lastName": "Doe",
    }
]

$w.onReady(async()=> {
   let ready2useRepeaterData = await ID_injection(objectArray); 
   console.log("RESULTS: ", ready2useRepeaterData);
   
   $w('#repeater4').data = ready2useRepeaterData;
   
   $w('#repeater4').onItemReady(($item,itemData)=>{console.log("DATA: ", itemData);
       console.log("ID: ", itemData._id);
       //console.log("Title: ", itemData.title);
       
       $item('#text7').text = itemData._id;
   });   
});


function ID_injection(objectArray){
    for (let i = 0; i < objectArray.length; i++) {
        objectArray[i]._id = String(i);
    }
    return (objectArray);
}

Something like that. This is just an simple example. Modify it to your own needs!

Just always keep in mind → that the REPEATER is expecting the following data-format…

let REPEATER_DATA = [
    {
        "_id": "1",
        "firstName": "John",
        "lastName": "Doe",
    },
    {
        "_id": "2",
        "firstName": "Jane",
        "lastName": "Doe",
    }
]

… to be feeded with!

11

Hi thanks for your great solution I just like that and I got result into the repeater. I can see the data is passing to the repeater when but when I passed itemdata[1].id to a text then it showed nothing. Is there any thing wrong? repeater is loading the items but I can not see them text changing according to the result.

$w ( ‘#repeater4’ ). data = ready2useRepeaterData ;

          $w ( '#repeater4' ). onItemReady (( $item , itemData )=>{ console . log ( "DATA: " ,  itemData [ 1 ]); 
                 console . log ( "ID: " ,  itemData [ 1 ]. id ); 
                 //console.log("Title: ", itemData.title); 
                 
                 $item ( '#text20' ). text  =  itemData [ 1 ]. id ; 
                 $item ( '#text22' ). text  =  itemData [ 1 ]. sku ; 
          });

But I can see the id in response.

1819×587 52 KB

12

Hi thanks for your great solution I applied that into my code. And I got results. Just one problem I am facing now is that my repeater is not showing that data which is passed to the the repeater. But I can see from the response that data is passing to the repeater correctly.
Here is my code to fill repeater. same as like yours.
$w ( ‘#repeater4’ ). data = ready2useRepeaterData ;

          $w ( '#repeater4' ). onItemReady (( $item , itemData )=>{ console . log ( "DATA: " ,  itemData [ 1 ]); 
                 console . log ( "ID: " ,  itemData [ 1 ]. id ); 
                 //console.log("Title: ", itemData.title); 
                 
                 $item ( '#text20' ). text  =  itemData [ 1 ]. id ; 
                 $item ( '#text22' ). text  =  itemData [ 1 ]. sku ; 
          });

Here is the response I am getting


But the repeater is not filling the data.

1819×587 52 KB

What could be the reason? I dont think its data type issue. As I can see 5 record fill successfully into the repeater. But not filling the text. Id and sku

13

@russian-dima Hi I wanted to inform you that I just saw that can see the filled repeater on the live site.

1893×869 78.8 KB

But don’t know why three fields I can not see filled but I am sure that I pasted the correct ids, just like other fields as you can see grade, price, and quantity are not filling on the repeater
$item ( ‘#text20’ ). text = itemData [ 1 ]. id ;
$item ( ‘#text22’ ). text = itemData [ 1 ]. sku ;
$item ( ‘#text24’ ). text = itemData [ 1 ]. manufacturer ;
$item ( ‘#text26’ ). text = itemData [ 1 ]. model ;
$item ( ‘#text28’ ). text = itemData [ 1 ]. color ;
$item ( ‘#text30’ ). text = itemData [ 1 ]. grade ;
$item ( ‘#text32’ ). text = itemData [ 1 ]. storage_capacity ;
$item ( ‘#text34’ ). text = itemData [ 1 ]. price ;
$item ( ‘#text36’ ). text = itemData [ 1 ]. quantity_on_hand ;
$item ( ‘#text38’ ). text = itemData [ 1 ]. carrier ;
$item ( ‘#text40’ ). text = itemData [ 1 ]. currency_code ;
$item ( ‘#text42’ ). text = itemData [ 1 ]. country ;
$item ( ‘#text44’ ). text = itemData [ 1 ]. effective_date ;
And here is the link of my live site
https://www.primocelstore.com/view-inventory
Please advise me what will be reason?

14

Found the solution never mind those items were number I needed to convert them to string :slight_smile: :slight_smile:

15

Sometimes, it just need some time, to find the right solution :wink::+1:.
Well done :+1: