PHP AJAX JSON iteration

Question

I am familiarizing myself with ajax and json.

My page is addAccount.php and inside, I have a FORM with the INPUTs below:

 <input type="text" id="partnerCode" />
 <input type="button" id="pCodeSearch" value="Search" />

I have a JavaScript page called global.js the gets the information:

 $('input#pCodeSearch').on('click' , function()
 {
   var partnercode = $('input#partnerCode').val();
   if($.trim(partnercode) != '')
   {
     $.post('api/pCodeSearch.php', {partnercode: partnercode}, function(data)
     {
       $('div#partner-data').text(data);
     });
   }
 });

In the above code, you will see the processing page called pCodeSearch.php. Here is that code:

 <?php
   if(isset($_POST['partnercode']) === true && empty($_POST['partnercode']) === false)
   {
     require "../include/database.php";
     require "../include/sessions.php";

     $search = "SELECT FULL_NAME, PARTNER_CODE from partner WHERE PARTNER_CODE = '"htmlentities(stripslashes(trim($_POST['partnercode'])))."'";

     $query = mysqli_query($dbc, $search); // $dbc is the connection string

     if(mysqli_num_rows($query) !== 0)
     {
       $out = array();
       while($row = $query->fetch_assoc())
       {
         $out[] = $row;
       }
       echo json_encode($out);
       mysqli_free_result($query);
     }
     else
     {
       echo 'Partner not found';
     }
   }
 ?>

With all of the above code, I can display in a DIV tag called #partner-data, as you saw in my JavaScript code above.

But this is the output:

 [{"FULL_NAME":"PARTNER SA","PARTNER_CODE":"0000011182"}]

I would like to echo out just PARTNER SA and 0000011182.

I attempted this on my JavaScript page:

 $.each(data, function(index, item)
 {
   $('<div>').
     attr('value', item.PARTNER_CODE).
     text(item.FULL_NAME).
     appendTo($('#partner-data'));
 });

But nothing returns to the screen.

jeroen · Accepted Answer · 2015-01-06 20:33:12Z

2

Your loop seems correct if the json string that came back from php has been parsed.

As you see a string in your first attempt, my guess would be that it is not parsed, so you would need:

var obj = JSON.parse(data);
$.each(obj, function(index, item) {
   $('<div>').
     attr('value', item.PARTNER_CODE).
     text(item.FULL_NAME).
     appendTo($('#partner-data'));
});

You can also tell jquery to do that automatically using the 4th parameter of $.post to specify the type of the returned data:

$.post('api/pCodeSearch.php', {partnercode: partnercode}, function(data) {
    // your original $.each() loop
  }, 'json');
   ^^^^^^^^ here

edited Jan 6, 2015 at 20:33

answered Jan 6, 2015 at 20:27

jeroen

91.8k22 gold badges117 silver badges132 bronze badges

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

2 Comments

John Beasley Over a year ago

Thank you, good sir. I attempted the first piece of code you provided and I was successfully retrieving the necessary data. In the text portion, I did: text(item.FULL_NAME+" , "+item.PARTNER_CODE) and was able to print both to the screen. I am not exactly sure what the second piece of code (you provided) does. I will attempt it nonetheless. Thank you thank you.

jeroen Over a year ago

@HoodCoderMan It tells jQuery to parse the json as soon as it comes in, so your data variable will be an object and you can use that directly in the loop you posted in your question.

Mike W · Accepted Answer · 2015-01-06 20:25:59Z

0

Instead of:

$('div#partner-data').text(data);

try:

 $('div#partner-data').text(data.d.["FULL_NAME"]);

answered Jan 6, 2015 at 20:25

Mike W

3183 silver badges5 bronze badges

Comments

Tiger · Accepted Answer · 2015-01-06 20:41:12Z

I think i m gonna to help you :) ,

First set the correct content type for that json response,,

so write like this :

header('Contenty-Type: application/json');
echo json_encode($out);

then on client side response handling function will look like :-

$('input#pCodeSearch').on('click' , function()
 {
   var partnercode = $('input#partnerCode').val();
   if($.trim(partnercode) != '')
   {
     $.post('api/pCodeSearch.php', {partnercode: partnercode}, function(data)
     {
        // $('div#partner-data').text(data);
        // Because data value is json, and actually it is returing a array of objects
        // so

        for(i = 0; i < data.length; i++){

            currect_object = data[i];
            $('div#partner-data').append(current_object.FULL_NAME + '\t' + current_object.PARTNER_CODE + '\n');  
           // here you can also create an templete and can use that like 
           //  output_html = mytemplete(current_object.FULL_NAME, current_object.PARTER_CODE);
           //  $('div#partner-data').append(output_html);  

        } // __iterate to all array of objects

     }); // __post
   } // __if
 });

and i don't think you need that jquery each, There may be some syntex error, because i did not check that, :) Thanks,

Collectives™ on Stack Overflow

PHP AJAX JSON iteration

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related