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

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.

CodePudding user response：

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

CodePudding user response：

I got it now, it works with this code:

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

I just deleted let = exampleData and replaced exampleData.forEach((itemData) with data.forEach...

Thanks a lot, I spent so much time on this already so I really appreciate your help!