Повторяющееся значение в console.log с Tagsinput Bootstrap - PullRequest
Новая
       22

Повторяющееся значение в console.log с Tagsinput Bootstrap

0 голосов
/ 07 апреля 2020

У меня проблема с массивом Tagsinput Bootstrap, я добавляю элемент в поле tagsinput и вызываю события itemAdded. Если я добавлю два или более элементов, console.log покажет мне повторяющееся значение следующим образом: 

0: (2) ["white", "black"]
1: (2) ["white", "black"]

Я просто хочу, чтобы оно показало мне одно значение, например: 0: (2) ["white", "black"], если я добавлю два элемента в поле tagsinput.

И если у меня есть две строки Tagsinput, как показано на рисунке ниже, я хочу console.log показать мне так 

0: (2) ["white", "black"]
1: (2) ["10", "200"]

enter image description here

Как я могу это исправить? Вот мой кодовый блок: https://codepen.io/LinhNT/pen/WNvmygx

$(document).ready(function () {
    $('.js_add_property').click(function () {
        var wraper = $('#js_add_property_wraper');
        addProperty(wraper);
    });

    var arr = [];
    $(document).on('itemAdded','.tags-input', function(event) {
        var items = $(this).tagsinput('items');
        arr.push(items);
      
        console.log(arr)
    });
});

function addProperty(wraper) {
    var template = `<div class="row property-row">
                        <div class="col-md-5">
                            <div class="form-group">
                                <label>Tags</label>
                                <input type="text" class="tags-input">
                            </div>
                        </div>
                    </div>`;
    wraper.append(template);

    $('.tags-input').tagsinput();
}
.bootstrap-tagsinput {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.bootstrap-tagsinput input {
    padding: 0;
}

.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}
.label-info {
    background-color: #5bc0de;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.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/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
<div class="display-list">
  <div id="js_product_name" data-name="Product name" data-code="51030300708" data-import-price="280000.00" data-list-price="325000.00" data-price="294000.00"></div>
  <div id="js_add_property_wraper"></div>
  <button class="btn btn-primary js_add_property">Add property</button>
</div>

1 Ответ

1 голос
/ 07 апреля 2020

Вам необходимо проверить, добавлен ли массив или нет. Как это: 

$(document).ready(function () {
    $('.js_add_property').click(function () {
        var wraper = $('#js_add_property_wraper');
        addProperty(wraper);
    });

    var arr = [];
    $(document).on('itemAdded','.tags-input', function(event) {
        
        var items = $(this).tagsinput('items');
        if (!arr.includes(items)){
          arr.push(items);
        }
      
        console.log(arr)
    });
});

function addProperty(wraper) {
    var template = `<div class="row property-row">
                        <div class="col-md-5">
                            <div class="form-group">
                                <label>Tags</label>
                                <input type="text" class="tags-input">
                            </div>
                        </div>
                    </div>`;
    wraper.append(template);

    $('.tags-input').tagsinput();
}
.bootstrap-tagsinput {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.bootstrap-tagsinput input {
    padding: 0;
}

.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}
.label-info {
    background-color: #5bc0de;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.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/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
<div class="display-list">
  <div id="js_product_name" data-name="Product name" data-code="51030300708" data-import-price="280000.00" data-list-price="325000.00" data-price="294000.00"></div>
  <div id="js_add_property_wraper"></div>
  <button class="btn btn-primary js_add_property">Add property</button>
</div>
...