Изменение для цикла цикла для цикла

Question

Представьте, что у меня есть объект, называемый проектами. Объект проектов имеет ключ, называемый проектами, который представляет собой массив из 2 других объектов. Каждый из двух других объектов имеет массив изображений. Мне удалось выполнить итерацию каждого изображения в массиве каждого объекта, используя для циклов in, но я хочу использовать вместо циклов или forEach. Что я могу сделать? Вот мой код:

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); 
 
     } 
 

 
    } 
 

 
}

Answer 1

вы можете использовать вложенные для петель сделать именно это

for (var i = 0; i < projects.projects.length; i++) { 
    for (var j = 0; j < projects.projects[i].images.length; j++) { 
     var x = projects.projects[i].images[j]; 
     console.log(x); 
    } 
} 

Answer 2

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); 
 
     }); 
 
    } 
 
}

Answer 3

Вот это forEach Versio n цикла, который я бы предпочел уменьшить длину используемых имен.

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 4

Вместо того чтобы использовать for петлю и беспокоиться об индексах и выключаться на 1 ошибок, вы можете вложить две forEach петли:

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); 
    }); 

});