for循环json数据到html重复输出

Question

        var data = {
            "message":"",
            "error":"false",
            "human":[
                {
                    "title":"我的活动",
                    "title_r":"8/23",
                    "msg":[
                        {
                            "name":"一起去品尝茶论道吧",
                            "name_r":"一对一",
                            "content":"报名费5元/人",
                            "content_r":"邀请3-5人",
                            "contents":"2018-02-07 19:23:37",
                            "contents_r":"20人报名",
                            "address":"广东珠海九州大道西路18号3楼乐茗茶楼",
                            "address_r":"25.36KM"
                        }
                    ]
                },
                {
                    "title":"我的需求",
                    "title_r":"25/108",
                    "msg":[
                        {
                            "name":"找个朋友看电影",
                            "name_r":"10元/小时",
                            "content":"地点待定",
                            "content_r":"邀请1人",
                            "contents":"时间待定",
                            "contents_r":"256人报名",
                            "address":"",
                            "address_r":""
                        }
                    ]
                },
                {
                    "title":"我的网信",
                    "title_r":"1/12",
                    "msg":[
                        {
                            "name":"肯德基",
                            "name_r":"10,568元",
                            "content":"回购1.1 分红5% 递增10%",
                            "content_r":"面值100元",
                            "contents":"发行50,000元 95元/份",
                            "contents_r":"完成16,000",
                            "address":"",
                            "address_r":""
                        }
                    ]
                }
            ]
            };

            var country;
            var amount;
            var people;
            var html_box = "";
            var html_top = "";
            var html_bot = "";
            var object;
            var count = 0;
            var imgHTM="<img src='../web/img/list-img.jpg'>";
            for(x in data['human']){
                count++;
                object = data['human'][x];
                console.log(object);
                country = object['title'];
                amount = object['title_r'];
                people = object['msg'];

                div_box = "<div class='m-content'>";
                div_country = "<div class='m-c_title'>";
                html_top += div_country+"<h1 id='attitle' class='fl'>"+country+"</h1>"+"<p id='attitle_r' class='fr'>"+amount+"</p>";
                html_top+="</div>";
                html_bot += "<div class='m-c_content'>";
                for(m in people){
                    person = people[m];
                    html_bot += imgHTM;
                    html_bot += "<p class='m-c_top'><span class='m-c_t'>"+person['name']+"<span><span class='fr'>"+person['name_r']+"</span></p>";
                    html_bot += "<p>"+person['content']+"<span><span class='fr'>"+person['content_r']+"</span></p>";
                    html_bot += "<p>"+person['contents']+"<span><span class='fr'>"+person['contents_r']+"</span></p>";
                    html_bot += "<p class='address'>"+person['address']+"<span><span class='fr'>"+person['address_r']+"</span></p>";
                    html_bot += "</div>";
                }
                
                html_box += div_box+html_top+html_bot+"</div>";
            }
            $("#container").html(html_box);

我想要循环输出这三组数据到html，但for循环出来类似1，12，123这样重复输出

Answer 1

以下是你修改问题后的回答：
你这种布局的情况，其实第一组、第二组、第三组应该一样的布局吧，没必要搞那复杂弄两层循环啊，一次循环就可以了：

        var tpl = '';
        var count = 0;
        var imgHTM = "<img src='../web/img/list-img.jpg'>";
        $.each(data.human, function (i, item) {
            var human = item;
            var people = item.msg[0];
            tpl += '<div class="m-content">'+
            '<div class="m-c_title">'+
                '<h1 id="attitle" class="fl">'+ human.title +'</h1>'+
                '<p id="attitle_r" class="fr">'+ human.title_r +'</p>'+
            '</div>'+
            '<div class="m-c_content">'+
                '<img src="../web/img/list-img.jpg">'+
                '<p class="m-c_top">'+
                    '<span class="m-c_t">'+ people.name +
                        '<span>'+
                            '<span class="fr">'+ people.name_r +'</span>'+
                        '</span>'+
                    '</span>'+
                '</p>'+
                '<p>'+ people.content +
                    '<span>'+
                        '<span class="fr">'+ people.content_r +'</span>'+
                    '</span>'+
                '</p>'+
                '<p>'+ people.contents +''+
                    '<span>'+
                        '<span class="fr">'+ people.contents_r +'</span>'+
                    '</span>'+
                '</p>'+
                '<p class="address">'+ people.address +
                    '<span>'+
                        '<span class="fr">'+ people.address_r +'</span>'+
                    '</span>'+
                '</p>'+
            '</div>'+
        '</div>';
        });
        $("#container").html(tpl);

像这种拼html的情况，最好还是找个模板语言代替吧

Answer 2

JSON 格式错了吧，human数组里面第一个对象里面有一个msg属性的数组，但是后面两个对象又叫people了。

Answer 3

在你的代码上有删减。（看你定义的乱七八糟的头晕）,代码排版有点乱，
`
var object;
var count = 0;
var html_box = "";
for (x in data['human']) {
var html_top = "";
var html_bot = "";
count++;
object = data'human';
console.log(object);
var title = object['title'];
var title_r = object['title_r'];
var msg = object['msg'];
div_box = "<div class='content'>";
html_top = "<div class='title'>";
html_top += "<h1>" + title + "</h1>" + "<p>" + title_r + "</p>";
html_top += "</div>";
for (m in msg) {

var childContent = "<div class='m-c_content'>";
person = msg[m];
childContent += "<p><span>" + person['name'] + "<span><span>" + person['name_r'] + "</span></p>";
childContent += "<p>" + person['content'] + "<span><span>" + person['content_r'] + "</span></p>";
childContent += "<p>" + person['contents'] + "<span><span>" + person['contents_r'] + "</span></p>";
childContent += "<p>" + person['address'] + "<span><span>" + person['address_r'] + "</span></p>";
childContent += "</div>";
html_bot += childContent;

}

html_box += div_box + html_top + html_bot + "</div>";
}
$("#container").html(html_box);`