Changing for in loop to for loop

Question

Imagine I have an object called projects. The projects object has a key called projects that is an array of 2 other objects. Each one of the other 2 objects has an array of images. I was able to iterate through each image in the array of each object using for in loops but I want to use for loops or forEach instead. What can I do? Here is my code:

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

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 2

Here is a forEach version of the loop, which I would prefer to reduce the length of names used.

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

Rather than using a for loop and worrying about indexes and off-by-1 errors, you can nest two forEach loops:

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

you can use nested for loops to do exactly that

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