Question

想象一下，我有一个叫做项目的对象。 projects对象有一个名为projects的键，它是另外两个对象的数组。其他2个对象中的每一个都有一个图像阵列。我能够使用in循环遍历每个对象的数组中的每个图像，但我想使用for循环或forEach。我能做什么？这是我的代码：

＆＃13;

var projects = {};

projects.projects = [
{
"title": "mycode",
"dates": "mycode",
"description": "mycode",
"images": ["http://lorempixel.com/400/200/", "http://lorempixel.com/350/150/", "http://lorempixel.com/500/300/"]
},

{
"title": "mycode",
"dates": "mycode",
"description": "mycode",
"images": ["http://lorempixel.com/400/200/", "http://lorempixel.com/350/150/", "http://lorempixel.com/500/300/"]
}

];

projects.display = function() {

    for (var i = 0; i < projects.projects.length; i++) {
        
        var formattedProjectTitle = HTMLprojectTitle.replace("%data%", projects.projects[i].title);
        $(".project-entry:last").append(formattedProjectTitle);

        var formattedProjectDates = HTMLprojectDates.replace("%data%", projects.projects[i].dates);
        $(".project-entry:last").append(formattedProjectDates);

        var formattedProjectDescription = HTMLprojectDescription.replace("%data%", projects.projects[i].description);
        $(".project-entry:last").append(formattedProjectDescription);
        
        //Iterate through each image in the projects objects.

        for (image in projects.projects[i].images) {
            var formattedProjectImages = HTMLprojectImage.replace("%data%", projects.projects[i].images[image]);
            $(".project-entry:last").append(formattedProjectImages);
        }

    }

}

＆＃13;

Answer 1

你可以使用嵌套的for循环来完成那个

external_id

Answer 2

这是循环的forEach版本，我宁愿减少使用的名称长度。

projects.projects.forEach(function(project) {
    var formattedProjectTitle = HTMLprojectTitle.replace("%data%", project.title);
    $(".project-entry:last").append(formattedProjectTitle);

    var formattedProjectDates = HTMLprojectDates.replace("%data%", project.dates);
    $(".project-entry:last").append(formattedProjectDates);

    var formattedProjectDescription = HTMLprojectDescription.replace("%data%", project.description);
    $(".project-entry:last").append(formattedProjectDescription);

    project.images.forEach(function(image) {
        var formattedProjectImages = HTMLprojectImage.replace("%data%", image);
        $(".project-entry:last").append(formattedProjectImages);
    });
});

// Alternatively, if you have the browser support, for..of will work as well. 
// I use let instead of var as let is block scoped rather than function scoped (Again, check browser support)

for (let project of projects.projects) {
    let formattedProjectTitle = HTMLprojectTitle.replace("%data%", project.title);
    $(".project-entry:last").append(formattedProjectTitle);

    let formattedProjectDates = HTMLprojectDates.replace("%data%", project.dates);
    $(".project-entry:last").append(formattedProjectDates);

    let formattedProjectDescription = HTMLprojectDescription.replace("%data%", project.description);
    $(".project-entry:last").append(formattedProjectDescription);

    for (let image of project.images) {
        let formattedProjectImages = HTMLprojectImage.replace("%data%", image);
        $(".project-entry:last").append(formattedProjectImages);
    }
}

Answer 3

您可以嵌套两个for循环，而不是使用forEach循环并担心索引和off-by-1错误：

projects.projects.forEach(project => {
  var formattedProjectTitle = HTMLprojectTitle.replace("%data%", project.title);

  // ...

  project.images.forEach(image => {
    var formattedProjectImages = HTMLprojectImage.replace("%data%", image);
    $(".project-entry:last").append(formattedProjectImages);
  });

});

Answer 4

＆＃13;

var projects = {};

projects.projects = [{
  "title": "mycode",
  "dates": "mycode",
  "description": "mycode",
  "images": ["http://lorempixel.com/400/200/",     "http://lorempixel.com/350/150/",     "http://lorempixel.com/500/300/"]
}, {
  "title": "mycode",
  "dates": "mycode",
  "description": "mycode",
  "images": ["http://lorempixel.com/400/200/", "http://lorempixel.com/350/150/", "http://lorempixel.com/500/300/"]
}];

projects.display = function() {
    for (var i = 0; i < projects.projects.length; i++) {
        var formattedProjectTitle = HTMLprojectTitle.replace("%data%", projects.projects[i].title);
        $(".project-entry:last").append(formattedProjectTitle);

        var formattedProjectDates = HTMLprojectDates.replace("%data%", projects.projects[i].dates);
        $(".project-entry:last").append(formattedProjectDates);

        var formattedProjectDescription = HTMLprojectDescription.replace("%data%", projects.projects[i].description);
        $(".project-entry:last").append(formattedProjectDescription);
        
        //Iterate through each image in the projects objects.

        projects.projects[i].images.forEach(function(image) {
          var formattedProjectImages = HTMLprojectImage.replace("%data%", image);
          $(".project-entry:last").append(formattedProjectImages);
        });
    }
}

＆＃13;

将for循环更改为for循环

4 个答案: