nested forEach functions

gistfile1.txt

var projects = {
  "websites":
  [ {
    "website": "http://www.michaelwiebe.net",
    "date": "February 2017",
    "title": "Semi-Professional Photography Portfolio",
    "description": "Photography exhibition",
    "image": [
      "images/portrait.png",
      "images/flower.png",
      "images/dance.png",
      "images/party.png"]
  }, {
    "website": "www.github.com/michaeljwiebe",
    "date": "March 2017",
    "title": "Web Development Portfolio",
    "image": "images/github.png",
    "description": "exhibition of JavaScript and jQuery skills"
  } ]
};

var projectsDisplay = function() {
  projects.websites.forEach(function(project) {
    $("#projects").append(HTMLprojectStart);
    var formattedProjectTitle = HTMLprojectTitle.replace("%data%", project.title);
    var formattedProjectDescription = HTMLprojectDescription.replace("%data%", project.description);
    $(".project-entry:last").append(formattedProjectTitle);
    $(".project-entry:last").append(formattedProjectDescription);
    var formattedProjectDates = HTMLprojectDates.replace("%data%", project.date);
    $(".project-entry:last").append(formattedProjectDates);
    //commented out code below works for one image but I have multiple to post in my other project object
    //var formattedProjectImage = HTMLprojectImage.replace("%data%", project.image);
    // $(".project-entry:last").append(formattedProjectImage);
    project.image.forEach(function(image) {
      var formattedProjectImage = HTMLprojectImage.replace("%data%", project.image);
      $(".project-entry").append(formattedProjectImage);
    }); //above it seems not to be realizing that the images are different. it tries to find
    //all of them as if they're one file. obviously that won't work, but I can't get it to find them independently.
    //Stragely it does try to display 4 images on the page without being able to find any of them.
  });
};
projectsDisplay();