CODEWITHSUNDEEP
phpjqueryajax
George B.
George B.

Reputation: 312

jQuery - append ajax result

When I have one result from ajax.php I get correct result, but if I have two or more result I can't see result

<script type="text/javascript">
     $(document).ready(function() {
         $('#txt').bind('propertychange keyup input paste',function() {

             $('div#text-container').html('');
             var word = $('input#txt').val();

             $.ajax({ 
                 type: 'GET', 
                 url: 'ajax.php', 
                 data: { word: word }, 
                 dataType: 'json',
                 success: function (data) { 
                     if (data.text) {
                         var result = "<strong>" + data.word + '</strong> - ' + data.text
                     } else {
                         var result = "<strong>" + data.word + '</strong> - ' + "not found"
                     }
                     $('div#text-container').append(result);
                 }
             });
         });
    });
</script>

result example(Coming from ajax):

[{
    "word": "Hell",
    "text": "Hell"
}, {
    "word": "Hello",
    "text": "Hello"
}]

How can I solve this problem?

Thanks!

Upvotes: 2

Views: 10137

Answers (5)

Amir Sandila
Amir Sandila

Reputation: 43

First of all you should check your result either it is an array or object then you can loop through.

Use the following loop for object:

for (const key in response){
   var id = key;
   var name = response[key];
   $('#id').append("<option value='"+id+"'>"+name+"</option>");
}

Foreach loop for Array:

response.forEach(obj => {
    let courseName = obj.courseName;
    let stdName = obj.student_name;
    let stdkey = obj.std_id;
    $('.class').append("<td >" + stdName +" </td> <td>" + courseName + "</td>
});

Upvotes: 0

Dipesh Sukhia
Dipesh Sukhia

Reputation: 101

<script type="text/javascript">
$(document).ready(function() {

  $('#txt').bind('propertychange keyup input paste',function() {

    $('div#text-container').html('');
    var word = $('input#txt').val();

    $.ajax({ 
          type: 'GET', 
          url: 'ajax.php', 
          data: { word: word }, 
          dataType: 'json',
          success: function (data) { 
            var obj = jQuery.parseJSON(data);
            var result = "";
            for (i = 0; i < obj.length; ++i) {
            if (obj[i].text) {
              result = "<strong>" + obj[i].word + '</strong> - ' + obj[i].text
            } else {
              result = "<strong>" + obj[i].word + '</strong> - ' + "not found"
            }
          }
            $('div#text-container').append(result);
          }

      });
    });

});
</script>

Upvotes: 0

Shibon
Shibon

Reputation: 1574

In the ajax section

  var result="";
   $.ajax({ 
      type: 'GET', 
      url: 'ajax.php', 
      data: { word: word }, 
      dataType: 'json',
      success: function (data) { 
        if (data.length > 0) {
         $.each(data, function(i, item) {
           result += "<strong>" + data[i].word + '</strong> - ' + data[i].text;
           });​
        } else {
           result += "<strong>" + data.word + '</strong> - ' + "not found"
        }
        $('div#text-container').append(result);
      }

  });
});

Upvotes: 4

Shubhranshu
Shubhranshu

Reputation: 521

success: function (data) { 
       $.each( data, function(row){

        if (row.text) {

          var result = "<strong>" + row.word + '</strong> - ' + row.text
        } else {
          var result = "<strong>" + row.word + '</strong> - ' + "not found"
        }
        $('div#text-container').append(result);
        });
      }

Upvotes: 0

Trushar Narodia
Trushar Narodia

Reputation: 366

try this code 

$.ajax({ 
          type: 'GET', 
          url: 'ajax.php', 
          data: { word: word }, 
          dataType: 'json',
          success: function (data) {
            if(data.length > 0){
              for(i=0; i<data.length; i++){
              if (data[i].text) {
              var result = "<strong>" + data[i].word + '</strong> - ' + data[i].text
            } else {
              var result = "<strong>" + data[i].word + '</strong> - ' + "not found"
            }
              }
            }
            
            
            $('div#text-container').append(result);
          }

      });
    });

Upvotes: 1

Related Questions