Lesson 5 — Pull Data In

The list shouldn't live inside the program forever. On a real ranch the record book is a separate file. fetch() is how the page goes and gets that file.

Live result

Step 1 — herd.json

New file next to index.html. Same animals, no JavaScript around them.

[
  {
    "name": "Black Gold",
    "tag": "FW-01",
    "breed": "Texas Longhorn",
    "notes": "Rare black pattern, 100\"+ horns",
    "startWeight": 1100,
    "currentWeight": 1280
  }
]

Put all four animals in the array. Comma between objects. No comma after the last one.

Step 2 — fetch it

fetch("herd.json")
  .then(function (response) { return response.json(); })
  .then(function (herd) {
    var tbody = document.getElementById("herd-body");
    tbody.innerHTML = "";
    herd.forEach(function (animal) {
      var gain = animal.currentWeight - animal.startWeight;
      tbody.insertAdjacentHTML("beforeend",
        "" + animal.name + "" + animal.tag + "" +
        gain + " lbs"
      );
    });
  })
  .catch(function () {
    document.getElementById("herd-body").innerHTML =
      "Could not load the herd file.";
  });

Important

fetch of a local file often fails if you just double-click index.html (browsers block it). It works when the page is on a real site — like this one — or a tiny local server. If your desktop copy errors, that's the browser being careful, not your JSON being wrong.

That's the full first project: bones, paint, math, data, fetch. Garden sensors come later. Same idea.