I am trying to fetch data from api but its not copying in variable

var obj;
async function randomQuote(){
await fetch(‘https://type.fit/api/quotes’)
.then(res => res.json())
.then(data => obj = data)
}

Here is my complete code what i want to do
var obj;
async function randomQuote(){
await fetch(‘https://type.fit/api/quotes’)
.then(res => res.json())
.then(data => obj = data)
}
var num = Math.floor(Math.random()*obj.length)
("#text").text(obj[num].text); ("#author").text(obj[num].author);[quote=“ymp007, post:1, topic:446773, full:true”]
var obj;
async function randomQuote(){
await fetch(‘https://type.fit/api/quotes’)
.then(res => res.json())
.then(data => obj = data)
}
[/quote]

How is that function called?

$("#new-quote").click(function (){
randomQuote();
})

You don’t use then() with await, you just capture the result in a variable:

const res = await fetch(‘https://type.fit/api/quotes’);

Scroll down a little on this page to see an example of using fetch with async/await.

1 Like

I tried without async and await still it was not working.

I’ve tried randomQuote() function in console and result ends up in the obj variable.

may be code pen has that problem

Or error is further along the line. What should happen with data loaded to obj later?

var obj;
async function randomQuote(){
data = await fetch(‘https://type.fit/api/quotes’);
obj = await data.json()
}
var num = Math.floor(Math.random()*obj.length)
("#text").text(obj[num].text); ("#author").text(obj[num].author);

$("#new-quote").click(function (){
randomQuote();
})

function random_bg_color() {
var x = Math.floor(Math.random() * 256);
var y = Math.floor(Math.random() * 256);
var z = Math.floor(Math.random() * 256);
var bgColor = “rgb(” + x + “,” + y + “,” + z + “)”;
console.log(bgColor);

document.body.style.background = bgColor;
}

("#tweet-quote").attr( 'href', 'http://www.twitter.com/intent/tweet?text='+ encodeURIComponent('"' + ("#text").text() + '" ’ + $("#author").text())
)
random_bg_color();
randomQuote();

this is my complete code

Or rather I should ask what should happen with it. Notice randomQuote function doesn’t do anything with it. When element with #new-quote is clicked it just reloads obj.

main problem here is that obj is coming undefined i changed code to just find out the problem

Well, that’s still part of how obj is supposed to be used. Because once randomQuote is called obj shouldn’t be undefined. Before that it will be undefined.

The only thing your click handler is doing is calling the randomQuote function. That function just fetches the file and then puts the data in that file in the obj global object. I think you’ll want to move the two lines of code below the randomQuote function inside the function so that they are also executed every time you call the function.

Also, when you paste code into this forum you need to wrap it in triple backticks (```…```) so that it formats nicely.

But even better, you should put this into codepen (or something similar) we can see your entire project.

I agree, this is the point of Async / Await, to get away from promises.

Just to be clear, you don’t get away from promises using async/await. They are just additional syntax which can make asynchronous code easier to write and read. Underneath it all are still promises.

The problem is that the code to get the data from obj is called before randomQuote is ever called. You need to move these two lines below into the randomQuote function so that they update the DOM when obj is changed / set
var num = Math.floor(Math.random()*obj.length)
("#text").text(obj[num].text); ("#author").text(obj[num].author);