How to bind Ajax Data In Html Form

Question

when get ajax data from url then i want show data in Html form

Json Data

[
  {
    "Buildings": {
      "Campuses": {
        "ID": 3,
        "Campus_Name": "Dhaka"
      },
      "ID": 9,
      "Building_Name": "D",
      "CampusID": 3
    },
    "Campuses": {
      "ID": 3,
      "Campus_Name": "Dhaka"
    },
    "ID": 17,
    "Floor_Name": "1st",
    "CampusID": 3,
    "BuildingID": 9
  }
]

Html

   <form id="form">
@Html.TextBoxFor(m => m.ID, new { @id = "Floor_ID", @class = "form-control", @placeholder = "Floor_ID**" })
                        <div class="form-group">
                            @Html.LabelFor(model => model.Floor_Name, htmlAttributes: new { @class = "col-form-label" })
                            @Html.TextBoxFor(m => m.Floor_Name, new { @id = "FloorName", @class = "form-control", @placeholder = "Name*" })
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(model => model.CampusID, htmlAttributes: new { @class = "col-form-label" })
                            @Html.DropDownListFor(m => m.CampusID, ViewBag.CampusID as SelectList, new { @class = "form-control", @id = "CampusID" })
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(model => model.BuildingID, htmlAttributes: new { @class = "col-form-label" })
                            <select id="BuildingID" name="BuildingID" class="form-control">
                                <option value="" >---Select---</option>
                            </select>

                </form>

Oluwadamilola Adegunwa · Accepted Answer · 2020-04-05 00:15:43Z

Try something like this!! for the js we have

<script>
    var array = JSON.parse(`[
                    {
                        "Id":1,
                        "Name":"Damilola",
                        "Age": 27
                    },
                    {
                        "Id":2,
                        "Name":"Mayowa",
                        "Age": 28
                    },
                    {
                        "Id":3,
                        "Name":"Toluwalope",
                        "Age": 24
                    },
                    {
                        "Id":1,
                        "Name":"Olaoluwa",
                        "Age": 21
                    }
                ]`);
    array.forEach(element => {
        document.getElementById("tbody").innerHTML += `<tr>
                                                            <td>${element.Id}</td>
                                                            <td>${element.Name}</td>
                                                            <td>${element.Age}</td>
                                                        </tr>`;
        console.log(element.Id, element.Name, element.Age);
    });

</script>

/////////////////////////////////////////////////for the html, you can have

<table id="table">
    <tr>
        <thead>
            <tr>
                <td>Id</td>
                <td>Full Name</td>
                <td>Official Age</td>
            </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
        <tfoot>
            <tr>
                <td>Id</td>
                <td>Full Name</td>
                <td>Official Age</td>
            </tr>
        </tfoot>
    </tr>
</table>

Oluwadamilola Adegunwa · Accepted Answer · 2020-04-05 00:43:59Z

0

If what you really want is to show the data, you can do this, given the html (cshtml) above

//use this to parse the json string as object

var data = JSON.parse(THE-JSON-STRING);

//use this to target the elements you want

document.getElementById("FloorName").value = data.Floor_Name;

document.getElementById("CampusID").value = data.CampusID;

document.getElementById("BuildingID").value = data.BuildingID;

answered Apr 5, 2020 at 0:43

Oluwadamilola Adegunwa

3592 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to bind Ajax Data In Html Form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related