Completely stuck on how to display my JSON in HTML. Edit: I know how i want to format it, I just can't get it to output anything but raw JSON

Question

I've been working on this for hours, searching everywhere, can't seem to solve it. I've left the API URL in, so if you want to take a look (it's public). I'm tired, so if I don't make sense, let me know. I'm trying to basically make a custom layout for the news. But I can't do anything with it, I just have the raw JSON, and I've tried a lot. If you could just give an example of something like a header with the news article name, or something simple, I'll figure it out, but for now, I'm frustrated and running in circles, haha. Thanks!

{
 "location": {
"long": -106.346771,
"countryOrRegion": "Canada",
"provinceOrState": null,
"county": null,
"isoCode": "CA",
"lat": 56.130366
},
"updatedDateTime": "2020-03-31T04:46:00.3795966Z",
"news": [
 {
    "path": "_news/2020-03-31-canada-post-workers-customers-seeing-heightened-safeguards.md",
    "title": "Canada Post workers, customers seeing heightened safeguards",
    "excerpt": "COVID-19 ...",
    "heat": null,
    "tags": [
      "CA"
    ]  ,
    "type": "article",
    "webUrl": "https://nnsl.com/yellowknifer/canada-post-workers-customers-seeing-heightened-safeguards/",
    "ampWebUrl": null,
    "cdnAmpWebUrl": null,
    "publishedDateTime": "2020-03-30T21:00:00-07:00",
    "updatedDateTime": null,
    "provider": {
      "name": "Northern News Services",
      "domain": "nnsl.com",
      "images": null,
      "publishers": null,
      "authors": null
    },
    "images": null,
    "locale": "en-us",
    "categories": [
      "news"
    ],
    "topics": [
      "Coronavirus in Canada",
      "Coronavirus"
    ]
  },
  {
    "path": "_news/2020-03-31-in-canada-and-abroad-covid-19-super-spreaders-could-be-anywhere.md",
    "title": "In Canada and abroad, COVID-19 super-spreaders could be anywhere",
    "excerpt": "In Canada, while no specific individual has yet been identified as super-spreader ... 
Scientists are researching how much of a role silent carriers of COVID-19 - those who exhibit no symptoms - play in unknowingly spreading the disease. This is why self-isolation is important, Riskin said. \"It’s a reminder that for Canadians, we all have ...",
     "heat": null,
    " ...etc

Oops, you need a key to view the file. I'll paste in one entry. It is free.

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="./jquery-3.4.1.min.js"></script>
<style>
countryOrRegion: font-size: 20px;

</style>
<title></title>
</head>
<body>

<div id="demo"></div>


<script>
 $.ajax({
  type: "GET",
  url: "https://api.smartable.ai/coronavirus/news/CA",
  // Request headers
  beforeSend: function(xhrObj) {
    xhrObj.setRequestHeader("Cache-Control", "no-cache");
    xhrObj.setRequestHeader("Subscription-Key", "my free key");
    },
})

.done(function (data) {

var myJSON = JSON.stringify(data);

document.getElementById("demo").innerHTML = myJSON;

})
</script>

</body>

its up to you to decide how the news is laid out. via cards or tabular, its up to you. use an html free template if you'd like — Kevin, Mar 31 '20 at 05:45
I can't get any of the news to display in HTML. I know how I want to do it, but I can't get it to parse/decode. No matter what I do I get the same old raw form. — sandorfalot, Mar 31 '20 at 05:50
I know you're tired and probably frustrated with this but if you could show what you've tried, then we can help you get it working. Try searching for something like _"display JSON in HTML table"_, there's plenty of posts like that. Here's one good example ~ [Parsing JSON objects for HTML table](https://stackoverflow.com/questions/17066636/parsing-json-objects-for-html-table) — Phil, Mar 31 '20 at 05:56
`JSON.stringify()` turns your data into JSON. While `JSON.parse()` turns it into an Object which you can work with. Add the `dataType: 'json'` property to your `$.ajax` options to receive data as pre-parsed. Then you can use the object in any way you want. — Emiel Zuurbier, Mar 31 '20 at 05:57
I've tried a lot of Show in HTML table, jQuery.each(data.results, function(i, val) { code } (blank page), — sandorfalot, Mar 31 '20 at 06:00
I've tried different variations of what I posted above, none of them work. Blank page. — sandorfalot, Mar 31 '20 at 06:01
To Emiel, thanks, that makes sense. I get an error and blank page when I go from stringify to parse. I get "VM501:1 Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse ()" which seems to mean its a JS object. — sandorfalot, Mar 31 '20 at 06:06

score 3 · Accepted Answer · answered Mar 31 '20 at 06:41

What about using the response as it is? I altered your code to use a free API call from reqres.in, then using specific information from the result.

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
countryOrRegion: font-size: 20px;

</style>
<title></title>
</head>
<body>

<div id="demo">
    <p id="first-name"></p>
    <p id="last-name"></p>
</div>


<script>
 $.ajax({
  type: "GET",
  url: "https://reqres.in/api/users/1",
  // Request headers
  beforeSend: function(xhrObj) {
    xhrObj.setRequestHeader("Cache-Control", "no-cache");
    xhrObj.setRequestHeader("Subscription-Key", "my free key");
    },
})

.done(function (data) {
  console.log('Your response', data)
  document.getElementById("first-name").innerHTML = data.data.first_name;
  document.getElementById("last-name").innerHTML = data.data.last_name;
})
</script>

</body>

So you could use data.location.long, data.location.lat or whatever you need to show from your API call response.

Thank you, with some fiddling, that works out well. Greatly appreciated, cheers! — sandorfalot, Mar 31 '20 at 06:54

score 0 · Answer 2 · answered Mar 31 '20 at 06:46

What I would do is create a template builder function like this:

function BuildNewsTemplate(obj) {
    let str = "<div class='card'>";//outer
    str += `<h2>${obj.title}</h2>`;
    str += `<p>${obj.publishedDateTime}</p>`;
    str += `<a href='${obj.webUrl}'>Read More...</p>`;
    str += "</div>";

    $('#demo').append(str);
}


then in your ajax response you can do this:

.done(function (data) {
   for(let i=0;i<data.news.length;i++){
     BuildNewsTemplate(data.news[i]);
   }    
})

Completely stuck on how to display my JSON in HTML. Edit: I know how i want to format it, I just can't get it to output anything but raw JSON

2 Answers2