Show 3rd party API response result in a field

Ask the community
,
1

Hi all.
To start I’m a complete noob and just starting to learn. I would like to retrieve the ‘paymentAddress’ from this API and show it in a text field (read only) on my site. How do I accomplish this in Wix?
Thanks!

//Backend
import wixSecretsBackend from 'wix-secrets-backend';
import { getJSON } from 'wix-fetch';

export async function GetAddress() {
  const secret = await wixSecretsBackend.getSecret("nftmaker_apikey");
  return getJSON(`https://api (dot) nft-maker (dot) io/GetAddressForRandomNftSale/${secret}/16580/1/12000000`);
}

//Example response
paymentAddress: "addr1v9rp36jtdx0nt5z0epdatpejh48v2s79m38xpqsfvg5t53qwmcszv"
expires: "2021-09-03T14:57:44.332846Z"
adaToSend: "12"

//Client
import { GetAddress } from 'backend/GetAddressForRandomNftSale';

export async function buynft_click(event) {
  let json = await GetAddress();
  $w("#paymentAddress").text = // "paymentAddress" from response needs to be filled in field
}
2

If you are getting the response as your example, just change the last line to:

$w("#paymentAddress").text = json.paymentAddress
3

Hi Bruno. Thanks for your reaction.

In the backend I do get this response:

paymentAddress:"addr1v9rp36jtdx0nt5z0epdatpejh48v2s79m38xpqsfvg5t53qwmcszv" expires:"2021-09-03T14:57:44.332846Z" adaToSend:"12"

But in the client I get no response.

When I change the back end to the code below and do a testrun in the backend I get the message
[backend/GetAddressForRandomNftSale.jsw, GetAddress] called
[backend/GetAddressForRandomNftSale.jsw, GetAddress] returned with undefined
addr1vxa40sf7wjt0pk0zp8cxuz3p0sl6ujwgydfw8h2jfns54pg5nn2mq [line 7]

In the client this gives me
Cannot read properties of undefined (reading ‘paymentAddress’)
NFT Sale
Line 6

addr1vyeesglzpsxtptmdzl9j8eun55cunndvzuy9wn508nfadkss5y5sd
Line 7

Backend:

import wixSecretsBackend from 'wix-secrets-backend';
import { getJSON } from 'wix-fetch';

export async function GetAddress() {
  const secret = await wixSecretsBackend.getSecret("nftmaker_apikey");
  return getJSON(`https://api (dot) nft-maker (dot) io/GetAddressForRandomNftSale/${secret}/16580/1/12000000`)
    .then(json => console.log(json.paymentAddress))
    .catch(err => console.log(err));
}

Client:

import { GetAddress } from 'backend/GetAddressForRandomNftSale.jsw';
import {getJSON} from 'wix-fetch';

export async function buynft_click(event) {
  let json = await GetAddress();
    $w("#paymentAddress").text = json.paymentAddress // "paymentAddress"
}

What am I missing here?

4

@jsecheverry I think the problem lies on this line of code:

return getJSON(`https://api (dot) nft-maker (dot) io/GetAddressForRandomNftSale/${secret}/16580/1/12000000`)
        .then(json => console.log(json.paymentAddress)) This is returning undefined.
        .catch(err => console.log(err))

Your first code should have worked, but you changed to something that doesn’t return anything.
Try this code that it is similar to your first code:

//Backend

import { getSecret } from "wix-secrets-backend"
import { getJSON } from "wix-fetch"

export async function GetAddress() {
    const secret = await getSecret("nftmaker_apikey")
    return getJSON(`https://api.nft-maker.io/GetAddressForRandomNftSale/${secret}/16580/1/12000000`)
}

//Frontend

import { GetAddress } from 'backend/GetAddressForRandomNftSale.jsw';
import { getJSON } from 'wix-fetch'; //This is not need for the getAddres()

export async function buynft_click(event) {
  let json = await GetAddress();
    $w("#paymentAddress").text = json.paymentAddress // "paymentAddress"
}