none
simple JSON raw data array display in html <div> section RRS feed

  • Question

  • I am a beginner and I would need help. I have an aspx page which has a table inside there is a div tag as shown below:

    <div id="divAcademicFields" class="inside">
      <!--<%= RenderAcademicFields() %> this was server side code and commended as I want to use client now --> 
    </div>


    I also have a Jquery block on the same page:

    <script type="text/javascript">

    $(document).ready(function () {

            // get academic fields in a raw data
            $.getJSON('http://services.corp.com/app/academics/?format=json', function(data){
                var custhtml = "";
                $.each( data, function(key, value) {
                    var temp = key;
                    var temp2 = value;
                    custhtml += "<input type=checkbox value=" + temp + " /><label> " + temp2 + "</label><br />"
                    //alert( key + ": " + value );
                });

                $("divAcademicFields").append(custhtml);
            });

    </script>

    The service returns all raw data correctly and I verified. How to display format the row html from JSON and display inside the <div>?

    The html should be displayed something similar to the screen

    Please assist.

    Thursday, January 5, 2017 2:40 AM

Answers

  • Hi ShriG,

    We can create a html table and then in Jquery each function generate tr tag and html checkbox input control like below:

    <script type="text/javascript" language="javascript">
            function PopulateCheckBoxList() {
                $.ajax({
                    type: "POST",
                    url: "CheckBoxList.aspx/GetCheckBoxDetails",
                    contentType: "application/json; charset=utf-8",
                    data: "{}",
                    dataType: "json",
                    success: AjaxSucceeded,
                    error: AjaxFailed
                });
            }
            function AjaxSucceeded(result) {
                BindCheckBoxList(result);
            }
            function AjaxFailed(result) {
                alert('Failed to load checkbox list');
            }
            function BindCheckBoxList(result) {
     
                var items = JSON.parse(result.d);
                CreateCheckBoxList(items);
            }
            function CreateCheckBoxList(checkboxlistItems) {
                var table = $('<table></table>');
                var counter = 0;
                $(checkboxlistItems).each(function () {
                    table.append($('<tr></tr>').append($('<td></td>').append($('<input>').attr({
                        type: 'checkbox', name: 'chklistitem', value: this.Value, id: 'chklistitem' + counter
                    })).append(
                    $('<label>').attr({
                        for: 'chklistitem' + counter++
                    }).text(this.Name))));
                });
     
                $('#dvCheckBoxListControl').append(table);
            }
        </script>

    More information please refer:

    Bind a CheckBox list from database using jQuery AJAX

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    • Marked as answer by ShriG Sunday, January 8, 2017 4:16 PM
    Friday, January 6, 2017 3:25 AM

All replies

  • Any advise? Many thanks in advance
    Thursday, January 5, 2017 7:07 AM
  • Hi ShriG,

    We can create a html table and then in Jquery each function generate tr tag and html checkbox input control like below:

    <script type="text/javascript" language="javascript">
            function PopulateCheckBoxList() {
                $.ajax({
                    type: "POST",
                    url: "CheckBoxList.aspx/GetCheckBoxDetails",
                    contentType: "application/json; charset=utf-8",
                    data: "{}",
                    dataType: "json",
                    success: AjaxSucceeded,
                    error: AjaxFailed
                });
            }
            function AjaxSucceeded(result) {
                BindCheckBoxList(result);
            }
            function AjaxFailed(result) {
                alert('Failed to load checkbox list');
            }
            function BindCheckBoxList(result) {
     
                var items = JSON.parse(result.d);
                CreateCheckBoxList(items);
            }
            function CreateCheckBoxList(checkboxlistItems) {
                var table = $('<table></table>');
                var counter = 0;
                $(checkboxlistItems).each(function () {
                    table.append($('<tr></tr>').append($('<td></td>').append($('<input>').attr({
                        type: 'checkbox', name: 'chklistitem', value: this.Value, id: 'chklistitem' + counter
                    })).append(
                    $('<label>').attr({
                        for: 'chklistitem' + counter++
                    }).text(this.Name))));
                });
     
                $('#dvCheckBoxListControl').append(table);
            }
        </script>

    More information please refer:

    Bind a CheckBox list from database using jQuery AJAX

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    • Marked as answer by ShriG Sunday, January 8, 2017 4:16 PM
    Friday, January 6, 2017 3:25 AM
  • Thank you so much Jerry. This worked.
    Sunday, January 8, 2017 4:16 PM