Превратить JSON ответ в ленту новостей

Question

Я застрял при переводе информации в более удобный интерфейс. Ниже приведен ответ JSON, полученный от моего сценария. Однако я хотел бы превратить это в стандартную новостную ленту, которую вы бы увидели на веб-сайте. Каков лучший способ go по этому поводу?

Я хочу, чтобы изображение отображалось рядом с заголовком, сводкой и ссылкой URL.

[
  {
    "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
  }
]

Ниже мой js, чтобы инициировать извлечение.

    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();
};

Я использую это в своем HTML для отображения необработанного JSON до манипуляции в то, что я хочу.

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

Answer 1

Я думаю, вы наберете html

sudo codes...
<div>
<p id="foo1"></p>
<p id="foo2"></p>
<img id="fooImg"></img>
</div>

, когда получите ответ json Настройка в html

sudo codes...
if (this.readyState == 4 && this.status == 200) {
    var newsfeed = JSON.parse(this.responseText);
    document.getElementById("news").innerHTML = this.responseText;
    document.getElementById("foo1").innerHTML = newsfeed.foo;
    document.getElementById("foo2").innerHTML = newsfeed.bar;
    document.getElementById("fooImg").src = newsfeed.someImgSrc;
}