3rd Party API data parsing

Ask the community
, ,
1

Hi all trust this finds you well. Im struggling on something relatively simple and for the life of me I cant figure it out.

Please leave me a place to donate for the answer if required.

I have opened up my API CORS service with nominal test data. Ill chnage the CORS key once I am able to move forwards

Im trying to integrate WIX Fetch() with RestDB.io I have managed to get a DB stood up an passing the data to the console of the browser. I cant get the data posted to the browser to display in the text element I have put on a page!

Please it the URL in chrome here : https://members-7478.restdb.io/rest/user-device?key=5be43048ffebfc7d134d541d

Here is my backend code -

import { fetch } from ‘wix-fetch’;

export function userInfo() {

return fetch(“https://members-7478.restdb.io/rest/user-device”, {

            method: "get", 
            mode: "cors", 
            cache: "no-cache", 
            headers: {

“Content-Type”: “application/json”,
“x-apikey”: “5be43048ffebfc7d134d541d”
}
})
.then( function (response) {
return response.json();
})
.then( function (text) {
console.log(‘Request successful’, text);
})
. catch(function (error) {
console.log(‘Request failed’, error)
});
}

Here is my Front end code

import {userInfo} from ‘backend/serviceModule’;

export function search_click_1(event) {
userInfo()
.then(response => {
$w(“#Result”).text =
“GID:” +response[0]._id + “\n”
+“UserID:” +response[0].UserID + “\n”
+“Device:” +response[0].Device;
})
}

Here is the browser console with response set to .text

{“consoleMethodCalls”:[[“log”,“Request successful [{"_id":"5be433afa9f23e3a00001a26","UserID":"apenwrig","Device":"laptimer12345"},{"_id":"5be9455fa9f23e3a0000833e","UserID":"apenwrig2","Device":"laptimer2"}]”]]}

Heres is the repsonse content set to .json

{“consoleMethodCalls”:[[“log”,“Request successful [ { _id: ‘5be433afa9f23e3a00001a26’,\n UserID: ‘apenwrig’,\n Device: ‘laptimer12345’ },\n { _id: ‘5be9455fa9f23e3a0000833e’,\n UserID: ‘apenwrig2’,\n Device: ‘laptimer2’ } ]”]]}


Im hoping its a parsing problem and not that the RestDB.io service is no compatible somehow.

I did check the format in a JSON tool and its valid.

Many thanks in advance

#3rdpartyapi #restapi #fetchdataparse

2

From the screenshot that you included, it seems that the returned response from userInfo() is invalid (undefined? null? not an array?). What is the error message that you are getting?

3

Hi Yisrael,

Firstly thank you for taking the time to come back to me, it is appreciated :slight_smile:

Im getting an Undefined error The exact console error is as follows:

px1ev.js:6 Uncaught (in promise) TypeError: Cannot read property ‘0’ of undefined

The call is working i can see the data returned from the API in the browser console as aforementioned in my verboss breif above. Im suspecting its something to do with the way the information is being returned. I cant seem to parse the reponse tags either returned as .text or.json in the response. I note that my response is not line spaced like most api responses i have seen. Im not sure how i parse this informaiton correctly. I have validated the JSON response and it is valid @ https://jsonlint.com/.

Thoughts?

4

To add further i asked wix to log out to console and im getting

Request successful [{“_id”:“5be433afa9f23e3a00001a26”,“UserID”:“apenwrig”,“Device”:“laptimer12345”},{“_id”:“5be9455fa9f23e3a0000833e”,“UserID”:“apenwrig2”,“Device”:“laptimer2”}]

But still cant get it to display?

5

@anthony77402 what is your console.log() statement? How did you display it? Seems to me that it’s something in the structure of the response that you’re not quite getting right.

6

@yisrael-wix I am using a command as follows in the backend code:

.then( function (response) {
return response. text (); //or .json()
})
.then( function (text) {
console.log(‘Request successful’, text);
})
. catch(function (error) {
console.log(‘Request failed’, error)
});
No I have underlined .text() function as i typically use .json()

761×205 10.9 KB

7

@anthony77402 Sorry, but I’m confused. What are you getting for these log statements? Where did the TypeError come from?

In a previous post you showed the console output of the JSON and it looked fine. How did you display that? What was the log statement?

8

@yisrael-wix @anthony77402
The error is in the backend function, you do not return anything from the backend function to the calling code in the page code. You just console log the results but you never return it to the code.


I tested and it works great but only after I actually return the result from the backend to the calling function like below.

import { fetch } from 'wix-fetch';

export function userInfo() {
 return fetch("https://members-7478.restdb.io/rest/user-device", {
        method: "get",
        mode: "cors",
        cache: "no-cache",
        headers: {
             "Content-Type": "application/json",
             "x-apikey": "5be43048ffebfc7d134d541d"
        }
    }) 
    .then(function(response) {
        return response.json();
    })
    .then(function(text) {
         return text; // This is added to return result
    })
    .catch(function(error) {
        console.log('Request failed', error)
    });
}
9

@andreas-kviby Yep, you nailed it. In the original code I missed this:

.then(function(text) {
    console.log('Request successful', text);
})

Missing a return

sigh I need a beer.

Actually, I don’t think he even wants that segment of code. I would think he would want to return the JSON and not the text. But I guess it’s a matter of usage.

10

@yisrael-wix You need a beer? I need a beer… I will buy you one next time in Tel Aviv if you buy me one next time I get there

11

@andreas-kviby Are you kidding - we can just keep buying each other beers until we lose track of whose turn it is.

12

@andreas-kviby @yisrael-wix

Gentlemen im eternally greatful. Im sure this wont be our last encounter. I cant believe i couldnt see the wood through the trees.

To close this emtional code snippet for me does the function

.then( function (response) { return response.json();

Not provide a response

I do want to return the JSON but i was reverting to text to see if it was a parsing error as i hadnt use the RESTDB.io service before.

Either way many mnay many thanks and virtual hi 5’s and beers!!!

I reverted back to my original JSON return and it seems ok

})
.then( function (response) {
return response.json();
})
.then( function (json) {
return json; // This is added to return result
})
. catch(function (error) {
console.log(‘Request failed’, error)
});
}

cant thank you enough

13

@anthony77402 So you can buy the first round. :upside_down_face:

14

@anthony77402 Yes you can, send us beer :slight_smile: We are just happy to help you! Happy Wix Coding man!