Jquery，json不显示
Jquery，json不显示
提问于 2018-04-02 19:40:52
我正在尝试使用ajax显示一些数据获取。
我不知道为什么要停下来工作。
在$.getJson ... console.log(json)之后，显示正确的值，但追加到容器上不起作用。选择器容器是正确的，我已经用foo值测试过了。(我正在尝试将json附加到容器上，但最终目标是填充表)如果有人有任何想法？我在控制台上没有任何错误，只是没有显示。
console.log("vocabulaire module loaded");
var initData = function(){
$("#Module").html("");
$("#Module").append("<div id='gestion-box'></div>");
$("#Module").append("<div id='container'></div>");
$("#gestion-box").append("<div id='ajout'></div>");
$("#gestion-box").append("<div id='search'></div>");
$("#ajout").append("<h5>Ajout</h5>");
$("#ajout").append("<input id='word' name='hiragana' placeholder='ひらがな' type='text' class='form-control'/>");
$("#ajout").append("<input id='translation' name='traduction' placeholder='Traduction' type='text' class='form-control'/>");
$("#ajout").append("<button id='button-ajout' class='btn'>OK</button>");
$("#search").append("<h5>Search</h5>");
$("#search").append("<input name='word-search' id='word-search' placeholder='Search' type='text' class='form-control'/>");
$("#search").append("<button id='button-all' class='btn btn-info'>Tous</button>");
$("#search").append("<button id='button-unknow' class='btn btn-success'>Non connu</button>");
$("#search").append("<button id='button-know' class='btn btn-warning'>Connu</button>");
$.getJSON( "./modules/vocabulaire/data.json", function( json ) {
console.log(json);
$("#container").append(json);
$("#container").append("<table class='table table-bordered'><tbody>");
$("#container>table>tbody").append(json);
for (var i = 0; i < json.length; i++) {
var checked = + json[i].know == 1?"checked": "";
$("#container>table>tbody").append("<tr><td>"+json[i].word+"</td><td>"+json[i].translation+"</td><td><input type='checkbox' class='know-check' name='know' know-seq='"+i+"' value='Know' "+checked+"></td><td class='delete' delete-seq='"+i+"' >❌</td></tr>");
}
$("#container").append("</tbody></table>");
//SORT BY INPUT
var $rows = $('.table tr');
$('#word-search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
//SORT BY CHECK
$('#button-know').click(function(){
$("input:checkbox:checked").each(function() {
$(this).closest('tr').hide();
});
$("input:checkbox:not(:checked)").each(function() {
$(this).closest('tr').show();
});
});
$('#button-unknow').click(function(){
$("input:checkbox:not(:checked)").each(function() {
$(this).closest('tr').hide();
});
$("input:checkbox:checked").each(function() {
$(this).closest('tr').show();
});
});
$('#button-all').click(function(){
$("input:checkbox:not(:checked)").each(function() {
$(this).closest('tr').show();
});
$("input:checkbox:checked").each(function() {
$(this).closest('tr').show();
});
});
}).done(function(){
console.log("Data loaded");
$('.know-check').click(function() {
$.post("./modules/vocabulaire/api.php", {"edit":"edit", "id": $(this).attr("know-seq"), "value":$(this).prop( "checked" )} ).done(function(data){});
});
$('#button-ajout').click(function(){
console.log($('#word').val());
console.log($('#translation').val());
$.post( "./modules/vocabulaire/api.php", {"add":"add", "word":$('#word').val(), "translation": $('#translation').val()} ).done(function(data){
initData();
});
});
$('.delete').click(function(){
console.log($(this).attr("delete-seq"));
$.post( "./modules/vocabulaire/api.php", {"delete":"delete", "id": $(this).attr("delete-seq")} ).done(function(data){
initData();
});
});
});
}
initData();
//$("#container").append(data);编辑:使用JSON.stringify，我可以添加json，但不能用它来显示表。结果是：
{"1":{"word":"test","translation":"poiu","know":0},"2":{"word":"zz","translation":"Rencontrer","know":0},"3":{"word":"aa","translation":"Rencontrer","know":0}}回答 3
Stack Overflow用户
发布于 2018-04-02 19:48:38
从$.getJSON返回的数据是一个对象，它在调用console.log时被转换为人类可读的格式，但不能附加到html元素。尝试使用JSON.stringify()转换为字符串。
Stack Overflow用户
发布于 2018-04-02 19:52:01
根据您所说的$("#container")是正确的选择器，
只需在附加JSON之前使用js函数JSON.stringify()即可。
为什么？因为除此之外，您的var json是一个Object，您不能将其附加到选择器中，只能将其打印为console.log()。
$("#container").append(JSON.stringify(json));Stack Overflow用户
发布于 2018-04-02 21:50:38
好的，对不起，问题不在这里，而是在编辑json的Php上
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49610606
复制相关文章
相似问题
腾讯云开发者
