想请大家帮忙看看这个双重循环添加内容要怎么写？

Question

for(let i in data_projects) {

                for(let j in data_projects[i].project_img){

                    data_projects_str += [
                        '<div class="picking_info picking_info_name">',
                        '<p>项目名称</p>',
                        '<p class="picking_user_name">'+data_projects[i].project_name+'</p>',
                        '</div>',
                        '<div class="picking_info picking_info_name" style="flex-direction: column;">',
                        '<p>图片信息</p>',
                        '<div class="img_list img_list_2">',
                        '<ul style="padding-bottom: 0px;">',
                        //图片这里又是一个循环，data_projects[i].project_img
                        '<li><img src=""></li>',
                        '</ul>',
                        '</div>',
                        '</div>'
                    ].join ('');
                }

                
            }
            $('.service_items').empty()
            $('.service_items').append(data_projects_str)

data_projects这是一个循环数组，里面还有个字段project_img 里面是每个数组的图片数组，我有点不知道怎么写了，这种双重循环 添加数据的

Answer 1

两层遍历就整不会了？

var data_projects_str = data_projects.map(v => `
    <div class="picking_info picking_info_name">
        <p>项目名称</p>
        <p class="picking_user_name">${v.project_name}</p>
    </div>
    <div class="picking_info picking_info_name" style="flex-direction: column;">
        <p>图片信息</p>
        <div class="img_list img_list_2">
            <ul style="padding-bottom: 0px;">
                ${v.project_img.map(url => `<li><img src="${url}"></li>`).join('')}
            </ul>
        </div>
    </div>
`).join('')

Answer 2

$(".service_items").empty();
$(".service_items").append(
    data_projects.reduce(
        (html, item) =>
            (html += `
        <div class="picking_info picking_info_name">
            <p>项目名称</p>
            <p class="picking_user_name">${item.project_name}</p>
        </div>
        <div class="picking_info picking_info_name" style="flex-direction: column;">
            <p>图片信息</p>
            <div class="img_list img_list_2">
                <ul style="padding-bottom: 0px;">
                    ${item.project_img.reduce((html2, url) => (html2 += `<li><img src="${url}"></li>`), "")}
                </ul>
            </div>
        </div>
    `),
        ""
    )
);

Answer 3

data_projects.forEach(item => {
  item.project_img.forEach(img => {
    console.log(img);
  });
});

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 4

按题主的逻辑，应该是想这样

// 在循环开始之前，清空要填的区域（容器）
$(".service_items").empty();

for (let i in data_projects) {
    // 每个 project 的 data_projects_str 都应该是从没人内容开始，所以这里要初始化
    let data_projects_str = "";

    // 循环拼接 data_projects_str
    for (let j in data_projects[i].project_img) {
        data_projects_str += "...";
    }

    // 每个 project 拼接完成之后，加到容器里
    $(".service_items").append(data_projects_str);
}