javascript - 循环遍历 JSON 数据以填充 HTML

Question

我有以下 JSON 数据，基本上我想做的是使用数组中包含的相关 HTML 填充一些 div。

[{"id":"1","name":"profile title","html":"<h2 class=\"entry-title\" id=\"title\">Settings, Put something here?<\/h2>","typeId":"1"},
{"id":"2","name":"username","html":"<fieldset disabled><br><label for=\"nameinput\">Username<\/label><input type=\"text\" class=\"form-control\" placeholder=\"'.$name.'\" ><\/fieldset><p>","typeId":"1"},
{"id":"3","name":"date of birth","html":"<label for=\"dob\">Date of birth<\/label><input type=\"text\" name=\"dob\" class=\"form-control\" placeholder=\"01\/02\/2000\"><p>","typeId":"1"}]

这是 JS:

$(document).ready(function(){
         $("#profile").one("click",function(){  

                $.ajax( {
                    type: "GET",
                    url: ROOT+"controlpanel/profile",
                    dataType:"json",
                    success: function(data){   

                            $.each(data, function(id, data1) 
                             {

                                    $('#title').html(data1.html);
                                    $('#container').append(data1.html);  
                            });
                        }


        });
    });
});

我遇到的问题是我希望 ID 1 中的 html 位于与 id 2 不同的 div 中。

Answer 1

这个怎么样？

$(document).ready(function(){
    $("#profile").one("click",function(){  
        $.ajax( {
            type: "GET",
            url: ROOT+"controlpanel/profile",
            dataType:"json",
            success: function(data){   

                $.each(data, function(id, data1) 
                {
                    $('#title'+data.id).html(data1.html);
                    $('#container'+data.id).append(data1.html);  
                });
            }
        });
    });
});

当然，如果您的 json 数组可以是任意长度，则很可能您还没有用于放入内容的元素。您可以构建 html 来将数据保存在循环内。或者您可以使用隐藏的 html 模板，并使用 jquery.clone() 复制它，然后将其填充到循环中。您可以使用 jquery.append() 将所有 html 片段添加到同一个容器中，可能会包装在 div 中。您可以使用 jquery('div', {}) 创建一个新元素，将该元素附加到某处并将您的 html 添加到这个新 div。

有很多方法可以处理这个问题。我希望这对您有所帮助。如果您需要更详细的建议，请在您的问题中提供更多详细信息。