Whats the error in JavaScript filter Method - SEO

UmarMaqsood
January 13, 2022
190 views
1 vote
2 Answers

While filtering the objects with the filter method I’m unable to filter more than one value with the same ids. Basically, I want to show the object of the same id on the screen
While filtering the objects with the filter method I’m unable to filter more than one value with the same ids. Basically, I want to show the object of the same id on the screen

const services = [
    {
        id: 1,
        technology: "web",
        title: "Web Design",
        description: "Web design is the process of planning, conceptualizing, and arranging content online. ",
        imageUrl: "./images/webDesign.jpg",
        details: "https://www.pagecloud.com/blog/web-design-guide"
    },
    {
        id: 1,
        technology: "web",
        title: "Web Development",
        description: "Web development is the work involved in developing a website for the Internet (World Wide Web)",
        imageUrl: "./images/webDevelopment.jpeg",
        details: "https://en.wikipedia.org/wiki/Web_development"
    },
    {
        id: 1,
        technology: "web",
        title: "Graphic Design",
        description: "Graphic design is a craft where professionals create visual content to communicate messages. ",
        imageUrl: "./images/graphic.jpg",
        details: "https://www.interaction-design.org/literature/topics/graphic-design#:~:text=Graphic%20design%20is%20a%20craft,to%20optimize%20the%20user%20experience."
    },
    {
        id: 4,
        title: "Content Writing",
        description: "Content writing is the process of planning, writing and editing web content, typically for digital marketing purposes.",
        imageUrl: "./images/contentwriting.jpg",
        details: "https://www.interaction-design.org/literature/topics/graphic-design#:~:text=Graphic%20design%20is%20a%20craft,to%20optimize%20the%20user%20experience."
    },
    {
        id: 5,
        title: "Seo",
        description: "SEO means Search Engine Optimization and is the process used to optimize a website's technical configuration.",
        imageUrl: "./images/seo.jpg",
        details: "https://www.interaction-design.org/literature/topics/graphic-design#:~:text=Graphic%20design%20is%20a%20craft,to%20optimize%20the%20user%20experience."
    },
    {
        id: 6,
        title: "Digital Marketing",
        description: "Digital marketing, also called online marketing, is the promotion of brands to connect with potential customers using the internet and other forms of digital communication",
        imageUrl: "./images/digital.jpg",
        details: "https://www.interaction-design.org/literature/topics/graphic-design#:~:text=Graphic%20design%20is%20a%20craft,to%20optimize%20the%20user%20experience."
    },
    {
        id: 7,
        title: "Android Development",
        description: "An android developer uses analytical skills and computer training to develop systems for android devices.",
        imageUrl: "./images/android.jpg",
        details: "https://www.interaction-design.org/literature/topics/graphic-design#:~:text=Graphic%20design%20is%20a%20craft,to%20optimize%20the%20user%20experience."
    },
    {
        id: 8,
        title: "eCommerce",
        description: "Ecommerce is the buying and selling of goods and services over the Internet. It is conducted over computers, tablets, smartphones, and other smart devices.",
        imageUrl: "./images/eco.jpg",
        details: "https://www.interaction-design.org/literature/topics/graphic-design#:~:text=Graphic%20design%20is%20a%20craft,to%20optimize%20the%20user%20experience."
    }
]

// Map Method
const cardsContainer =    document.querySelector('.cardsContainer');

function apiData(services) {
    
   let cards =  services.map((ser)=>{
       return `
        <div class= "cards">
            <img src=${ser.imageUrl} alt="Image Available Soon" />
            <h3>${ser.title}</h3>
            <p>${ser.description}</p>
            <a href=${ser.details} class="btn">Read More</a>
        </div> `
    })
    cardsContainer.innerHTML = cards;
}

apiData(services);


// allShow Btn
function allShow(services){
    let cards =  services.map((ser)=>{
        return `
         <div class= "cards">
             <img src=${ser.imageUrl} alt="Image Available Soon" />
             <h3>${ser.title}</h3>
             <p>${ser.description}</p>
             <a href=${ser.details} class="btn">All Show</a>
         </div> `
     });
     cardsContainer.innerHTML = cards;
}


// Filter Method webBtn
function webShow(services) {

            services.filter((servi)=>{ 
            if(servi.id === 1){ 
            const cards = `
            <div class= "cards">
                <img src=${servi.imageUrl} alt="Image Available Soon" />
                <h3>${servi.title}</h3>
                <p>${servi.description}</p>
                <a href=${servi.details} class="btn">Web</a>
            </div> `

                cardsContainer.innerHTML += cards;
        }
        });
}

// filter method Marketing
function marketing(services) {
    services.filter((service)=>{
        if(service.id === 6){
        let cards =  `
        <div class= "cards">
            <img src=${service.imageUrl} alt="Image Available Soon" />
            <h3>${service.title}</h3>
            <p>${service.description}</p>
            <a href=${service.details} class="btn">Read More</a>
        </div> `
        cardsContainer.innerHTML = cards;
    }
    });
}

// find Method contentBtn
function contentShow(services){

    services.find((servic)=>{
        if(servic.title === "Content Writing"){
        let cards =  `
        <div class= "cards">
            <img src=${servic.imageUrl} alt="Image Available Soon" />
            <h3>${servic.title}</h3>
            <p>${servic.description}</p>
            <a href=${servic.details} class="btn">Read More</a>
        </div> `
        cardsContainer.innerHTML = cards;
    }
    });
}

Tags: javascript

Answers

Donot perform a loop action using Array.filter. If you want to perfrorm a loop action use Array.forEach or some other loop instead.

If you are looking to filter down your array with elements having id === 1, you can achieve this using.

services.filter((servi) => servi.id === 1)

If you want to update your dome with this filtered result, you can loop through this filtered array and generate the html string and set it as the innerHTML of the target.

Also its recommented(not mandatory) to include src and href attributes inside quotes ""

Updating a dom inside a loop is not a good practice. Frequent update of DOM will impacts the performace of the application. Produce the html string using the loop itration and set this final string as the innerHTML

Working Code

const services = [
  { id: 1, technology: "web", title: "Web Design", description: "Web design is the process of planning, conceptualizing, and arranging content online. ", imageUrl: "./images/webDesign.jpg", details: "https://www.pagecloud.com/blog/web-design-guide" },
  { id: 1, technology: "web", title: "Web Development", description: "Web development is the work involved in developing a website for the Internet (World Wide Web)", imageUrl: "./images/webDevelopment.jpeg", details: "https://en.wikipedia.org/wiki/Web_development" },
  { id: 1, technology: "web", title: "Graphic Design", description: "Graphic design is a craft where professionals create visual content to communicate messages. ", imageUrl: "./images/graphic.jpg", details: "https://www.interaction-design.org/literature/topics/graphic-design#:~:text=Graphic%20design%20is%20a%20craft,to%20optimize%20the%20user%20experience." },
  { id: 4, title: "Content Writing", description: "Content writing is the process of planning, writing and editing web content, typically for digital marketing purposes.", imageUrl: "./images/contentwriting.jpg", details: "https://www.interaction-design.org/literature/topics/graphic-design#:~:text=Graphic%20design%20is%20a%20craft,to%20optimize%20the%20user%20experience." },
  { id: 5, title: "Seo", description: "SEO means Search Engine Optimization and is the process used to optimize a website's technical configuration.", imageUrl: "./images/seo.jpg", details: "https://www.interaction-design.org/literature/topics/graphic-design#:~:text=Graphic%20design%20is%20a%20craft,to%20optimize%20the%20user%20experience." },
  { id: 6, title: "Digital Marketing", description: "Digital marketing, also called online marketing, is the promotion of brands to connect with potential customers using the internet and other forms of digital communication", imageUrl: "./images/digital.jpg", details: "https://www.interaction-design.org/literature/topics/graphic-design#:~:text=Graphic%20design%20is%20a%20craft,to%20optimize%20the%20user%20experience." },
  { id: 7, title: "Android Development", description: "An android developer uses analytical skills and computer training to develop systems for android devices.", imageUrl: "./images/android.jpg", details: "https://www.interaction-design.org/literature/topics/graphic-design#:~:text=Graphic%20design%20is%20a%20craft,to%20optimize%20the%20user%20experience." },
  { id: 8, title: "eCommerce", description: "Ecommerce is the buying and selling of goods and services over the Internet. It is conducted over computers, tablets, smartphones, and other smart devices.", imageUrl: "./images/eco.jpg", details: "https://www.interaction-design.org/literature/topics/graphic-design#:~:text=Graphic%20design%20is%20a%20craft,to%20optimize%20the%20user%20experience." }
]

// Map Method
const cardsContainer = document.querySelector('.cardsContainer');

function webShow(services) {
  const filteredServices = services.filter((servi) => servi.id === 1);
  let htmlTemplate = '';
  filteredServices.forEach((node) => {
    const cards = `
  <div class= "cards">
      <img src="${node.imageUrl}" alt="Image Available Soon" />
      <h3>${node.title}</h3>
      <p>${node.description}</p>
      <a href="${node.details}" class="btn">Web</a>
  </div> `;
    htmlTemplate += cards;
  });
  cardsContainer.innerHTML = htmlTemplate;
}
webShow(services);

<div class="cardsContainer"></div>

A Generic Method

Seperate your template creation logic into a single function and pass the list for each category to this template generation function.

Working Code

const cardsContainer =    document.querySelector('.cardsContainer');
const services = [
  { id: 1, technology: "web", title: "Web Design", description: "Web design is the process of planning, conceptualizing, and arranging content online. ", imageUrl: "./images/webDesign.jpg", details: "https://www.pagecloud.com/blog/web-design-guide" },
  { id: 1, technology: "web", title: "Web Development", description: "Web development is the work involved in developing a website for the Internet (World Wide Web)", imageUrl: "./images/webDevelopment.jpeg", details: "https://en.wikipedia.org/wiki/Web_development" },
  { id: 1, technology: "web", title: "Graphic Design", description: "Graphic design is a craft where professionals create visual content to communicate messages. ", imageUrl: "./images/graphic.jpg", details: "https://www.interaction-design.org/literature/topics/graphic-design#:~:text=Graphic%20design%20is%20a%20craft,to%20optimize%20the%20user%20experience." },
  { id: 4, title: "Content Writing", description: "Content writing is the process of planning, writing and editing web content, typically for digital marketing purposes.", imageUrl: "./images/contentwriting.jpg", details: "https://www.interaction-design.org/literature/topics/graphic-design#:~:text=Graphic%20design%20is%20a%20craft,to%20optimize%20the%20user%20experience." },
  { id: 5, title: "Seo", description: "SEO means Search Engine Optimization and is the process used to optimize a website's technical configuration.", imageUrl: "./images/seo.jpg", details: "https://www.interaction-design.org/literature/topics/graphic-design#:~:text=Graphic%20design%20is%20a%20craft,to%20optimize%20the%20user%20experience." },
  { id: 6, title: "Digital Marketing", description: "Digital marketing, also called online marketing, is the promotion of brands to connect with potential customers using the internet and other forms of digital communication", imageUrl: "./images/digital.jpg", details: "https://www.interaction-design.org/literature/topics/graphic-design#:~:text=Graphic%20design%20is%20a%20craft,to%20optimize%20the%20user%20experience." },
  { id: 7, title: "Android Development", description: "An android developer uses analytical skills and computer training to develop systems for android devices.", imageUrl: "./images/android.jpg", details: "https://www.interaction-design.org/literature/topics/graphic-design#:~:text=Graphic%20design%20is%20a%20craft,to%20optimize%20the%20user%20experience." },
  { id: 8, title: "eCommerce", description: "Ecommerce is the buying and selling of goods and services over the Internet. It is conducted over computers, tablets, smartphones, and other smart devices.", imageUrl: "./images/eco.jpg", details: "https://www.interaction-design.org/literature/topics/graphic-design#:~:text=Graphic%20design%20is%20a%20craft,to%20optimize%20the%20user%20experience." }
]

function generateTemplate(list) {
  let htmlTemplate = '';
  list.forEach((node) => {
    const cards = `
      <div class= "cards">
        <img src="${node.imageUrl}" alt="Image Available Soon" />
        <h3>${node.title}</h3>
        <p>${node.description}</p>
        <a href="${node.details}" class="btn">Web</a>
      </div> `;
    htmlTemplate += cards;
  });
  cardsContainer.innerHTML = htmlTemplate;
}

// allShow Btn
function allShow() {
  // Passing the complete list
  generateTemplate(services)
}

// Filter Method webBtn
function webShow() {
  // For web only the elements with id 1 needs to be rendered
  const list = services.filter(item => item.id === 1);
  generateTemplate(list)
}

// filter method Marketing
function marketing() {
  // For marketing only the elements with id 6 needs to be rendered
  const list = services.filter(item => item.id === 6);
  generateTemplate(list)
}

// find Method contentBtn
function contentShow() {
  // For content only the elements with title "Content Writing" needs to be rendered
  const list = services.filter(item => item.title === "Content Writing");
  generateTemplate(list)
}

<button onclick="allShow()">allShow</button>
<button onclick="webShow()">webShow</button>
<button onclick="marketing()">marketing</button>
<button onclick="contentShow()">contentShow</button>
<div class="cardsContainer"></div>

You need to do the filter before processing

It is NOT recommended to update DOM in a loop

Here we generate all the cards in an array and update once

Also wrap attributes in quotes

const cardsContainer = document.querySelector('.cardsContainer');

function show(services,btn) {
  return services
    .map(servi => `<div class="cards">
        <img src="${servi.imageUrl}" alt="Image Available Soon" />
        <h3>${servi.title}</h3>
        <p>${servi.description}</p>
        <a href="${servi.details}" class="btn">${btn}</a>
    </div> `).join("");
}

function marketing() {
  cardsContainer.innerHTML = show(services.filter(({id}) => id === 6),"Marketing")
}

function webShow() {
  cardsContainer.innerHTML = show(services.filter(({id}) => id === 1),"Web")
}

function contentShow() {
  cardsContainer.innerHTML = show(services.filter(({title}) => title === "Content Writing"),"Content")
}

function allShow() {
  cardsContainer.innerHTML = show(services,"All");
}  

// show one
webShow()

<div class="cardsContainer"></div>
<script>
  const services = [{
      id: 1,
      technology: "web",
      title: "Web Design",
      description: "Web design is the process of planning, conceptualizing, and arranging content online. ",
      imageUrl: "./images/webDesign.jpg",
      details: "https://www.pagecloud.com/blog/web-design-guide"
    },
    {
      id: 1,
      technology: "web",
      title: "Web Development",
      description: "Web development is the work involved in developing a website for the Internet (World Wide Web)",
      imageUrl: "./images/webDevelopment.jpeg",
      details: "https://en.wikipedia.org/wiki/Web_development"
    },
    {
      id: 1,
      technology: "web",
      title: "Graphic Design",
      description: "Graphic design is a craft where professionals create visual content to communicate messages. ",
      imageUrl: "./images/graphic.jpg",
      details: "https://www.interaction-design.org/literature/topics/graphic-design#:~:text=Graphic%20design%20is%20a%20craft,to%20optimize%20the%20user%20experience."
    },
    {
      id: 4,
      title: "Content Writing",
      description: "Content writing is the process of planning, writing and editing web content, typically for digital marketing purposes.",
      imageUrl: "./images/contentwriting.jpg",
      details: "https://www.interaction-design.org/literature/topics/graphic-design#:~:text=Graphic%20design%20is%20a%20craft,to%20optimize%20the%20user%20experience."
    },
    {
      id: 5,
      title: "Seo",
      description: "SEO means Search Engine Optimization and is the process used to optimize a website's technical configuration.",
      imageUrl: "./images/seo.jpg",
      details: "https://www.interaction-design.org/literature/topics/graphic-design#:~:text=Graphic%20design%20is%20a%20craft,to%20optimize%20the%20user%20experience."
    },
    {
      id: 6,
      title: "Digital Marketing",
      description: "Digital marketing, also called online marketing, is the promotion of brands to connect with potential customers using the internet and other forms of digital communication",
      imageUrl: "./images/digital.jpg",
      details: "https://www.interaction-design.org/literature/topics/graphic-design#:~:text=Graphic%20design%20is%20a%20craft,to%20optimize%20the%20user%20experience."
    },
    {
      id: 7,
      title: "Android Development",
      description: "An android developer uses analytical skills and computer training to develop systems for android devices.",
      imageUrl: "./images/android.jpg",
      details: "https://www.interaction-design.org/literature/topics/graphic-design#:~:text=Graphic%20design%20is%20a%20craft,to%20optimize%20the%20user%20experience."
    },
    {
      id: 8,
      title: "eCommerce",
      description: "Ecommerce is the buying and selling of goods and services over the Internet. It is conducted over computers, tablets, smartphones, and other smart devices.",
      imageUrl: "./images/eco.jpg",
      details: "https://www.interaction-design.org/literature/topics/graphic-design#:~:text=Graphic%20design%20is%20a%20craft,to%20optimize%20the%20user%20experience."
    }
  ]
</script>

Please signup or login to give your own answer.

Click here to cancel reply.

Whats the error in JavaScript filter Method – SEO

Answers