JSFiddle - React, Tailwind, and code Playground

by Sam Fereday

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<ul class="list-group" data-bind="foreach: bodies">
  <li class="cell">
    <span data-bind="text: estimated_diameter.feet.estimated_diameter_max">...</span>
    <span data-bind="text: estimated_diameter.kilometers.estimated_diameter_max">...</span>
    <span data-bind="text: estimated_diameter.meters.estimated_diameter_max">...</span>
    <span data-bind="text: estimated_diameter.miles.estimated_diameter_max">...</span>
  </li>
</ul>

JavaScript

$.getJSON("https://api.nasa.gov/neo/rest/v1/feed?start_date=2015-09-07&end_date=2015-09-08&api_key=DEMO_KEY", function(data) {

  console.log(data);

  let obj = data.near_earth_objects;
  let latest = [];


  for (var key in obj) {
    latest = obj[key];
  }

  console.log(latest, ko);
  
  let App = function()
  {
     
     this.bodies = ko.observableArray(latest);
     
  }

	ko.applyBindings(new App());

});