Dynamic List with jquery json data - SEO

Kelvin
July 30, 2020
241 views
0 votes
2 Answers

How to append below condition to id = #sellerMetal <ul> container, it is a dynamic loop list.

if dataJS
productList > medals > goldmedal = true,
append <li class="icon"><img src="/img/goldmetal.png"></li>

if dataJS
productList.medals.silvermedal = true,
append <li class="icon"><img src="/img/silvermedal.png"></li>

if dataJS
productList > medals > newshop= true,
append <li class="icon"><img src="/img/newshop.png"></li>
…
…
…
…
…

This is a list of product.

Below is the Render List of Product List Append.

Expected result:

<div id="List">
<div class="feature_ico">
    <ul id="#sellerMetal" class="icons">
        (Apend to here)
    </ul>
</div>
<div class="feature_ico">
    <ul id="#sellerMetal" class="icons">
        (Apend to here)
    </ul>
</div>
<div class="feature_ico">
    <ul id="#sellerMetal" class="icons">
        (Apend to here)
    </ul>
</div>
<div class="feature_ico">
    <ul id="#sellerMetal" class="icons">
        (Apend to here)
    </ul>
</div>
</div>

Below is example snippet.

Below is the code that I have tried: comment //Condition is here I have tried is the condition I put it, it doesn’t work like expected.

//Below is the Data JS
var data = { productList: [
    {
        id: "e0c18c12-0b51-41ad-9f2c-aefc20cafcdb",
        link: "1",
        imgurl: "img001",
        text: 'Product 001',
        seo: '',
        medals: [{
            goldmedal: true,
            sellermedal: false,
            newshop: true
            }]
    },
    {
        id: "f3bee385-76d7-4a87-8bba-a51d33238858",
        link: "2",
        imgurl: "img002",
        text: 'Product 002',
        seo: '',
        medals: [{
            goldmedal: true,
            sellermedal: true,
            newshop: true
            }]
    },
    {
        id: "fc3dd6a9-5d8c-4262-aa65-a680e0f0cafe",
        link: "3",
        imgurl: "img003",
        text: 'Product 003',
        seo: '',
        medals: [{
            goldmedal: false,
            sellermedal: false,
            newshop: true
            }]
    },
    {
        id: "8615711e-8544-4484-933f-b14a93941b86",
        link: "4",
        imgurl: "img004",
        text: 'Product 004',
        seo: '',
        medals: [{
            goldmedal: false,
            sellermedal: false,
            newshop: true
            }]
    }]
};

$(function () {
    const getProductList = function (productItem) {
        const productListRender = $('<div>', { class: 'feature_ico'}).append($('<ul>', {
            id: plSettings.sellerMetal,
            class: 'icons'
        }));

        //Condition is here i have tried
        if (productItem.medals) {
            $.each(productItem.medals, function (index, data) {
                if (this.goldmedal === true) {
                    const medalRender = $(plSettings.sellerMetal);
                    const metalItem = $('<li>', {
                        class: 'icon gold'
                    }).append($('img'), {
                        src: ''
                    });
                    medalRender.append(metalItem);
                } else if (this.silvermedal === true) {
                    const medalRender = $(plSettings.sellerMetal);
                    const metalItem = $('<li>', {
                        class: 'icon gold'
                    }).append($('img'), {
                        src: ''
                    });
                    medalRender.append(metalItem);
                    }
                });
            }
            return productListRender;
        };

    const $product = $('#List')
    $.each(data.productList, function (index, data) {
        $product.append(getProductList(data));
    });
});

//Below is the Setting JS
var plSettings = $.extend({
    sellerMetal: '#' + 'sellerMetal',
    goldMetalSrc: '/img/tps/gold.png'
});

.feature_ico {
    border: 1px solid #e0e0e0
}

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

Answers

like this?

//Below is the Setting JS
var plSettings = $.extend({
    goldmedal: '/img/tps/gold.png',
    sellermedal: '/img/tps/seller.png',
    newshop: '/img/tps/newshop.png'
});

//Below is the Data JS
var data = { productList: [
    {
        id: "e0c18c12-0b51-41ad-9f2c-aefc20cafcdb",
        link: "1",
        imgurl: "img001",
        text: 'Product 001',
        seo: '',
        medals: {
            goldmedal: true,
            sellermedal: false,
            newshop: true
            }
    },
    {
        id: "f3bee385-76d7-4a87-8bba-a51d33238858",
        link: "2",
        imgurl: "img002",
        text: 'Product 002',
        seo: '',
        medals: {
            goldmedal: true,
            sellermedal: true,
            newshop: true
            }
    },
    {
        id: "fc3dd6a9-5d8c-4262-aa65-a680e0f0cafe",
        link: "3",
        imgurl: "img003",
        text: 'Product 003',
        seo: '',
        medals: {
            goldmedal: false,
            sellermedal: false,
            newshop: true
            }
    },
    {
        id: "8615711e-8544-4484-933f-b14a93941b86",
        link: "4",
        imgurl: "img004",
        text: 'Product 004',
        seo: '',
        medals: {
            goldmedal: false,
            sellermedal: false,
            newshop: true
            }
    }]
};

function createFeatureIco() {
  var el = document.createElement('div');
  el.classList.add('feature_ico');
  
  var ul = document.createElement('ul');
  ul.id = '#sellerMetal' // # ?
  ul.classList.add('icons');
  
  el.append(ul);
  
  return [el, ul]
}

function createMedal(src) {
    var li = document.createElement('li');
    var img = document.createElement('img');
    img.src = src
    li.append(img);
    return li
}

$(function () {
  const list = document.getElementById('List');
  
  data.productList.forEach(({ medals }) => {
    const [el, ul] = createFeatureIco();
    const { goldmedal, sellermedal, newshop } = medals;
    if(medals) {
      // conditions
      if(goldmedal) { ul.append(createMedal(plSettings.goldmedal))}
      if(sellermedal) { ul.append(createMedal(plSettings.sellermedal))}
      if(newshop) { ul.append(createMedal(plSettings.newshop))}
    }
    list.append(el);
  })


});

.feature_ico {
    border: 1px solid #e0e0e0
}

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

If you want to append all of true condition badges, replace else if to if. I remained the console log to check condition is right.

//Below is the Data JS
var data = {
  productList: [
    {
      id: "e0c18c12-0b51-41ad-9f2c-aefc20cafcdb",
      link: "1",
      imgurl: "img001",
      text: 'Product 001',
      seo: '',
      medals: [{
        goldmedal: true,
        sellermedal: false,
        newshop: true
      }]
    },
    {
      id: "f3bee385-76d7-4a87-8bba-a51d33238858",
      link: "2",
      imgurl: "img002",
      text: 'Product 002',
      seo: '',
      medals: [{
        goldmedal: true,
        sellermedal: true,
        newshop: true
      }]
    },
    {
      id: "fc3dd6a9-5d8c-4262-aa65-a680e0f0cafe",
      link: "3",
      imgurl: "img003",
      text: 'Product 003',
      seo: '',
      medals: [{
        goldmedal: false,
        sellermedal: false,
        newshop: true
      }]
    },
    {
      id: "8615711e-8544-4484-933f-b14a93941b86",
      link: "4",
      imgurl: "img004",
      text: 'Product 004',
      seo: '',
      medals: [{
        goldmedal: false,
        sellermedal: false,
        newshop: true
      }]
    }]
};

$(function () {
  const getProductList = function (productItem) {
    const productListRender = $('<div>', { class: 'feature_ico' }).append($('<ul>', {
      id: plSettings.sellerMetal,
      class: 'icons'
    }));

    //Condition is here i have tried
    if (productItem.medals) {
      $.each(productItem.medals, function (index, data) {
        if (this.goldmedal === true) {
          console.log('goldmedal', this.goldmedal)
          const medalRender = $(plSettings.sellerMetal);
          const metalItem = $('<li>', {
            class: 'icon gold'
          }).append($('img'), {
            src: ''
          });
          medalRender.append(metalItem);
        } 
        if (this.silvermedal === true) {
          console.log('silvermedal', this.silvermedal)
          const medalRender = $(plSettings.sellerMetal);
          const metalItem = $('<li>', {
            class: 'icon gold'
          }).append($('img'), {
            src: ''
          });
          medalRender.append(metalItem);
        } 
        if (this.newshop === true) {
          console.log('newshop', this.newshop)  // condition
          const medalRender = $(plSettings.sellerMetal);
          const metalItem = $('<li>', {
            class: 'icon gold'
          }).append($('img'), {
            src: ''
          });
          medalRender.append(metalItem);
        }
      });
    }
    return productListRender;
  };

  const $product = $('#List')
  $.each(data.productList, function (index, data) {
    $product.append(getProductList(data));
  });
});

//Below is the Setting JS
var plSettings = $.extend({
  sellerMetal: '#' + 'sellerMetal',
  goldMetalSrc: '/img/tps/gold.png'
});

.feature_ico {
    border: 1px solid #e0e0e0
}

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

Please signup or login to give your own answer.

Click here to cancel reply.

Dynamic List with jquery json data – SEO

Answers