無法將JSON對象打印爲HTML格式的javascript

我有以下ajax代碼來處理搜索表單的ajax請求。無法將JSON對象打印爲HTML格式的javascript

$(document).ready(function() { 
$('#alert-message-warning').hide(); 
$('.shadow-z-1').hide(); 
$('#dateprice-search').on('click', '#btn-search', function() { 
    $.ajax({ 
     type: 'post', 
     url: '/date-price', 
     data: { 
      '_token': $('#csrf').val(), 
      'product_id': $("#product_id").val(), 
      'start': $("#start").val(), 
      'end': $("#end").val() 
     }, 
     success: function(data) { 
      console.log(Object.keys(data).length); 
      console.log(data); 
      var cha = Object.keys(data).length; 
      if (cha > 0) { 
       $('.shadow-z-1').show(); 
       $('.shadow-z-1').append("<tr class='liquid-row><td>" + data.start + "</td><td>"+ data.end + "</td><td>" + data.end + "</td><td><a class='btn-m btn btn-m-success'>Available</a></td></tr>"); 
      } 
      else{ 
       $('#alert-message-warning').show(); 
       $("#alert-message-warning").fadeTo(2000, 5000).slideUp(5000, function(){ 
        $("#alert-message-warning").slideUp(5000); 
       });     
      } 
     } 
    }); 
    }); 
});

如果需要參數被選擇並且提交結果在JSON對象中給出。例如5個對象，但java腳本代碼打印數據庫表的所有行（全部10行）。我在這裏做什麼錯了？詳細JSON對象

來源

2017-06-22 Zachary Dale

什麼是data.start和data.end？ –

您在成功回調函數中使用'data.start'和'data.end'，但在數據中沒有像'start'或'end'這樣的屬性。正如你所說的控制檯屏幕截圖，數據是從ajax請求返回的json對象，它沒有'start'或'end'屬性 –

你可以向我們展示你正在獲取的JSON數據。 – Shubham

什麼你得到的是對象的數組。因此訪問你的對象你必須去那個索引並獲取對象。

如：data[0].start

或者你也可以使用循環。

for(let i in data) { 
    console.log(data[i].start + "\t" + data[i].end); 
}

來源

2017-06-22 05:43:22 Shubham

$(document).ready(function() { 
    $('#alert-message-warning').hide(); 
    $('.shadow-z-1').hide(); 
    $('#dateprice-search').on('click', '#btn-search', function() { 
     $.ajax({ 
      type: 'post', 
      url: '/date-price', 
      data: { 
       '_token': $('#csrf').val(), 
       'product_id': $("#product_id").val(), 
       'start': $("#start").val(), 
       'end': $("#end").val() 
      }, 
      success: function(data) { 
       console.log(Object.keys(data).length); 
       console.log(data); 
       var cha = Object.keys(data).length; 
       $('.shadow-z-1').show(); 
       if (cha > 0) { 
        for (var i = 0; i < data.length; i++) { 

         $('.shadow-z-1').append("<tr class='liquid-row><td>" + data[i].start + "</td><td>"+ data[i].end + "</td><td>" + data[i].end + "</td><td><a class='btn-m btn btn-m-success'>Available</a></td></tr>"); 
        } 
       } 
       else{ 
        $('#alert-message-warning').show(); 
        $("#alert-message-warning").fadeTo(2000, 5000).slideUp(5000, function(){ 
         $("#alert-message-warning").slideUp(5000); 
        });     
       } 
      } 
     }); 
     }); 
    });

你剛纔通過你的數據需要循環。

來源

2017-06-22 05:45:17

變量數據是整個Json對象，您需要遍歷此對象並追加每個對象。

data.foreach(function(obj) { 
    $('.shadow-z-1').append("<tr class='liquid-row><td>" + obj.start + "</td><td>"+ obj.end + "</td><td><a class='btn-m btn btn-m-success'>Available</a></td></tr>"); 
})

這樣你迭代和附加結果。在新的Ajax調用中，您可能希望刪除所有內容，以便不混合來自不同調用的結果。

希望這會有幫助

來源

2017-06-22 05:56:31 nogdacosta

無法將JSON對象打印爲HTML格式的javascript

回答

相關問題