jQuery का उपयोग करना अजाक्स प्रतिक्रिया (JSON) से तालिका पंक्तियों का निर्माण करने के

Question

संभव Nested elements

मैं सर्वर साइड ajax प्रतिक्रिया (JSON) और मैं से हो रही है गतिशील तालिका पंक्तियों बना सकते हैं और करने के लिए उन्हें संलग्न करने के लिए कोशिश कर रहा हूँ नकल मौजूदा तालिका (आईडी: #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। मैं क्या गलत कर रहा हूं?

Answer 1

उपयोग आप प्रत्येक कोशिका और पंक्ति के लिए jQuery वस्तुओं नहीं बनाना चाहिए। इस प्रयास करें:

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("")); 
} 

Answer 2

इस तरह यह प्रयास करें:

$.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'); 
}); 

डेमो: .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()); 
    }); 
}); 

Answer 3

के बजाय http://jsfiddle.net/R5bQG/

Answer 4

jQuery.html इनपुट के रूप में स्ट्रिंग या कॉलबैक लेता है, यकीन नहीं है कि आपके उदाहरण काम कर रहा है ... $('<tr>').append($('<td>' + item.rank + '</td>').append ... की तरह कुछ की कोशिश करो और तुम टैग fromation के साथ कुछ निश्चित समस्या है।यह $('<tr/>') होना चाहिए और $('<td/>')

Answer 5

इस प्रयास करें:

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

Answer 6

यहाँ से 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> 

निम्नलिखित जे एस कोड प्रत्येक 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) 
    ); 
}); 

Answer 7

$.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"); 
    } 
}); 

Answer 8

मैं इस 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); 
} 
; 

Answer 9

आप इसे ऐसा कुछ कर सकते हैं:

<!-- 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> 

Answer 10

मैं अजाक्स से JSON प्रतिक्रिया मिल और parseJSON का उपयोग किए बिना पार्स करने के लिए निम्न करें:

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

आप पाठ के रूप में डेटाप्रकार का उपयोग कर रहे हैं तो आप की जरूरत है $ .parseJSON (प्रतिक्रिया)