[SOLVED] How do I simplify repeating creatediv function by adding a new variable?

How do I simplify repeating creatediv function by adding a new variable?

I wonder if there's a simpler way to write this code. I noticed that the creatediv is kinda repeating, the only difference would be the class (.parentdivclass) that will be append to the filtered list.

I tried adding the 3rd variable to the function creatediv(), which will replace dynamically the .parentclass but since I'm a javascript beginner, I didnt's managed to do it.

My Google sheets = https://docs.google.com/spreadsheets/d/1JNZ9-BH9S4xyugcVqmFQAmDHXsm0n352Ntqt1qLlo6c/edit#gid=0

Your help would be appreciated, thank you!

var sheetdata = [];
var sheetdata2 = [];
//replace it with your values
makecall({
  'sheetid' : '1JNZ9-BH9S4xyugcVqmFQAmDHXsm0n352Ntqt1qLlo6c',
  'apikey' : 'AIzaSyALdBmQcULfcxOlzYAWalbLPW3qsqz5P6o',
  'parentdivclass' : '.main-div',
  'parentdivclass2' : '.main-div2',
  'elementdivclass' : '.sing-list',
  'emptylist' : '.empty-list',
});

function makecall(initobj)
{
  $('.main-div').hide();
  //&ranges=Sheet2
  $.ajax({
    url: "https://sheets.googleapis.com/v4/spreadsheets/"+initobj.sheetid+"/values:batchGet?ranges=Sheet1&key="+initobj.apikey,
    type: 'GET',
    dataType: 'json', // added data type
    success: function(res) {
      let valuerage = res.valueRanges;
      valuerage.forEach((val, mainindex) => {
        val.values.forEach((property,index) => {
          let status = (property[3]);
          if(index != 0) {
            if(status=="a")
            {
              sheetdata.push(property);
            }

            if(status=="b")
            {
              sheetdata2.push(property);
            } 
          }
        });
        creatediv(initobj,sheetdata);
        creatediv2(initobj,sheetdata2);
      });
    }
  });


  function creatediv(initobj,homedat)
  {
    for(let x=0; x<homedat.length;x++)
    {
      let singdat = homedat[x];
      $(initobj.parentdivclass).append('<div class="sing-list w-clearfix"><div class="img-wrap"><img src='+singdat[2]+'loading="lazy" alt="" class="listing-img"></div><div class="listing-det"><h2 class="listing-head">'+singdat[0]+'</h2><p>'+singdat[3]+'</p><p class="listing-parag">'+singdat[1]+ '</p></div></div>');
    }
    $(initobj.elementdivclass)[0].remove();
    $(initobj.parentdivclass).show();
    $(initobj.emptylist).hide();
  }

  function creatediv2(initobj,homedat)
  {
    for(let x=0; x<homedat.length;x++)
    {
      let singdat = homedat[x];
      $(initobj.parentdivclass2).append('<div class="sing-list w-clearfix"><div class="img-wrap"><img src='+singdat[2]+'loading="lazy" alt="" class="listing-img"></div><div class="listing-det"><h2 class="listing-head">'+singdat[0]+'</h2><p>'+singdat[3]+'</p><p class="listing-parag">'+singdat[1]+ '</p></div></div>');
    }
    $(initobj.elementdivclass)[0].remove();
    $(initobj.parentdivclass).show();
    $(initobj.emptylist).hide();
  }
  
}

.section {
  padding-top: 40px;
  padding-bottom: 40px;
}

.main-div, .main-div2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.sing-list, .sing-list2 {
  width: 30%;
  padding-right: 1%;
  padding-left: 1%;
}

.img-wrap {
  position: relative;
  width: 100%;
  padding-top: 80%;
}

.listing-img {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<section class="section">
  <div class="w-layout-blockcontainer w-container">
    <h1 class="heading">SheetsCMS</h1>
    <div class="empty-list" style="display: none;">
      <div>no items to display</div>
    </div>

    <h2 class="heading">List a</h2>
    <div data-sheets-cms="" class="main-div" style="">
      <div class="sing-list w-clearfix">
        <div class="img-wrap">
          <img src="https://thealterreal.com/images/womens-home-1-p-800.jpg?loading=&quot;lazy&quot;" alt="" class="listing-img">
        </div>
        <div class="listing-det">
          <h2 class="listing-head">CONTEMPORARY MASTERPIECE</h2>
          <p class="listing-parag">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>

    <h2 class="heading">List b</h2>
    <div data-sheets-cms="" class="main-div2" style="">
      <div class="sing-list2 w-clearfix">
        <div class="img-wrap">
          <img src="https://thealterreal.com/images/womens-home-1-p-800.jpg?loading=&quot;lazy&quot;" alt="" class="listing-img">
        </div>
        <div class="listing-det">
          <h2 class="listing-head">CONTEMPORARY MASTERPIECE</h2>
          <p class="listing-parag">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Solution

Assuming you just want to pass the property name in, you can add the 3rd variable like this:

function creatediv(initobj,homedat,parent)
{
  for(let x=0; x<homedat.length;x++)
  {
    let singdat = homedat[x];
    $(initobj[parent]).append('<div class="sing-list w-clearfix"><div class="img-wrap"><img src='+singdat[2]+'loading="lazy" alt="" class="listing-img"></div><div class="listing-det"><h2 class="listing-head">'+singdat[0]+'</h2><p>'+singdat[3]+'</p><p class="listing-parag">'+singdat[1]+ '</p></div></div>');
  }
  $(initobj.elementdivclass)[0].remove();
  $(initobj[parent]).show();
  $(initobj.emptylist).hide();
}

// then call like this
creatediv(initobj,sheetdata,"parentdivclass");
creatediv(initobj,sheetdata2,"parentdivclass2");