Author Topic: Simple Javascript to get just PM2.5 value from PurpleAir json, need help.  (Read 100 times)

0 Members and 1 Guest are viewing this topic.

Offline bthoven

  • Senior Member
  • **
  • Posts: 73
    • Europa Cafe' Private Observatory
I have a webpage displaying all my weather information and I would like to add nearby PurpleAir station data to my webpage. I've tried this script to get Json data, but I can't get the value from it. Need help...thanks.

<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript - read JSON from URL</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>

<body>
    <div class="mypanel"></div>

    <script>
    $.getJSON('https://www.purpleair.com/json?show=26581', function(ppa) {
        var ppa1 = `PM2.5: ${ppa.results.PM2_5Value}<br>
                    Time: ${ppa.results.LastUpdateCheck}<br>
                    Data: ${ppa}`
                   
       
        $(".mypanel").html(ppa1);
    });
    </script>
   
</body>
</html>

The result I got is:

PM2.5: undefined
Time: undefined
Data: [object Object]

The url itself in browser got the json data:

{"mapVersion":"0.4","baseVersion":"7","mapVersionString":"","results":[{"ID":26581,"Label":"Sansiri - Habito T77","DEVICE_LOCATIONTYPE":"outside","THINGSPEAK_PRIMARY_ID":"702607","THINGSPEAK_PRIMARY_ID_READ_KEY":"31QAMK9TLHF2CPH4","THINGSPEAK_SECONDARY_ID":"702608","THINGSPEAK_SECONDARY_ID_READ_KEY":"JS8H3KOAP717ZY4H","Lat":13.712708,"Lon":100.600961,"PM2_5Value":"51.69","LastSeen":1578814563,"Type":"PMS5003+PMS5003+BME280","Hidden":"false","DEVICE_BRIGHTNESS":"15","DEVICE_HARDWAREDISCOVERED":"2.0+BME280+PMSX003-B+PMSX003-A","Version":"4.11","LastUpdateCheck":1578814470,"Created":1550077244,"Uptime":"121","RSSI":"-71","Adc":"nan","p_0_3_um":"8375.65","p_0_5_um":"2552.84","p_1_0_um":"480.53","p_2_5_um":"27.39","p_5_0_um":"4.71","p_10_0_um":"2.27","pm1_0_cf_1":"50.08","pm2_5_cf_1":"76.57","pm10_0_cf_1":"81.22","pm1_0_atm":"33.82","pm2_5_atm":"51.69","pm10_0_atm":"64.78","isOwner":0,"humidity":"44","temp_f":"95","pressure":"1005.91","AGE":3,"Stats":"{\"v\":51.69,\"v1\":53.67,\"v2\":55.14,\"v3\":55.11,\"v4\":59.34,\"v5\":65.78,\"v6\":48.17,\"pm\":51.69,\"lastModified\":1578814563332,\"timeSinceModified\":1369401}"},{"ID":26582,"ParentID":26581,"Label":"Sansiri - Habito T77 B","THINGSPEAK_PRIMARY_ID":"702609","THINGSPEAK_PRIMARY_ID_READ_KEY":"EZVKAJ8HSLOFET6A","THINGSPEAK_SECONDARY_ID":"702610","THINGSPEAK_SECONDARY_ID_READ_KEY":"Y5JSFB4S22LUGTPW","Lat":13.712708,"Lon":100.600961,"PM2_5Value":"50.0","LastSeen":1578814563,"Hidden":"false","Created":1550077244,"Adc":"0.05","p_0_3_um":"8126.86","p_0_5_um":"2464.0","p_1_0_um":"414.39","p_2_5_um":"34.59","p_5_0_um":"5.16","p_10_0_um":"0.91","pm1_0_cf_1":"50.16","pm2_5_cf_1":"71.93","pm10_0_cf_1":"76.48","pm1_0_atm":"33.8","pm2_5_atm":"50.0","pm10_0_atm":"62.52","isOwner":0,"AGE":3,"Stats":"{\"v\":50.0,\"v1\":52.85,\"v2\":54.58,\"v3\":54.64,\"v4\":58.61,\"v5\":64.75,\"v6\":47.58,\"pm\":50.0,\"lastModified\":1578814563332,\"timeSinceModified\":1369401}"}]}

Offline droiddk

  • Forecaster
  • *****
  • Posts: 311
What do need from the JSON data?

You have errors in your script, maybe this example can help:

Code: [Select]
<script>

$.getJSON('https://www.purpleair.com/json?show=26581', function(data) {

var lastUpdateCheck = data['results'][0]['LastUpdateCheck'])

$("#containerForLastUpdateCheck").html(lastUpdateCheck);

});

</script>

Edit above to your own needs.

Regards
Davis Vantage Pro2 Plus
Meteobridge
WeatherFlow Sky & Air
Ventus W830
Ecowitt GW1000
Ecowitt HP3500
Ecowitt WH31
Ecowitt WH32
TFA Klimalogg Pro
TFA Temperature/humidity Transmitter

Offline wvdkuil

  • Wim van der kuil
  • Forecaster
  • *****
  • Posts: 1495
    • My PWS at Leuven Belgium Europe
. . . shortened . . .
 
Code: [Select]
   <div class="mypanel"></div>
    <script>
    $.getJSON('https://www.purpleair.com/json?show=26581', function(ppa) {
        var ppa1 = `PM2.5: ${ppa.results.PM2_5Value}<br>
                    Time: ${ppa.results.LastUpdateCheck}<br>
                    Data: ${ppa}`
        $(".mypanel").html(ppa1);
    });
    </script>
The result I got is:
PM2.5: undefined
Data: [object Object]
Time: undefined
. . . shortened . . .
The results is an array.
Add a pointer to the correct element
Code: [Select]
    <div class="mypanel"></div>
    <script>
    $.getJSON('https://www.purpleair.com/json?show=26581', function(ppa) {
        var ppa1 = `PM2.5: ${ppa.results[0].PM2_5Value}<br>
                    Time: ${ppa.results[0].LastUpdateCheck}<br>
                    Data: ${ppa}`
        $(".mypanel").html(ppa1);
    });
    </script>
and it will display correctly
Code: [Select]
PM2.5: 46.21
Time: 1578829758
Data: [object Object]
Wim
« Last Edit: January 12, 2020, 07:36:57 AM by wvdkuil »
Support for Leuven-Template & Scripts  at this forum
Support for the PWS_Dashboard (HWS-template) for WD a.o.  http://pwsdashboard.com/
Script sponsors https://support.leuven-template.eu/userlistScripts.php
Template sponsors https://support.leuven-template.eu/userlist.php

Offline bthoven

  • Senior Member
  • **
  • Posts: 73
    • Europa Cafe' Private Observatory
Thank you very much.  I got it now. [tup]

๋ี๋๋Just to share the script.

Code: [Select]
getPPA();

function getPPA()
{

$.getJSON('https://www.purpleair.com/json?show=26581', function(ppa) {

        var pm25now = ppa.results[0].PM2_5Value;

//$('#pm25now').attr("value",pm25now);

$('#pm25now').text(Math.round(pm25now));

        var lastseen = ppa.results[0].LastSeen;

       
        // Create a new JavaScript Date object based on the timestamp

        // multiplied by 1000 so that the argument is in milliseconds, not seconds.

        var datep = new Date(lastseen * 1000);

        // Hours part from the timestamp

        var hours_p = datep.getHours();

        // Minutes part from the timestamp

        var minutes_p = "0" + datep.getMinutes();

        // Seconds part from the timestamp

        var seconds_p = "0" + datep.getSeconds();



        // Will display time in 10:30:23 format

        var formattedTime = hours_p + ':' + minutes_p.substr(-2) + ':' + seconds_p.substr(-2);

        // Will display time in 10:30    format

        var lastseen = hours_p + ':' + minutes_p.substr(-2);

        $('#lastseen').attr("value",lastseen)

    });

setTimeout(getPPA, 60000); // set auto refresh every 60s (working, except ie)



}


 

anything