How to get value from a website and save it as a number or string

JavaScript
1

I want to know how to extract a value from a website. I send data to thingspeak and the website displays this: {"created_at":"2019-03-10T18:41:02Z","entry_id":190,"field1":"27.34"} I want to extract the value of the field1, the 27.34. I am new to javascript, this is what I did so far:

const fetch = require('node-fetch');

var url = 'the url goes here';
var lastTemp;

fetch(url)
    .then(res => res.json())
    .then(json => lastTemp = console.log(json.field1));

console.log(lastTemp);

This doesn’t seem to work. the json.field1 does seem to have the value I want, but lastTemp doesn’t. I need this value outside of fetch, but I just don’t know how. Thank you for the help.

2

That’s because last console.log runs before fetch has chance to set lastTemp variable.

const fetch = require('node-fetch');

(async function() {
  var url = 'the url goes here';
  var { field1 } = await fetch(url).then(res => res.json());

  console.log(field1);
})();
3

Thank you, but is it possible to get the value outside the function? for example,

const fetch = require('node-fetch');

var temp;

(async function() {
  var url = 'the url goes here';
  var { field1 } = await fetch(url).then(res => res.json());

  temp = field1;
})();

console.log(temp);

I’m trying to get the value and use it again outside the function, but this outputs undefined. How could I achieve that? Thank you.

4

You can call the outside function from that async function and pass data as an argument. That is the way you write JavaScript:

const fetch = require('node-fetch');

(async function() {
  var url = 'the url goes here';
  var { field1 } = await fetch(url).then(res => res.json());

  outsideFunction(field1);
})();

function outsideFunction(temp) {
  console.log(temp);
}
5

@jenovs has provided an awesome example that will hopefully get you on the right track.

Just incase you haven’t used async functions or IIFEs (immediately invoked function expressions), this is how you would write it using .then.

const fetch = require('node-fetch');

var url = 'the url goes here';
var lastTemp;

fetch(url)
    .then(res => res.json())
    .then(json => outsideFunction(json.field1));

function outsideFunction(temp) {
  console.log(temp);
}

Here’s a great link to details about promise chaining vs async functions. https://javascript.info/async

6

I thank you both for the help. I guess I just simply don’t understand it. This is what I am trying to do:

const fetch = require('node-fetch');

var temp;
var ans;

(async function() {
  var url = 'the url goes here';
  var { field1 } = await fetch(url).then(res => res.json());

  outsideFunction(field1);
})();

function outsideFunction(temp) {
  return temp;
}

ans = outsideFunction();
console.log(ans);

I want this variable ans to have the value of field1 outside the function. Is this at all possible or should I just give up? Thank you.

7

As far as I know, not possible if you have an asynchronous function like fetch in your code.

8

You will not be able to access the variable in the manner you are trying to because of the synchronous nature of the code you are writing.

These two lines

ans = outsideFunction();
console.log(ans);

Are executed immediately, therefore, before the fetch has finished and the response received.

Javascript is typically executed line by line, but when you want to delay running code until something else has run, this is when you should be writing functions that get called with the details you want.

Take this code example:

setTimeout(function () {
 console.log('hello')
}, 1000)

console.log('world')

The output would be

world
hello

Because the console.log('world') is executed immediately but the console.log('hello') is delayed by 1000ms(1 sec).

To get the code to run in the expected order, you would either move the code that has to run after the delayed code is complete directly into the call back function, or write a function that can be called with the value when you have it.

setTimeout(function () {
  console.log('hello')
  logWorld()
}, 1000)

function logWorld() {
  console.log('world')
}

In your example specifically, fetch is delaying the code until it gets a response from the url, so you have to write a function that will call another function when you have the response. OR, write the code that needs the response directly in line with your callback. No way around it. Nature of the beast :japanese_ogre:.

9

I understand it now. I wish I could pick all the answers as the solution. Thank you both for the help.

1 Like