Question 109996 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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

  2. 0

    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;
  });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search