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

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 (e.g. with jQuery), but they also don’t work with a form.

Answer

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

Advertisement

Answer