for循環(huán)json數(shù)據(jù)到html重復輸出

圖片描述

        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":"我的網(wǎng)信",
                    "title_r":"1/12",
                    "msg":[
                        {
                            "name":"肯德基",
                            "name_r":"10,568元",
                            "content":"回購1.1 分紅5% 遞增10%",
                            "content_r":"面值100元",
                            "contents":"發(fā)行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);

我想要循環(huán)輸出這三組數(shù)據(jù)到html，但for循環(huán)出來類似1，12，123這樣重復輸出

回答

編輯回答

毀憶

JSON 格式錯了吧，human數(shù)組里面第一個對象里面有一個msg屬性的數(shù)組，但是后面兩個對象又叫people了。
圖片描述

2017年4月15日 15:47

編輯回答

抱緊我

以下是你修改問題后的回答：
你這種布局的情況，其實第一組、第二組、第三組應該一樣的布局吧，沒必要搞那復雜弄兩層循環(huán)啊，一次循環(huán)就可以了：

        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的情況，最好還是找個模板語言代替吧

2018年4月20日 04:47

編輯回答

失心人

在你的代碼上有刪減。（看你定義的亂七八糟的頭暈）,代碼排版有點亂，
`
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);`

2017年12月17日 05:41