it-swarm.dev

باستخدام jQuery لبناء صفوف الجدول من AJAX استجابة (سلمان)

ممكن تكرار العناصر المتداخلة

أتلقى استجابة من ajax من جانب الخادم (Json) وأحاول إنشاء صفوف الجدول بشكل حيوي وإلحاقها بالجدول الموجود (ID: #records_table) ؛

حاولت تنفيذ الحل في تكرار ممكن لكنه فشل.

إجابتي تبدو كالتالي:

    "[{
      "rank":"9",
      "content":"Alon",
      "UID":"5"
     },
     {
       "rank":"6",
       "content":"Tala",
       "UID":"6"
    }]"

النتيجة المطلوبة هي شيء من هذا القبيل:

<tr>
   <td>9</td>
   <td>Alon</td>
   <td>5</td>  
</tr>
<tr>
   <td>6</td>
   <td>Tala</td>
   <td>5</td>  
</tr>

أريد أن أفعل شيئًا دون تحليل Json ، لذا حاولت أن أفعل ما يلي ، والذي كان بالطبع كارثة:

    function responseHandler(response)
    {

        $(function() {
            $.each(response, function(i, item) {
                $('<tr>').html(
                    $('td').text(item.rank),
                    $('td').text(item.content),
                    $('td').text(item.UID)
                ).appendTo('#records_table');

            });
        });


    }

من حل بلدي أحصل على صف واحد فقط مع الرقم 6 في جميع الخلايا. ما الخطأ الذي افعله؟

62
Canttouchit

استخدم .append بدلاً من .html

var response = "[{
      "rank":"9",
      "content":"Alon",
      "UID":"5"
     },
     {
       "rank":"6",
       "content":"Tala",
       "UID":"6"
    }]";

// convert string to JSON
response = $.parseJSON(response);

$(function() {
    $.each(response, function(i, item) {
        var $tr = $('<tr>').append(
            $('<td>').text(item.rank),
            $('<td>').text(item.content),
            $('<td>').text(item.UID)
        ); //.appendTo('#records_table');
        console.log($tr.wrap('<p>').html());
    });
});
110
drizzie

جرب هذا (تم تحديث الرابط التجريبي):

success: function (response) {
        var trHTML = '';
        $.each(response, function (i, item) {
            trHTML += '<tr><td>' + item.rank + '</td><td>' + item.content + '</td><td>' + item.UID + '</td></tr>';
        });
        $('#records_table').append(trHTML);
    }

Fiddle DEMO WITH AJAX

34
Neeraj Singh

إليك إجابة كاملة من hmkcode.com

إذا كان لدينا مثل هذه البيانات JSON

// JSON Data
var articles = [
    { 
        "title":"Title 1",
        "url":"URL 1",
        "categories":["jQuery"],
        "tags":["jquery","json","$.each"]
    },
    {
        "title":"Title 2",
        "url":"URL 2",
        "categories":["Java"],
        "tags":["Java","json","jquery"]
    }
];

ونحن نريد أن نرى في هذا الهيكل الجدول

<table id="added-articles" class="table">
            <tr>
                <th>Title</th>
                <th>Categories</th>
                <th>Tags</th>
            </tr>
        </table>

سيقوم رمز JS التالي بملء إنشاء صف لكل عنصر JSON

// 1. remove all existing rows
$("tr:has(td)").remove();

// 2. get each article
$.each(articles, function (index, article) {

    // 2.2 Create table column for categories
    var td_categories = $("<td/>");

    // 2.3 get each category of this article
    $.each(article.categories, function (i, category) {
        var span = $("<span/>");
        span.text(category);
        td_categories.append(span);
    });

    // 2.4 Create table column for tags
   var td_tags = $("<td/>");

    // 2.5 get each tag of this article    
    $.each(article.tags, function (i, tag) {
        var span = $("<span/>");
        span.text(tag);
        td_tags.append(span);
    });

    // 2.6 Create a new row and append 3 columns (title+url, categories, tags)
    $("#added-articles").append($('<tr/>')
            .append($('<td/>').html("<a href='"+article.url+"'>"+article.title+"</a>"))
            .append(td_categories)
            .append(td_tags)
    ); 
});  
10
hmkcode

جربه مثل هذا:

$.each(response, function(i, item) {
    $('<tr>').html("<td>" + response[i].rank + "</td><td>" + response[i].content + "</td><td>" + response[i].UID + "</td>").appendTo('#records_table');
});

العرض التوضيحي: http://jsfiddle.net/R5bQG/

5
tymeJV
$.ajax({
  type: 'GET',
  url: urlString ,
  dataType: 'json',
  success: function (response) {
    var trHTML = '';
    for(var f=0;f<response.length;f++) {
      trHTML += '<tr><td><strong>' + response[f]['app_action_name']+'</strong></td><td><span class="label label-success">'+response[f]['action_type'] +'</span></td><td>'+response[f]['points']+'</td></tr>';
     }
    $('#result').html(trHTML); 
    $( ".spin-grid" ).removeClass( "fa-spin" );
  }
});
4
Iftikhar Khan

يجب عليك عدم إنشاء كائنات مسج لكل خلية وصف. جرب هذا:

function responseHandler(response)
{
     var c = [];
     $.each(response, function(i, item) {             
         c.Push("<tr><td>" + item.rank + "</td>");
         c.Push("<td>" + item.content + "</td>");
         c.Push("<td>" + item.UID + "</td></tr>");               
     });

     $('#records_table').html(c.join(""));
}
4
YD1m

البيانات كـJSON:

data = [
       {
       "rank":"9",
       "content":"Alon",
       "UID":"5"
       },
       {
       "rank":"6",
       "content":"Tala",
       "UID":"6"
       }
       ]

يمكنك استخدام jQuery للتكرار عبر JSON وإنشاء جداول بشكل حيوي:

num_rows = data.length;
num_cols = size_of_array(data[0]);

table_id = 'my_table';
table = $("<table id=" + table_id + "></table>");

header = $("<tr class='table_header'></tr>");
$.each(Object.keys(data[0]), function(ind_header, val_header) {
col = $("<td>" + val_header + "</td>");
header.append(col);
})
table.append(header);

$.each(data, function(ind_row, val) {
row = $("<tr></tr>");
$.each(val, function(ind_cell, val_cell) {
col = $("<td>" + val_cell + "</td>");
row.append(col);
})
table.append(row);
})

هنا هي وظيفة size_of_array:

function size_of_array(obj) {
    size = Object.keys(obj).length;
    return(size)
    };

يمكنك أيضًا إضافة التصميم إذا لزم الأمر:

$('.' + content['this_class']).children('canvas').remove();
$('.' + content['this_class']).append(table);
$('#' + table_id).css('width', '100%').css('border', '1px solid black').css('text-align', 'center').css('border-collapse', 'collapse');
$('#' + table_id + ' td').css('border', '1px solid black');

النتيجة :

 enter image description here 

OR USE AZLE

فيAzleيمكنك ببساطة إضافة بيانات JSON لإنشاء جدول على النحو التالي:

إضافة قسم مع div عقد:

az.add_sections({
    "this_class": "my_sections",
    "sections": 1
})
az.add_html('my_sections', 1, {
    "html": "<div class='holdng_div'></div>"
})

 enter image description here 

إنشاء دالة ملفوفة يرسم الجدول. أنا هنا استخدم Azle's add_layout ، و fill_row وظائف ، إلى جانب بعض الحلقات والتصميم:

az.add_wrapped_function({
        "name": "draw_table",
        "function": function draw_table(data) {
            az.add_layout('holdng_div', 1, {
                "this_class": "my_table",
                "row_class": "my_table_rows",
                "cell_class": "my_table_cells",
                "number_of_rows": data.length,
                "number_of_columns": 5
            })
            data_ = data
            az.fill_row('my_table', 1, {
                "header": false,
                "cell_class": "my_table_cells",
                "text_class": "header_text",
                "row_number": 1,
                "array": Object.keys(data[0])
            })
            az.all_style_text('header_text', {
                "color": "yellow",
                "font-family": "Arial"
            })
            az.call_multiple({
                "iterations": data.length,
                "function": `
                    az.fill_row('my_table', 1, {
                        "header": true,
                        "cell_class": "my_table_cells",
                        "row_number": index + 1,
                        "array": [data_[index]['sepalLength'],data_[index]['sepalWidth'],data_[index]['petalLength'],data_[index]['petalWidth'],data_[index]['species']]
                        })
                        `
            })
            az.alternate_row_color('my_table', 1, 'whitesmoke', '#33AADE', 'black', 'black', true)
        }
    })

أخيرًا ، اتصل بواجهة برمجة التطبيقات (API) التي تُرجع البيانات (هنا أستخدم مجموعة بيانات Iris المستضافة على Github) وقم بتمرير تلك البيانات إلى دالة الالتفاف الخاصة بنا:

az.call_api({
        "url": "https://raw.githubusercontent.com/domoritz/maps/master/data/iris.json",
        "parameters": {},
        "done": "az.call_wrapped_function.draw_table(data)"
    })

النتيجة :

 enter image description here 

هنا هو Gist

هنا هو كمان

2
Cybernetic

يمكنك أن تفعل ذلك شيء مثل هذا:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <script>
    $(function(){

    $.ajax({
    url: '<Insert your REST API which you want GET/POST/PUT/DELETE>',
    data: '<any parameters you want to send as the Request body or query string>',
    dataType: json,
    async: true,
    method: "GET"
    success: function(data){

    //If the REST API returned a successful response it'll be stored in data, 
    //just parse that field using jQuery and you're all set

    var tblSomething = '<thead> <tr> <td> Heading Col 1 </td> <td> Heading Col 2 </td> <td> Col 3 </td> </tr> </thead> <tbody>';

    $.each(data, function(idx, obj){

    //Outer .each loop is for traversing the JSON rows
    tblSomething += '<tr>';

    //Inner .each loop is for traversing JSON columns
    $.each(obj, function(key, value){
    tblSomething += '<td>' + value + '</td>';
    });
    tblSomething += '</tr>';
    });

    tblSomething += '</tbody>';

    $('#tblSomething').html(tblSomething);
    },
    error: function(jqXHR, textStatus, errorThrown){
    alert('Hey, something went wrong because: ' + errorThrown);
    }
    });


    });
    </script>


    <table id = "tblSomething" class = "table table-hover"></table>
1
Kunal Mukherjee

لقد خلقت هذه الوظيفة JQuery

/**
 * Draw a table from json array
 * @param {array} json_data_array Data array as JSON multi dimension array
 * @param {array} head_array Table Headings as an array (Array items must me correspond to JSON array)
 * @param {array} item_array JSON array's sub element list as an array
 * @param {string} destinaion_element '#id' or '.class': html output will be rendered to this element
 * @returns {string} HTML output will be rendered to 'destinaion_element'
 */

function draw_a_table_from_json(json_data_array, head_array, item_array, destinaion_element) {
    var table = '<table>';
    //TH Loop
    table += '<tr>';
    $.each(head_array, function (head_array_key, head_array_value) {
        table += '<th>' + head_array_value + '</th>';
    });
    table += '</tr>';
    //TR loop
    $.each(json_data_array, function (key, value) {

        table += '<tr>';
        //TD loop
        $.each(item_array, function (item_key, item_value) {
            table += '<td>' + value[item_value] + '</td>';
        });
        table += '</tr>';
    });
    table += '</table>';

    $(destinaion_element).append(table);
}
;
1
M_R_K

هذه هي عينة العمل التي قمت بنسخها من مشروعي.

 function fetchAllReceipts(documentShareId) {

        console.log('http call: ' + uri + "/" + documentShareId)
        $.ajax({
            url: uri + "/" + documentShareId,
            type: "GET",
            contentType: "application/json;",
            cache: false,
            success: function (receipts) {
                //console.log(receipts);

                $(receipts).each(function (index, item) {
                    console.log(item);
                    //console.log(receipts[index]);

                    $('#receipts tbody').append(
                        '<tr><td>' + item.Firstname + ' ' + item.Lastname +
                        '</td><td>' + item.TransactionId +
                        '</td><td>' + item.Amount +
                        '</td><td>' + item.Status + 
                        '</td></tr>'
                    )

                });


            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);

            }

        });
    }
    
    
    // Sample json data coming from server
    
    var data =     [
    0: {Id: "7a4c411e-9a84-45eb-9c1b-2ec502697a4d", DocumentId: "e6eb6f85-3f44-4bba-8cb0-5f2f97da17f6", DocumentShareId: "d99803ce-31d9-48a4-9d70-f99bf927a208", Firstname: "Test1", Lastname: "Test1", }
    1: {Id: "7a4c411e-9a84-45eb-9c1b-2ec502697a4d", DocumentId: "e6eb6f85-3f44-4bba-8cb0-5f2f97da17f6", DocumentShareId: "d99803ce-31d9-48a4-9d70-f99bf927a208", Firstname: "Test 2", Lastname: "Test2", }
];
  <button type="button" class="btn btn-primary" onclick='fetchAllReceipts("@share.Id")'>
                                        RECEIPTS
                                    </button>
 
 <div id="receipts" style="display:contents">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Transaction</th>
                            <th>Amount</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
         </div>
         
 
    
    
    
0
Malhaar Punjabi

يأخذ jQuery.html السلسلة أو رد الاتصال كمدخلات ، ولست متأكدًا من كيفية عمل مثالك ... جرب شيئًا مثل $('<tr>').append($('<td>' + item.rank + '</td>').append ... ولديك بعض المشكلات المحددة في علامات التمييز. يجب أن يكون $('<tr/>') و $('<td/>')

0
duskpoet

أفعل ما يلي للحصول على استجابة JSON من Ajax والتحليل دون استخدام parseJson:

$.ajax({
  dataType: 'json', <----
  type: 'GET',
  url: 'get/allworldbankaccounts.json',
  data: $("body form:first").serialize(),

إذا كنت تستخدم dataType كنص ، فأنت بحاجة إلى $ .parseJSON (استجابة)

0
Harpreet