In my code, I am using a foreach loop on child items so that when they are clicked they will display some markup. I am filtering an array so that I can display certain code. But when I click on any of the elements everything inside the parent element is empty. I want to display the filtered code! What am I doing wrong?
index[2] targets a specific class inside the element being clicked.
Here is the JavaScript code:
const portfolioGrid = document.querySelector('.portfolio__grid');
let projects = [{
id: 1,
dataId: "TAFE",
title: "Identity System",
description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur ab odio. Rerum cumque distinctio eveniet illum ea omnis non iure repudiandae labore quas aut optio aliquam dolorem, delectus doloribus!',
date: '2016 - present',
client: 'TAFE (Theater Arts For Everyone)',
role: 'Graphic Designer',
projectType: 'Layout (color + graphics)',
programClass1: 'ai',
programClass2: 'id',
program1: 'Ai',
program2: 'Id',
category: "1",
img: "../img/image-plane.jpg",
},
{
id: 2,
dataId: "2",
title: "Identity System",
description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur ab odio. Rerum cumque distinctio eveniet illum ea omnis non iure repudiandae labore quas aut optio aliquam dolorem, delectus doloribus!',
date: '2016 - present',
client: 'College Admissions HQ',
role: 'Graphic Designer',
projectType: 'Layout (color + graphics)',
programClass1: 'ai',
programClass2: 'id',
program1: 'Ai',
program2: 'Id',
category: "2",
img: "https://source.unsplash.com/1600x900/?nature",
},
{
id: 3,
dataId: "3",
title: "Identity System",
description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur ab odio. Rerum cumque distinctio eveniet illum ea omnis non iure repudiandae labore quas aut optio aliquam dolorem, delectus doloribus!',
date: '2016 - present',
client: 'Pilates Welness Center',
role: 'Graphic Designer',
projectType: 'Layout (color + graphics)',
programClass1: 'ai',
programClass2: 'id',
program1: 'Ai',
program2: 'Id',
category: "3",
img: "../img/image-restaurant.jpg",
},
{
id: 4,
dataId: "4",
title: "Identity System",
description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur ab odio. Rerum cumque distinctio eveniet illum ea omnis non iure repudiandae labore quas aut optio aliquam dolorem, delectus doloribus!',
date: '2016 - present',
client: 'Lish',
role: 'Graphic Designer',
projectType: 'Layout (color + graphics)',
programClass1: 'ai',
programClass2: 'id',
program1: 'Ai',
program2: 'Id',
category: "4",
img: "../img/image-restaurant.jpg",
},
{
id: 5,
dataId: "5",
title: "Identity System",
description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur ab odio. Rerum cumque distinctio eveniet illum ea omnis non iure repudiandae labore quas aut optio aliquam dolorem, delectus doloribus!',
date: '2016 - present',
client: 'secondEncounter',
role: 'Graphic Designer',
projectType: 'Layout (color + graphics)',
programClass1: 'ai',
programClass2: 'id',
program1: 'Ai',
program2: 'Id',
category: "5",
img: "../img/image-restaurant.jpg",
},
{
id: 5,
dataId: "5",
title: "Identity System",
description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur ab odio. Rerum cumque distinctio eveniet illum ea omnis non iure repudiandae labore quas aut optio aliquam dolorem, delectus doloribus!',
date: '2016 - present',
client: 'YOU',
role: 'Graphic Designer',
projectType: 'Layout (color + graphics)',
programClass1: 'ai',
programClass2: 'id',
program1: 'Ai',
program2: 'Id',
category: "5",
img: "../img/image-restaurant.jpg",
},
{
id: 9,
dataId: "9",
title: "Identity System",
description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur ab odio. Rerum cumque distinctio eveniet illum ea omnis non iure repudiandae labore quas aut optio aliquam dolorem, delectus doloribus!',
date: '2016 - present',
client: 'ME',
role: 'Graphic Designer',
projectType: 'Layout (color + graphics)',
programClass1: 'ai',
programClass2: 'id',
program1: 'Ai',
program2: 'Id',
category: "9",
img: "../img/image-restaurant.jpg",
},
{
id: 11,
dataId: 11,
title: "Identity System",
description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur ab odio. Rerum cumque distinctio eveniet illum ea omnis non iure repudiandae labore quas aut optio aliquam dolorem, delectus doloribus!',
date: '2016 - present',
client: 'US',
role: 'Graphic Designer',
projectType: 'Layout (color + graphics)',
programClass1: 'ai',
programClass2: 'id',
program1: 'Ai',
program2: 'Id',
category: "11",
img: "../img/image-restaurant.jpg",
},
{
id: 8,
dataId: "8",
title: "Identity System",
description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur ab odio. Rerum cumque distinctio eveniet illum ea omnis non iure repudiandae labore quas aut optio aliquam dolorem, delectus doloribus!',
date: '2016 - present',
client: 'MINE',
role: 'Graphic Designer',
projectType: 'Layout (color + graphics)',
programClass1: 'ai',
programClass2: 'id',
program1: 'Ai',
program2: 'Id',
category: "8",
img: "../img/image-restaurant.jpg",
},
];
var children = portfolioGrid.childNodes;
children.forEach(function callback(v, index) {
let projectIds = v.id;
index = v.classList;
if(index[2] == projectIds) {
v.addEventListener('click', function() {
const portfolioProject = projects.filter(function(portfolioProjectItems) {
if (portfolioProjectItems.id === index) {
return portfolioProjectItems;
}
});
if (projectIds === "all") {
projectProjects(projects);
} else {
projectProjects(portfolioProject);
}
});
}
});
function projectProjects(projectProjectsItems) {
let didplayProjectsProjectsItems = projectProjectsItems.map(function(item) {
return `
<div id="${item.dataId}" class="${item.id}"><h2 class="projects__heading">${item.title}</h2>
<div class="projects__info">
<div class="projects__description">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur ab odio. Rerum cumque distinctio eveniet illum ea omnis non iure repudiandae labore quas aut optio aliquam dolorem, delectus doloribus!
</div> <!-- end project__description -->
<div class="projects__ID">
<p class="date">Created: ${item.date}</p>
<p class="client">Client: ${item.client}</p>
<p class="role">Role: ${item.role}</p>
<p class="project-type">Project Type: ${item.projectType}</p>
<p class="programs">Programs Used: ${item.program1}</p>
</div> <!-- end project__header -->
</div> <!-- end project__info -->
<div class="projects__gallery">
<div class="projects__image"><img src="../img/CAHQ/CAHQ-Brochure-Inside.jpg" alt=""></div>
<div class="projects__image"><img src="../img/image-confetti.jpg" alt=""></div>
<div class="projects__image"><img src="../img/image-confetti.jpg" alt=""></div>
<div class="projects__image"><img src="../img/image-confetti.jpg" alt=""></div>
<div class="projects__image"><img src="../img/image-confetti.jpg" alt=""></div>
</div>
</div>`;
});
didplayProjectsProjectsItems = didplayProjectsProjectsItems.join("");
portfolioContent.innerHTML = didplayProjectsProjectsItems;
}
What I have tried:
Help! I have tried too many things!!