JSON "value" into HTML

Question

I am trying to access the Water Discharge value in a USGS.gov JSON output.

I want to pull to the number value from:

"values":[{"value":[{"value":"2510"

and place it into a div or span to be styled with CSS.

(the value is live and will continue to drop from my post as 2510)

I am totally new to JSON and The USGS file is so convoluted I can't make heads or tails of it.I was hoping to keep it SUPER simple like this FLICKER API example I found at API.JQUERY.COM

I imagine it will start someting like

  <span id="usgs_span"></span>

<script>
var usgs = "USGS JSON URL;
  $.getJSON( usgs, {
  })
    .done(function( data ) {
        $.values.value( "<span>" ).appendTo( "#usgs_span" );
    });
})();
</script>

Any help would be greatly appreciated!

Dev · Accepted Answer · 2014-07-15 05:22:31Z

1

Try this

(function() {
  var APIURL = "http://waterservices.usgs.gov/nwis/iv/?format=json&sites=01199000&parameterCd=00060";
  $.getJSON( APIURL, {   })
    .done(function( data ) {


         $.each( data.value.timeSeries[0].values[0].value, function( i, item ) {
              $( "#test" ).html($( "#test" ).html()+":"+item.value);
         });

    });
})();

Whenever you stuck to find what value to parse you can use http://www.jsontree.com/ to get a tree view on clicking required node it will show you what is the parser object.

answered Jul 15, 2014 at 5:22

Dev

6,7962 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Samuel Clarke Over a year ago

I also ended up using the same code to access and convert water temperature data for another usgs data point.

<div id="nmTEMP"></div>   <script>   (function() {   var APIURL = "http://waterservices.usgs.gov/nwis/iv/?format=json&sites=01200600&parameterCd=00010";   $.getJSON( APIURL, {   })     .done(function( data ) {            $.each( data.value.timeSeries[0].values[0].value, function( i, item ) {               $( "#nmTEMP" ).html((($( "#nmTEMP" ).html()+item.value) * 1.8 + 32).toFixed(0));          });      }); })();   </script>

Samuel Clarke Over a year ago

Hello, so its like access to waterservices.usgs.gov/nwis/iv/… has been blocked. I can still load the data in my browser but the function can no longer access it. (403 error) Any way around this?

Dev Over a year ago

try using https they have forbidden http access.

Dagg Nabbit · Accepted Answer · 2014-07-15 05:10:25Z

1

Yes, the data is horribly convoluted, but you can still dig through the response like you would with any other. Pull the data and convert it to an object first, and log it to the console.

var xhr = new XMLHttpRequest();
var url = "http://waterservices.usgs.gov"
        + "/nwis/iv/?format=json&sites=01199000&parameterCd=00060";

xhr.open("GET", url, true);
xhr.send();
xhr.onload = function() {
    var data = JSON.parse(xhr.responseText);

    console.log(data);
};

Expand properties of the data logged to the console until you find what you're looking for.

Then look at the properties you've expanded and use them to resolve your value.

var myValue = data.value.timeSeries[0].values[0].value[0].value;

// do something with myValue

http://jsfiddle.net/3QUxX/

It looks like this data is better suited to XML than JSON. They probably wrote this service with XML in mind and provided JSON as a concession. You may have an easier time omitting the format=json URL parameter and extracting the data you need from the XML response instead.

answered Jul 15, 2014 at 5:10

Dagg Nabbit

77k19 gold badges115 silver badges142 bronze badges

1 Comment

Samuel Clarke Over a year ago

oh wow converting it to xml does make it much more clear. Startlingly clear…

Collectives™ on Stack Overflow

JSON "value" into HTML

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related