Question posted in
You can find the official documentation here.

How to bind Ajax Data In Html Form – Jquery ajax

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 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;

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search