Can not append all content to my portfolio-CodePudding

I'm working on my portfolio and one section is to show "cards" to my projects. The next thing that I started working on is the ability to sort the cards depending on what kind of project it is.

So if I click "Web Development" it will only display the cards with projects related to that.

I have an object with all the data for the cards and one key is "tag" with the value that relates to the project, for example: "Web Development".

I can then run an "if" statement to only show "Web Development" for example.

After that I empty the element (div) of which contains the cards and then append the cards that only has the correct tag with jQuery empty().append()

It works but it only appends one card. If I have more project cards in that tag it won't append unless I'm doing a setTimeout but then the the other divs and such move and makes the portfolio "glitchy" for a while.

Any suggestions?

const projects = {
    cards: {
      card1: {
        name: "",
        skills: "",
        thumbnail: "",
        github: "",
        live: "",
        tag: "webdevelopment",
        underConstruction: "no"
      },
      card2: {
        name: "",
        skills: "",
        thumbnail: "",
        github: "",
        live: "",
        tag: "webdevelopment",
        underConstruction: "no"
      },
      card3: {
        name: "",
        skills: "",
        thumbnail: "",
        github: "",
        live: "",
        tag: "devOps",
        underConstruction: "no"
      },

    },
    sortCards: () => {
      let cards = Object.values(projects.cards);

      for (let sort of cards) {

        let tagSort = sort.tag.toLowerCase();

        $('.devops').click(function() {
          if (tagSort == "devops") {
            $('.project-container').empty().append(`
                    <div  data-skills="${sort.skills}"> 
                        <div >
                            <img src="${sort.thumbnail}" alt="${sort.name}">
                        </div>
                        <div >
                        <a href="${sort.live}" target="_rel"><img src="iamtt/../assets/images/live.png" alt"Live"></a>
                        <a href="${sort.github}" target="_rel"><img src="iamtt/../assets/images/github-live.png" alt="github"></a>
                        </div>
                    </div>
                    `)
          }
        })

        $('.webdevelopment').click(function() {
          if (tagSort == "webdevelopment") {
            $('.project-container').empty().append(`
                    <div  data-skills="${sort.skills}"> 
                        <div >
                            <img src="${sort.thumbnail}" alt="${sort.name}">
                        </div>
                        <div >
                        <a href="${sort.live}" target="_rel"><img src="iamtt/../assets/images/live.png" alt"Live"></a>
                        <a href="${sort.github}" target="_rel"><img src="iamtt/../assets/images/github-live.png" alt="github"></a>
                        </div>
                    </div>
                    `)
          }
        })
      }
    },
    // ...
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >#WebDevelopment</div>
<div >#DevOps</div>

<!-- Projects and skills-->
<div id="projectskill">
  <div ></div>
  <div >
    <!-- projects cards -->
    <div ></div>
    <!-- skills-->
    <div >
      <div >
        <div >
          <span >MY SKILLS</span>
        </div>
        <div ></div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

You can simplify the code by adding an attribute like data-tag to the tag elements.
When a tag is clicked, get the value of the data-tag attribute and find it's related cards from projects.cards.

Try this

const projects = {
  cards: {
    card1: {
      name: "",
      skills: "",
      thumbnail: "",
      github: "",
      live: "",
      tag: "webdevelopment",
      underConstruction: "no"
    },
    card2: {
      name: "",
      skills: "",
      thumbnail: "",
      github: "",
      live: "",
      tag: "webdevelopment",
      underConstruction: "no"
    },
    card3: {
      name: "",
      skills: "",
      thumbnail: "",
      github: "",
      live: "",
      tag: "devOps",
      underConstruction: "no"
    },

  },
  sortCards: () => {
    let cards = Object.values(projects.cards);
    let container = $('.project-container');

    // add sort links
    let tags = [...new Set(cards.map(sort => sort.tag))];
    $('.sort-links').html(tags.map(tag => `<div  data-tag="${tag}">#${tag}</div>`).join(''));

    // sort tags
    $('.sort-links').on('click', '[data-tag]', function() {
      let tag = $(this).data('tag');
      let tagCards = cards.filter(o => o.tag === tag).map(sort => (`
                <div  data-skills="${sort.skills}"> 
                    <div >
                        <img src="${sort.thumbnail}" alt="${sort.name}">
                    </div>
                    <div >
                    <a href="${sort.live}" target="_rel"><img src="iamtt/../assets/images/live.png" alt"Live"></a>
                    <a href="${sort.github}" target="_rel"><img src="iamtt/../assets/images/github-live.png" alt="github"></a>
                    </div>
                </div>
            `));

      container.html(tagCards.join(''));
    })
  }
}

// test
projects.sortCards();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ></div>

<!-- Projects and skills-->
<div id="projectskill">
  <div ></div>
  <div >
    <!-- projects cards -->
    <div ></div>
    <!-- skills-->
    <div >
      <div >
        <div >
          <span >MY SKILLS</span>
        </div>
        <div ></div>
      </div>
    </div>
  </div>
</div>