Search code examples
javascriptjqueryhtmljsonstringify

Stringified JSON has unwanted double quotes

I am making a weather forecasting website, and querying the API returns a pure JSON response. However, when I stringify the data and append it to an element, to put it on the webpage, it has double quotes, see here:

see here

How would I be able to remove the double quotes from the stringified JSON text in order for it to display like a normal webpage? My code is below:

$.get("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22canberra%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys",
  function(data) {
    $("body")
      .append("Count: " + JSON.stringify(data.query.count)); 
    $("#heading") 	
      .append(JSON.stringify(data.query.results.channel.title));
  },
"json");
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Yahoo Weather for Canberra</title>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  </head>
  <body>
    <h1 id="heading"></h1>
  </body>
</html>

All help would be appreciated. Thanks.

Solution

  • Don't stringify things that are not objects. Just use them.

    $.get("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22canberra%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys",
function(data) {
  $(document.body).append("Count: " + data.query.count); 
  $("#heading").append(data.query.results.channel.title);
}, "json");
    <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Yahoo Weather for Canberra</title>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  </head>
  <body>
    <h1 id="heading"></h1>
  </body>
</html>