Best practice to return values from a inside a promise?

JavaScript
1

I have code that returns four values from the TikTok API. I can console log the results, but I’m not sure how to return them, so I can display them as HTML. I have the JS written to display the result to the DOM.

var treeVidCount = 23; document.getElementById("text-node").innerHTML = There are ${treeVidCount} tree planting videos on TikTok today. `

treeVidCount is hardcoded at 23 for now, but Iwant to use real TikTok API values.

I don’t think I can access the result from outside the promise. Where do I write return, in order to access the videoCount or viewCount? Or, how can I reduce result.challengeInfo.stats.videoCount to single variable, videoCount?

.then(result => console.log(result.challengeInfo.stats.videoCount, result.challengeInfo.stats.viewCount))

Codepen here. The API key is disabled, but the code successfully logs to the console:

https://codepen.io/Teeke/pen/dc425e552ca0bf7a916a15a4ecb5c88b

2 
.then(result => {
  // render to DOM here, where the console log is, like:
 
document.querySelector(".someElement").innerHTML = result.valueYouWantToRender;
})
3

That’s a clean and quick way of doing it, from inside the promise. Cheers. BTW, why does your code have color syntax?

Is there another way I can turn result.challengeInfo.stats.videoCount into a single variable?

4

I think the highlighter just guessed correctly, but if you write the first line of backticks with the language specified it’ll force it:

```javascript

Re turning it into a single variable, can you show me an example of what you want it to look like?

5

backticks, of course. I indented with four spaces, like Stack Overflow, but that won’t activate colors.

6

Single variable, I was thinking of something like:

let treeVidCount = result.challengeInfo.stats.videoCount

document.getElementById("text-node").innerHTML = ` There are ${treeVidCount} tree planting videos on TikTok today. `

This would give me more freedom to access the variable in the outer scope.

7

I tried the querySelector code. Not sure if I made a syntax error, because it returns an object error. I’ll leave the API key public for a couple of hours until I fix this. Feel free to try the codepen:

https://codepen.io/Teeke/pen/wvgBPGQ?editors=0001

9

No harm. DanCouper’s answer is the cleanest and quickest, I’ll use that. I just wondered what the other options were for future reference. Defining a separate function would work too.

I left a codepen in my previous post. Still trying to get the code to work.

10

The selector should be "#text-node" (it’s an id).

document.querySelector("#text-node").innerHTML = result.challengeInfo.stats.viewCount
11

Ha. Got it. Cheers. I knew it was an id, but forgot the hash symbol. Code’s working now.

Thanks everyone for the speedy and helpful responses.

12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.