dynamic json array object

Question

I fetching data from database using json in jQuery and asp.net and I am doing this for each table each time. Is there any way to create one function and pass some parameters like (Columns name, Table name and control to show in) for all tables.

function LoadData(Url, Data, ControlToShow, Columns){
    $.ajax({ type: "post",
        url: Url,
        data: Data,
        contentType: "application/json;charset=utf-8", dataType: "json",
        success: function (data) {
            if (data.d != null || data.d != 'null') {
                var items = data.d;

                $("#" + ControlToShow).append(items[0].Columns[1]);
            }
        }
}

Or in another words to use json array object dynamic by passing the column name like

var items = response.d;
var colName = 'Customers';
alert(items[0].colName);

colName = 'CustomerID';
alert(items[0].colName);

Or something like this.

R. Oosterholt · Accepted Answer · 2013-10-21 12:50:52Z

1

In javascript you can access the properties just by accessing them by name:

var items = response.d;
alert(items[0].Customers);  
alert(items[0].CustomerID);

or if the name of the properties is stored in a variable, you can access them like:

var items = response.d;
var colName = 'Customers';
alert(items[0][colName]);

colName = 'CustomerID';
alert(items[0][colName]);

edited Oct 21, 2013 at 12:50

answered Oct 21, 2013 at 11:35

R. Oosterholt

8,2003 gold badges56 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

palaѕн · Accepted Answer · 2013-10-21 11:35:22Z

0

Yes, you can do this :-

function LoadData(Url, Data, ControlToShow, ColumnName) {
    $.ajax({
        type: "post",
        url: Url,
        data: Data,
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function (data) {
            if (data.d != null) {
                var items = data.d;
                $("#" + ControlToShow).append(items[0][ColumnName]);
            }
        }
    });
}

and call it like:

LoadData(serviceUrl, {data_you_need_to_pass}, 'ControlID', 'CustomerID');

answered Oct 21, 2013 at 11:35

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Comments

DanyZift · Accepted Answer · 2013-10-21 11:40:23Z

0

You could create a template view and pass in the data for each table. In the body section you can could simply iterate over the data and append it to the body section of your table.

<table id="<%= YOUR TABLE NAME %>">
<thead>
<tr>
<th><% YOUR COLUMN NAME %></th>
....
</tr>
<thead>
<tbody class="mytable"></tbody>
...
</table>

success: function (data) {
            if (data.d != null || data.d != 'null') {
                var items = data.d;

var tr = $('<tr></tr>').appendTo('.mytable');
                $.each(data.d, function(){

                  //append your td elements to your tr above

                });
            }
    }

answered Oct 21, 2013 at 11:40

DanyZift

6871 gold badge7 silver badges11 bronze badges

Comments

rajesh kakawat · Accepted Answer · 2013-10-21 11:52:51Z

try to create your json something like this. so you can read column and data to create table.

     {"column_name":['column1','column2','column3'],"records":[{'id':1 ...}]}

CHECK THE EDIT CODE,FIDDLE

        $(function(){
            var json ={"column_name":['ID','COUNTRY'],"records":[{"id":1 ,"name": "USA"},{"id":2 ,"name": "INDIA"},{"id":3 ,"name": "AUSTRALIA"}]};
            var column_arr = json.column_name;
            var column_arr_length = column_arr.length;//no of column present.

            // creating table header
            var $thead = $('#mytable thead');
            var row = '<tr>'
            for(var i= 0; i< column_arr_length;i++){
                row += '<th>'+column_arr[i]+'</th>';
            }
            row += '</tr>';

            $thead.append(row);// adding head to table

            // creating table body
            var $body = $('#mytable tbody');
            var body_data = json.records;
            var body_data_length = body_data.length;//no of row in  body.
            var body_row = '';
            for(var i= 0; i< body_data_length;i++){
                var row_obj = body_data[i];
                console.log(row_obj);
                body_row += '<tr>';
                for(var key in row_obj){
                    body_row += '<td>'+row_obj[key]+'</td>';
                }
                body_row += '</tr>';
            }

            $body.append(body_row);// adding rows to table
        })

HTML CODE

    <table id="mytable">
        <thead></thead>
        <tbody></tbody>
    </table>

Collectives™ on Stack Overflow

dynamic json array object

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related