Problem beim Drucken von JSON-Objekten in HTML mit Javascript

Question

Ich habe den folgenden Ajax-Code, um die Ajax-Anfrage eines Suchformulars zu behandeln.

$(document).ready(function() { 
$('#alert-message-warning').hide(); 
$('.shadow-z-1').hide(); 
$('#dateprice-search').on('click', '#btn-search', function() { 
    $.ajax({ 
     type: 'post', 
     url: '/date-price', 
     data: { 
      '_token': $('#csrf').val(), 
      'product_id': $("#product_id").val(), 
      'start': $("#start").val(), 
      'end': $("#end").val() 
     }, 
     success: function(data) { 
      console.log(Object.keys(data).length); 
      console.log(data); 
      var cha = Object.keys(data).length; 
      if (cha > 0) { 
       $('.shadow-z-1').show(); 
       $('.shadow-z-1').append("<tr class='liquid-row><td>" + data.start + "</td><td>"+ data.end + "</td><td>" + data.end + "</td><td><a class='btn-m btn btn-m-success'>Available</a></td></tr>"); 
      } 
      else{ 
       $('#alert-message-warning').show(); 
       $("#alert-message-warning").fadeTo(2000, 5000).slideUp(5000, function(){ 
        $("#alert-message-warning").slideUp(5000); 
       });     
      } 
     } 
    }); 
    }); 
}); 

Bei Bedarf werden die Parameter ausgewählt und die übermittelten Ergebnisse werden in JSON-Objekten angegeben. B. 5 Objekte, aber der Java-Skriptcode druckt alle Zeilen der db-Tabelle (alle 10 Zeilen). Was falsch mache ich hier? Detaillierte JSON-Objekte

Answer 1

Was Sie bekommen ein Array von Objekten ist. Um auf Ihr Objekt zuzugreifen, müssen Sie zu diesem Index gehen und das Objekt erhalten.

zB: data[0].start

Oder Sie können for-Schleife verwenden.

for(let i in data) { 
    console.log(data[i].start + "\t" + data[i].end); 
} 

Answer 2

$(document).ready(function() { 
    $('#alert-message-warning').hide(); 
    $('.shadow-z-1').hide(); 
    $('#dateprice-search').on('click', '#btn-search', function() { 
     $.ajax({ 
      type: 'post', 
      url: '/date-price', 
      data: { 
       '_token': $('#csrf').val(), 
       'product_id': $("#product_id").val(), 
       'start': $("#start").val(), 
       'end': $("#end").val() 
      }, 
      success: function(data) { 
       console.log(Object.keys(data).length); 
       console.log(data); 
       var cha = Object.keys(data).length; 
       $('.shadow-z-1').show(); 
       if (cha > 0) { 
        for (var i = 0; i < data.length; i++) { 

         $('.shadow-z-1').append("<tr class='liquid-row><td>" + data[i].start + "</td><td>"+ data[i].end + "</td><td>" + data[i].end + "</td><td><a class='btn-m btn btn-m-success'>Available</a></td></tr>"); 
        } 
       } 
       else{ 
        $('#alert-message-warning').show(); 
        $("#alert-message-warning").fadeTo(2000, 5000).slideUp(5000, function(){ 
         $("#alert-message-warning").slideUp(5000); 
        });     
       } 
      } 
     }); 
     }); 
    }); 

Sie müssen nur eine Schleife über Ihre Daten.

Answer 3

Die Variablendaten sind das gesamte Json-Objekt. Sie müssen dieses Objekt durchlaufen und jedes der Objekte anhängen.

data.foreach(function(obj) { 
    $('.shadow-z-1').append("<tr class='liquid-row><td>" + obj.start + "</td><td>"+ obj.end + "</td><td><a class='btn-m btn btn-m-success'>Available</a></td></tr>"); 
}) 

Auf diese Weise iterieren Sie und fügen Sie die Ergebnisse hinzu. Bei einem neuen Ajax-Anruf möchten Sie möglicherweise alles entfernen, damit Sie keine Ergebnisse von verschiedenen Anrufen mischen.

Hoffe, das hilft