How to populate JSON data into HTML form with fetch()?

Question

I want to populate HTML form input fields with JSON data I get from my API. I can display the data in a table with the following code, but I cannot make it work with a form. I tried to address the form with something like or instead of and, but it doesn't work. Does anyone know if I can transform this code to work with a form?

const url = "/api/contacts/" + localStorage.getItem("paraID");
fetch(url).then((res) => {
        res.json().then((data) => {
          console.log(data);
          if (data.length > 0) {
            var temp = "";
            data.forEach((itemData) => {
              temp += "<tr>";
              temp += "<td>" + itemData.studentID + "</td>";
              temp += "<td>" + itemData.nachname + "</td>";
              temp += "<td>" + itemData.studium + "</td>";
              temp += "<td>" + itemData.semester + "</td>";
              temp += "<td>" + itemData.deaktiviert + "</td></tr>";
            });
            document.getElementById("myTable").innerHTML = temp;
          }
        });
      });

The fetch function works, I can see the correct JSON data in the console. It looks like this: [{…}] 0: {studentID: 1, vorname: 'Marie', nachname: 'Bauer', strasse: '', plz: '', …} length: 1 [[Prototype]]: Array(0)

I tried all the different options I found at stackoverflow (eg with jQuery), but they also don't work with a form.

Answer 1

you can try this code:

   <form id="myForm">
        <input name="studentID" />
        <input name="nachname" />
        <input name="studium" />
        <input name="semester" />
        <input name="deaktiviert" />
   </form>

   let exampleData = [{
    studentID: 'value',
    nachname: 'value',
    studium: 'value',
    semester: 'value',
    deaktiviert: 'value',
  }]

  const myForm = document.getElementById('myForm');

  exampleData.forEach((itemData) => {
    myForm['studentID'].value = itemData.studentID;
    myForm['nachname'].value = itemData.nachname;
    myForm['studium'].value = itemData.studium;
    myForm['semester'].value = itemData.semester;
    myForm['deaktiviert'].value = itemData.deaktiviert;
  });

Answer 2

This is how I got it to work:

1. deleted let = exampleData
2. replaced exampleData.forEach((itemData) … with data.forEach((itemData) …

fetch(url).then((res) => {
  res.json().then((data) => {
    console.log(data);
    if (data.length > 0) {
      const myForm = document.getElementById("myForm");
      data.forEach((itemData) => {
        myForm["studentID"].value = itemData.studentID;
        myForm["nachname"].value = itemData.nachname;
        myForm["studium"].value = itemData.studium;
        myForm["semester"].value = itemData.semester;
        myForm["deaktiviert"].value = itemData.deaktiviert;
      });
    }
  });
});