Все элементы помещаются в массив, несмотря на то, что if (должен действовать как фильтр)

#javascript #jquery #arrays #if-statement

Вопрос:

У меня есть небольшая форма в моем HTML, которая принимает данные для бронирования. Соответствующая кнопка отправки связана с функцией ( saveReserve ). Идея заключается в том, что функция может взять данные и переместить их в массив, но также определяет, когда уже было сделано аналогичное резервирование, и поэтому, если это так, оставьте новое (не вставляйте его в массив с аналогичным).

Проблема в том, что все оговорки являются принудительными, даже если они одинаковы, игнорируя элемент IF:

 let allReservation = [];
var NR = 0

const saveReserve = () => {
    var date= $("#date").val();    //These are the form inputs//
    var hour= $("#hour").val();
    var gameRes = $("#reserveG").val();
    NR  

   
    var reservation = ({date, hour, gameRes})
    let exist = allReservation.find(e=> e.date == reservation.date amp;amp; e.hour == reservation.hour amp;amp; e.gameRes == reservation.gameRes);
    console.log(reservation, exist)
    
    if (exist == undefined) {
        allReservation.push( NR   ": "   $("#nameR").val()   Object.values(reservation) );
        alert ("All good")
    }else{   
      alert ("Invalid, try again")
    }

    //nameR is the name input in the form//


    console.log (allReservation)
    $("input").val('') 
}
$('[type="submit"]').click(saveReserve) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" value="2021-08-05" id="date" />
<input type="number" id="hour" min="0" max="23" value="7" />
<input type="text" id="reserveG" value="A" />
<input type="text" id="nameR" value="B" />
<input type="submit" /> 
 let allReservation = [];
var NR = 0

const saveReserve = () => {
    var date= $("#date").val();    //These are the form inputs//
    var hour= $("#hour").val();
    var gameRes = $("#reserveG").val();
    NR  

   
    var reservation = ({date, hour, gameRes})
    let exist = allReservation.find(e=> e.date == reservation.date amp;amp; e.hour == reservation.hour amp;amp; e.gameRes == reservation.gameRes);
    
    if (exist == undefined) {
        allReservation.push( NR   ": "   $("#nameR").val()   Object.values(reservation) ),
        alert ("All good") )
    }else{   
      alert ("Invalid, try again")
    }

    //nameR is the name input in the form//


    console.log (allReservation)
    $("input").val('') 
}
 

Единственный способ .найти работу можно, если я добавлю это в конце функции:

 allReservation.push (reservation)
 

Затем он распознает повторяющиеся элементы и предупреждает их, но также вводит их.

Комментарии:

1. В чем именно заключается проблема?

2. Функция .find() определяет, когда резервирование с теми же данными, что и данные, введенные в форме, уже находится в массиве. Идея заключается в том, что, когда это происходит, новые соответствующие оговорки игнорируются и не помещаются в один и тот же массив, но это не работает. В конце у меня есть массив с информацией о повторении

3. reservation является таким объектом { date: "2021-08-05", hour: "7", gameRes: "A" } : в то время как вы вводите в массив строку, подобную этой: allReservations "1: B2021-08-05,7,A" . Конечно, это несопоставимо

4. Ты думаешь , что понимаешь. Но reservation в array.find() явно является объектом, как было объявлено только в предыдущей строке. В противном случае вы не могли бы сделать Object.values() это позже в коде.

5. Теперь я понимаю, что ты имеешь в виду, спасибо! Дело в том, что я не хотел сравнивать всю информацию, которая вводится во ввод, только эти три части. Имя и номер МОГУТ быть одинаковыми, но не дата, час и игра. Я вижу, что, делая это, я в конечном итоге делаю две разные вещи, еще раз спасибо.

Ответ №1:

Ну, а как насчет того, чтобы просмотреть все оговорки с помощью цикла for и проверить, есть ли он в массиве или нет. При запуске ваш массив будет пуст, поэтому будет добавлено первое бронирование. Следующий проверит текущий массив резервирования, и если он существует, то не добавляйте в него. Есть много способов проверить, существует ли он в массиве или нет. Вот несколько примеров, демонстрирующих методы:

 var num_array = [1, 2, 3, 4, 4]
var string_Array = ["a", "b", "c", "a", "b", "c"]
var obj_array = [ { index: 1, value: "a" }, { index: 2, value: "b" }, { index: 2, value: "b" } ]

var num_ourArray = [];
var string_ourArray = [];
var obj_ourArray = [];

//loop through number array
$.each(num_array, function(k, v){

   //first way to check
   if ($.inArray(v, num_ourArray) == -1) //so if it's NOT in the array
   {
      num_ourArray.push(v)
   }
   
   //second way to check
   /*if (num_ourArray.indexOf(v) == -1) //so if it's NOT in the array
   {
      num_ourArray.push(v)
   }*/
})

console.log(num_ourArray)

//loop through string array
$.each(string_Array, function(k, v){

   //first way to check
   if ($.inArray(v, string_ourArray) == -1) //so if it's NOT in the array
   {
      string_ourArray.push(v)
   }
})

console.log(string_ourArray)

//loop through object array
$.each(obj_array, function(k, v){

   //first way to check
   if (!obj_ourArray.some(item => item.index === v.index)) //so if it's NOT in the array
   {
      obj_ourArray.push(v)
   }
})

console.log(obj_ourArray) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Ответ №2:

Вы можете упростить свою логику:

 let allReservation = [];
var NR = 0

class Reservation
{
    constructor(date, hour, gameRes, nr, nameR)
    {
        this.date = date;
        this.hour = hour;
        this.gameRes = gameRes;
        this.nr = nr;
        this.nameR = nameR;
    }

    get displayTitle()
    {
        return this.nr   ": "   this.nameR   this.date   this.hour   this.gameRes;
    }

    static is(a, b)
    {
        return a.date == b.date amp;amp; a.hour == b.hour amp;amp; a.gameRes == b.gameRes;
    }
}

const saveReserve = () => {
    var date= $("#date").val();    //These are the form inputs//
    var hour= $("#hour").val();
    var gameRes = $("#reserveG").val();
    NR  

   
    var reservation = new Reservation(date, hour, gameRes, NR, $("#nameR").val())
    let exist = allReservation.find(e=> Reservation.is(e, reservation));
    console.log(reservation, exist)
    
    if (exist == undefined) {
        allReservation.push(reservation);
        alert ("All good")
    }else{   
      alert ("Invalid, try again")
    }

    //nameR is the name input in the form//


    console.log (allReservation.map((reservation) => reservation.displayTitle))
    $("input").val('') 
}
$('button').click(saveReserve) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" value="2021-08-05" id="date" />
<input type="number" id="hour" min="0" max="23" value="7" />
<input type="text" id="reserveG" value="A" />
<input type="text" id="nameR" value="B" />
<button>Send</button> 

Ответ №3:

Ответ был в первом комментарии шедрича:

«является объектом, подобным этому: { дата: «2021-08-05», час: «7», игры: «A»}, в то время как вы вводите строку, подобную этой, в массив allReservations: «1: B2021-08-05,7,A». Конечно, это несопоставимо»

Поэтому я просто помещаю все данные в один и тот же var и нажимаю его вот так, без Objectc.values(). Также упростите «если», измените предупреждение и добавьте второй массив, в который будет помещена ошибка:

 var reservation  = ({NR, name, date, hour, gameRes})

let exist = allReservation.find(e => e.date=== reserva.date amp;amp; e.hour=== reserva.hour amp;amp; e.gameRes === reserva.gameRes);
  

  exist == undefined ? (allReservation.push(reservation), $("#alert-exito").fadeIn()) : (reservationError.push (reservation),$("#alert-error").fadeIn()) 
 

Спасибо всем вам!