filter data-value from array with jquery

Question

This is my full code.

I want to store value in a array like mentioned: dataArray = ["size", "color", "material"];
Each "form-row" div contain data-value like "size", "color", "material" from the "dataArray"- array;
when I click on the "create order" button, In this case it will create a data-value called "color", becoz there is already two div contain "size", and "material" field; Each single click of the button create the structure once at a time;
I have also "delete" feature mentioned in "/--remove div--/" section;
But there is a issue to filter/find the right thing; There is a problem in "srch()" -function; plz help me out;

//global variables
var dataArray = ["size", "color", "material"];
var dataArrayCreated = [];

var glb_array_len = dataArray.length;
var tot_len = $("#form-row_cst").find(".form-row").length;

/*--create_element--*/
function create_elment() {
  var html_structure = "<div class='form-row' data-value="+ dataArrayCreated[0] +"><div class='form-group col-md-3 col-sm-12'><label class='ad_prd_lbl'>Option name</label><input type='text' class='form-control' placeholder='"+ dataArrayCreated[0] +"' value='"+ dataArrayCreated[0] +"' id="+ dataArrayCreated[0]+'_val' +"></div><div class='form-group col-md-8 col-sm-12'><label class='ad_prd_lbl'>Option values</label><input type='text' id="+ dataArrayCreated[0]+'_inp' +" class='form-control' placeholder='Separate options with a comma'></div><div class='form-group col-md-1 col-sm-12'><button class='but_all btn_rmv' type='button'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M16 6a1 1 0 1 1 0 2h-1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V8H4a1 1 0 1 1 0-2h12zM9 4a1 1 0 1 1 0-2h2a1 1 0 1 1 0 2H9zm2 12h2V8h-2v8zm-4 0h2V8H7v8z'></path></svg></button></div></div>";

  $("#form-row_cst").append(html_structure).appendTo("#form-row_cst");
}

//search function
function srch() {
  $.each(dataArray, function (index, value) {
    console.log(value);
    $("#form-row_cst").find(".form-row").each(function () {
      console.log($(this).attr('data-value'));
      if( $(this).attr('data-value') !== value ) {
        dataArrayCreated[0] = value;
        console.log("found - "+dataArrayCreated[0]);
      }
    });
  });
}

//main function
function main_fn() {
 if( tot_len <= glb_array_len ) {
   //console.log("count Data - "+ tot_len+"-items");
   srch();
   create_elment();
 }
 else {
   console.log("Invalid Data - "+ tot_len+"-items");
 }
}

/*---click btn to create structure--*/
$("#clone_btn").click(function(){
  //find created element from list
  main_fn();

  if( ($("#form-row_cst").find(".form-row").length) > (dataArray.length)-1 ) {
    $(this).hide();
  }
});

/*--remove div--*/
$(document).on("click","#form-row_cst .btn_rmv", function(){
  //check if this div is last child of "#form-row_cst"
  if( $("#form-row_cst").find(".form-row").length-1 < 1) {
    alert("sorry, you can't delete this items");
  }
  else {
    //remove div
    $(this).parents(".form-row").remove();
  }
  if( ($("#form-row_cst").find(".form-row").length) < (dataArray.length)+1 ) {
    $("#clone_btn").show();
  }
});

body {
  color: rgba(70, 90, 110, 0.85);
  font-size: 0.8rem;
  line-height: 1.6;
  font-weight: 400;
  background-color: #f3f6f9;
}

.box {
  border-radius: 3px;
  box-shadow: 0 0px 1px rgba(0, 0, 0, 0.15);
  background-color: #fff;
  position: relative;
  margin-bottom: 1.5rem;
}

.order_details {
  padding: 15px;
}

.dropdown_div {
  display: none;
}

.gry_of_bg {
  background-color: #f9fafb;
}

.form-row>.col, .form-row>[class*=col-] {
  padding-right: 5px;
  padding-left: 5px;
}

.form-result_outer {
  padding: 15px 0px 0px;
}

label {
  display: inline-block;
  margin-bottom: .5rem;
}

.ad_prd_lbl {
  font-size: .8rem;
  color: #212b35;
  margin-bottom: .25rem;
}

#form-row_cst .form-row .form-control,
#form-row_cst .but_all {
  min-height: 36px;
}

.input_tags_cnt {
  position: relative;
  width:100%;
}

#form-row_cst .input_tags_cnt .bootstrap-tagsinput {
  background-color: #fff;
  box-shadow: none;
  border-color: rgba(120, 130, 140, 0.2);
  min-height: auto;
}

.bootstrap-tagsinput {
  width: 100%;
  font-size: 0;
  display: inline-block;
  padding: 4px 6px;
  color: #555;
  vertical-align: middle;
  border-radius: 4px;
  max-width: 100%;
  line-height: 22px;
  cursor: text;
  border: 1px solid #ccc;
}

.bootstrap-tagsinput input {
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  padding: 0 6px;
  margin: 0;
  width: auto;
  max-width: inherit;
}

#form-row_cst .form-row input,
#form-row_cst .form-row .bootstrap-tagsinput input {
  color: #222;
  font-size: 0.8rem;
}
.input_tags_cnt .bootstrap-tagsinput>input {
  width: 100%;
}

.but_all {
  padding: 5px 12px;
  border-radius: 3px;
  background: #fff;
  border: 1px solid #c4cdd5;
  line-height: 100%;
  cursor: pointer;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
  min-height: 34px;
}
#form-row_cst .but_all {
  margin-top: 24px;
}
#form-row_cst .form-row .form-control,
#form-row_cst .but_all {
  min-height: 36px;
}
#form-row_cst .form-row .form-control {
  width: 100%;
}

.but_all svg {
  width: 20px;
  height: 20px;
  line-height: 100%;
}

.cbd_table_product_table {
  border: 0px;
  min-width: 650px;
}

.cbd_table_product_table > thead > tr > th,
.cbd_table_product_table > tbody > tr > td {
  border-left: 0px;
  border-right: 0px;
  border-top: 0px;
  border-bottom: 1px solid #ebeef0;
  vertical-align: top;
  font-size: 0.86rem;
}

.cbd_table_product_table > thead > tr > th {
  padding: .5rem .4rem;
  color: #212b35;
  font-weight: 500;
}
.cbd_table_product_table > thead > tr > th:first-child,
.cbd_table_product_table > tbody > tr > td:first-child {
  padding-left: 3px;
}

.custom-checkbox {
  margin: 0rem;
  vertical-align: middle;
  padding: 0px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
}
.custom-checkbox .custom-control-input {
  width: 1rem;
  height: 1rem;
  position: relative;
}
.custom-control-indicator {
  position: absolute;
  top: .25rem;
  left: 0;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #ddd;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
}
.custom-checkbox .custom-control-input:checked~.custom-control-indicator {
  background-color: #17a2b8;
}
.custom-checkbox .custom-control-input:checked~.custom-control-indicator {
  background-image: url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' v…M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E);
}

.tb_Variant_tag {
  font-size: .8rem;
  position: relative;
  padding-right: 10px;
  text-transform: capitalize;
  line-height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.color_tb_Variant {
  color: #29bc94;
}
.size_tb_Variant {
  color: #ff9517;
}
.meterial_tb_Variant {
  color: #763eaf;
}
.tb_Variant_tag:after {
  content: "";
  background-color: #637381;
  height: 4px;
  width: 4px;
  position: absolute;
  right: 2px;
  top: 4px;
  font-size: 0;
  border-radius: 50%;
  overflow: hidden;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>


<div class="box">
      <div class="order_details">
        <header class="prd_hdr clearfix">
          <h6>Variants</h6>
        </header>
        <div class="form-group">
            <p>Add variants if this product comes in multiple versions, like different sizes or colors.</p>
        </div>
      </div>
      <div class="clearfix dropdown_div" style="display: block;">
          <div class="order_details gry_of_bg">
              <div class="clearfix" id="form-row_cst">
                  <div class="form-row" data-value="size">
                      <div class="form-group col-md-3 col-sm-12">
                          <label class="ad_prd_lbl">Option name</label>
                          <input type="text" class="form-control" id="size_val" placeholder="Size" value="size">
                      </div>
                      <div class="form-group col-md-8 col-sm-12">
                          <label class="ad_prd_lbl">Option values</label>
                          <input type="text" id="size_inp" class="form-control" placeholder="Separate options with a comma">
                      </div>
                      <div class="form-group col-md-1 col-sm-12">
                          <button class="but_all btn_rmv" type="button">
                              <svg id="delete-minor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                  <path d="M16 6a1 1 0 1 1 0 2h-1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V8H4a1 1 0 1 1 0-2h12zM9 4a1 1 0 1 1 0-2h2a1 1 0 1 1 0 2H9zm2 12h2V8h-2v8zm-4 0h2V8H7v8z"></path>
                              </svg>
                          </button>
                      </div>
                  </div>
                  <div class="form-row" data-value="material">
                      <div class="form-group col-md-3 col-sm-12">
                          <label class="ad_prd_lbl">Option name</label>
                          <input type="text" class="form-control" id="material_val" placeholder="material" value="material">
                      </div>
                      <div class="form-group col-md-8 col-sm-12">
                          <label class="ad_prd_lbl">Option values</label>
                          <input type="text" id="material_inp" class="form-control" placeholder="Separate options with a comma">
                      </div>
                      <div class="form-group col-md-1 col-sm-12">
                          <button class="but_all btn_rmv" type="button">
                              <svg id="delete-minor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                  <path d="M16 6a1 1 0 1 1 0 2h-1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V8H4a1 1 0 1 1 0-2h12zM9 4a1 1 0 1 1 0-2h2a1 1 0 1 1 0 2H9zm2 12h2V8h-2v8zm-4 0h2V8H7v8z"></path>
                              </svg>
                          </button>
                      </div>
                  </div>

              </div>
              <div class="form-row">
                  <div class="form-group col-sm-12">
                      <button class="but_all" type="button" id="clone_btn">Create order</button>
                  </div>
              </div>
          </div>
      </div>
    </div>

It appears that you want srch() to find every item in dataArray for which there is currently no corresponding form-row. And you want main_fn() to call srch()then create any missing rows. Is that correct? — Roamer-1888
– Roamer-1888, Commented Apr 22, 2018 at 14:19
yes...there is no "display: none" type things. row will append with button click function. — S.pal
– S.pal, Commented Apr 22, 2018 at 14:37

Roamer-1888 · Accepted Answer · 2018-04-22 23:47:51Z

1

You will find this kind of thing (and programming in general) simpler and more satisfying once you know how to exploit functions' ability to accept arguments and return values.

On the basis that you want :

srch() to find every item in dataArray for which there is currently no corresponding form-row.
main_fn() to call srch() then create any missing rows.

First write srch() to return a filtered copy of dataArray, as follows :

function srch() {
    // Return a filtered copy of `dataArray` leaving items for which there is currently no corresponding form-row.
    return dataArray.filter(function(item) {
        return $("#form-row_cst .form-row").filter(function() {
            return $(this).data('value') === item;
        }).length === 0;
    });
}

Then write main_fn() to loop through the array returned by srch() calling create_elment(), as follows :

function main_fn() {
    if( tot_len <= glb_array_len ) {
        console.log("count Data - " + tot_len + "-items");
        srch().forEach(create_elment);
    } else {
        console.log("Invalid Data - " + tot_len + "-items");
    }
}

For this to work, create_elment() needs to accept an argument, as follows :

function create_elment(item) {
    $("<div class='form-row' data-value=" + item + "><div class='form-group col-md-3 col-sm-12'><label class='ad_prd_lbl'>Option name</label><input type='text' class='form-control' placeholder='" + item + "' value='" + item + "' id=" + item + '_val' + "></div><div class='form-group col-md-8 col-sm-12'><label class='ad_prd_lbl'>Option values</label><input type='text' id=" + item + '_inp' +" class='form-control' placeholder='Separate options with a comma'></div><div class='form-group col-md-1 col-sm-12'><button class='but_all btn_rmv' type='button'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M16 6a1 1 0 1 1 0 2h-1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V8H4a1 1 0 1 1 0-2h12zM9 4a1 1 0 1 1 0-2h2a1 1 0 1 1 0 2H9zm2 12h2V8h-2v8zm-4 0h2V8H7v8z'></path></svg></button></div></div>").appendTo("#form-row_cst");
}

The outer var dataArrayCreated can be dispensed with.

EDIT

To add just one row per click of #clone_btn, you can leave srch() as it is (my version) and in main_fn() change the line ...

srch().forEach(create_elment);

to ...

srch().slice(0, 1).forEach(create_elment);

That way, srch() still returns an array of items representing all missing rows, and main_fn() is in control of which of them it will operate on.

If srch() returns empty array, then srch().slice(0, 1) will also be empty array and create_elment will not be called. Unless you particularly want to see those messages in the log, the if(tot_len <= glb_array_len) test is probably no longer necessary?

edited Apr 22, 2018 at 23:47

answered Apr 22, 2018 at 15:04

Roamer-1888

19.3k5 gold badges35 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

S.pal Over a year ago

Thank you... but i also mentioned each row will create in each click of the button. Suppose I have just one row. Then I click "create order" button, it will create two rows. but I need one row at a time. overall functionally is great;

Roamer-1888 Over a year ago

Ah, so you want to create a "size" row, "material" row, then a "colour" row , in that order, one row at a time? If so, your original code was closer than I thought.

S.pal Over a year ago

partially correct...I don't want to add "size" row, "material" row, then a "colour" row in that order. But yes, I want to add any of this missing row one at a time.

Roamer-1888 Over a year ago

See my suggested edit above. I think it will do what you want.

Collectives™ on Stack Overflow

filter data-value from array with jquery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related