无法将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

回答

相关问题