mardi 21 avril 2020

Turn JSON response into News feed

I am stuck on translating information into a more client-friendly interface. Below is the JSON response I have received from my script. However, I would like to turn this into a standard news feed you would see on a website. What is the best way to go about this?

I am looking to have the image displayed next to the headline, summary, and URL link.

[
  {
    "datetime": 1545215400000,
    "headline": "Voice Search Technology Creates A New Paradigm For Marketers",
    "source": "Benzinga",
    "url": "https://cloud.iexapis.com/stable/news/article/8348646549980454",
    "summary": "<p>Voice search is likely to grow by leap and bounds, with technological advancements leading to better adoption and fueling the growth cycle, according to Lindsay Boyajian, <a href=\"http://loupventures.com/how-the-future-of-voice-search-affects-marketers-today/\">a guest contributor at Loup Ventu...",
    "related": "AAPL,AMZN,GOOG,GOOGL,MSFT",
    "image": "https://cloud.iexapis.com/stable/news/image/7594023985414148",
    "lang": "en",
    "hasPaywall": true
  }
]

Below is my js to initiate the pull.

    function news() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var newsfeed = JSON.parse(this.responseText);
      document.getElementById("news").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "https://cloud.iexapis.com/stable/stock/spy/news/last/1?token=pk_6925213461cb489b8c04a632e18c25dd", false);
  xhttp.send();
};

I use this in my HTML to display the raw JSON before manipulation into what I want.

<div id=news class="text-white-50">
      <script>
        document.onreadystatechange = function() {
           if (document.readyState === 'complete')
           {
              news();
           }
         };
       </script>
    </div>



Aucun commentaire:

Enregistrer un commentaire