Small question about wix-fetch with json

Ask the community
,
1

I have no experience with JSON and yet I managed to do something about it.
I have the following code that works wonderfully thanks to the articles and forum searches I read:

import {fetch} from 'wix-fetch';

export function button31_click(event) {

let key = "https://api.rebrandly.com/v1/links/new?apikey=XXXXXXXXXXXXXXXXXX&domain[fullName]="
let domain = $w('#dropdown1').value;
let longUrl = $w('#input1').value;
let slashtag = $w('#input2').value;
let fullUrl = key + domain + '&destination=' + longUrl + '&slashtag=' + slashtag ;

fetch(fullUrl, {method: 'get'})
.then(response => response.json())
.then(json => $w("#text24").text = json.shortUrl);
}

my question is how can i add another value from the GET url?
like $w(“#text25”).text = json.slashtag) ?
and how can i add an error check?
(if error > do something)

i try this code but he doesn’t work:

import {fetch} from 'wix-fetch';

export function button31_click(event) {
let key = "https://api.rebrandly.com/v1/links/new?apikey=XXXXXXXXXXXXXXXXXX&domain[fullName]="
let domain = $w('#dropdown1').value;
let longUrl = $w('#input1').value;
let slashtag = $w('#input2').value;
let fullUrl = key + domain + '&destination=' + longUrl + '&slashtag=' + slashtag ;

fetch(fullUrl, {method: 'get'})
.then(response => response.json())
.then(json => 
$w("#text24").text = json.shortUrl
$w("#text25").text = json.slashtdg
);
  .then( (json) => console.log(json.someKey) )

  .catch(err => console.log(err));

}

this one doesn’t work!
what do i need to change?

Thanks :slight_smile:

2

You’re trying to do all the right things; you just haven’t got the arrow function syntax exactly right yet.

https://flaviocopes.com/javascript-arrow-functions/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
https://support.wix.com/en/article/corvid-working-with-promises

export function button31_click(event)

{

	let key = "https://api.rebrandly.com/v1/links/new?apikey=XXXXXXXXXXXXXXXXXX&domain[fullName]="

	let domain = $w('#dropdown1').value;

	let longUrl = $w('#input1').value;

	let slashtag = $w('#input2').value;

	let fullUrl = key + domain + '&destination=' + longUrl + '&slashtag=' + slashtag;



	fetch(fullUrl, {method: 'get'})

		.then(response => response.json())

		.then(json =>

		{

			$w("#text24").text = json.shortUrl;

			$w("#text25").text = json.slashtdg;



			return json;

		})

		.then(json => console.log(json.someKey))

		.catch(err => console.log(err));

}
3

and again… thank you so much @Lee

4

Amazing!
Thank you so much!
how can i add if error event?
so if i got an error the value of text24 will be “That name is already occupied” ?

5

i try to do this one and it doesn’t work:

fetch(fullUrl, {method: 'get'})
.then(response => response.json())
.then(json =>
{
$w("#text24").text = json.shortUrl;
$w("#text25").text = json.slashtag;
return json;
})
.then(json => console.log(json.someKey))
.catch(err =>
{
console.log(err)
$w("#text24").text = 'That name is already occupied';
});

} );

when i try to get to the real link, i don’t get an error, just different values like:

{"message":"Invalid format","code":"InvalidFormat","source":"link","errors":[{"code":"AlreadyExists","property":"slashtag","message":"Already exists"}]}

so Is it possible to set that if we didn’t get anything from those values:
json.shortUrl;
json.slashtag;
it will be Error?

Hope you understood me :slight_smile: