Click here to Skip to main content
15,063,085 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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:

JavaScript
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!!
Posted
Updated 23-Jun-21 4:54am
Comments
Chris Copeland 23-Jun-21 10:51am
   
Have you tried debugging your code, stepping through line-by-line in your browser, to see what happens at each stage? You should be able to place break-points in different parts of the code and be able to see each of the values as you step through.

1 solution

I can see an immediate problem in your code here:
JavaScript
index = v.classList;
..
const portfolioProject = projects.filter(function(portfolioProjectItems) {
  if (portfolioProjectItems.id === index) {
    return portfolioProjectItems;
  }
});

Your index variable is an array of classes, and you're trying to compare an id property against it. It looks like you meant to compare against something else? Also, the filter() function returns a boolean so you should actually return the result of the comparison.
   
v3

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900