Using Arduino Thing Sensor Data on Javascript Web Page

WebThings
#1

Hello everyone, this is a hail mary and I hope it’s not a silly question.

TLDR ISSUE:
I need to make an HTTP request to ‘get’ my arduino data in the form of JSON from of my gateway and onto my javascript website, but I only receive responses in the from of “text/html”. I’m guessing I’m not the first to do this but my searches are coming up empty, so how do you all get your JSON data from the API?

CONTEXT:
I’ve been experimenting with a more efficient form of hot/arid aquaponic veggie gardening in the middle of nowhere and I monitor my arduino sensor data with web-things. I wanted to share live data publicly as a kind of proof that I’m not making this up. So I figured I’d make a simple React.js dashboard on my website using ChartJS with some streaming data overlays similar to Web Thing’s “logs”.

WHAT I’M TRYING:
As a jumping off point, I’m trying to get the temperature reading from my DHT22 taken on a NodeMCU arduino board. I’d like to keep using web things because it’s great and it would be fantastic to just fetch my json data from one place. On top of that, most of my automation runs on the rules feature and I’m not the best developer so reprogramming my arduinos doesn’t sound fun. I can also make a backend for my website to store the data, I just really don’t want to because if I can’t make a GET response work, I don’t think I should mess with POST :slight_smile:

Because I’m using react, I’m making an axios call using the .get().then().catch() methods and im calling
.get('https://*ip*/things/*sensor*'.

I have to guess that my issue is in the syntax, like 90% of my web dev problems, but only having taught myself to code in the last few months, I can’t be too sure.

I’ve been nerding out hard on web things like crazy these last few weeks and this is my first post, so if I haven’t supplied enough info, please let me know.

#2

Try adding an Accept: application/json header to your request.

#3

Thanks for the suggestion mrstegeman! Unfortunately it didn’t seem to work. Here are some samples of where I’m at with the request at the moment

code error

response error

Any other ideas? Thanks so much for the help so far. I of course also tried it with axios using a {responseType: application/json} in the request, since I’m working with react, but I just get a CORS error.

I’m pretty lost

#4

There is no Authorization header in the request.
That’s why you are getting the 401.

#5

@t1m1 Thanks! Good catch! Unfortunately the problem persists after adding the bearer token to the header after accept json via

‘Authorization’: ‘Bearer <300 char hash-like string>’

I get a 200 status now but I’m facing the same issue in which I get no real data. I’ll post an updated picture here:

response error 2

Thanks again!

#6

You’re not actually reading the data in your code. You need to do something like this:

fetch(url, opts)
  .then((res) => res.json())
  .then((body) => console.log(body))
  .catch((err) => console.log(err));
#7

Thanks again! It is solved. I’ve been doing contract work in a different language and I guess I forgot how to javascript for a minute there. You all were really helpful. For folks browsing in the future, use this code:

code solution

to get a json response like this:

response solution

My arduino sensor only reads temperature and humidity so its perfect.

Because I’m using react, I then use some react magic to populate an array with the results on an interval, and update my graph (made using chartJS) with the results. I’ll post a link once the analytics dashboard is complete in the near future.

Thanks again!