CODEWITHSUNDEEP
phpjqueryarrays
user2310422
user2310422

Reputation: 555

How can I use the data the is return from the Ajax?

I am using ajax to retrieve data from my database and store it as an array, then I return the result. My goal is, when the users click the "Click Me" button. I want to alert the first array from the data that is returned. However, my code below is not returning anything.

<input type="button" id="click_me" value="Click Me"/>

var data_array;

$.post('generate.php', {id: id}, function(data){
                data_array= data;         
});

$('#click_me').click(function(){
   alert(data_array[0]);
});

generate.php

<?php
    header('Content-Type: application/json');
    $array = array('Hello', 'Good Morning', 'Nice to meet you');

    echo json_encode($array);

?>

Upvotes: 3

Views: 66

Answers (3)

botenvouwer
botenvouwer

Reputation: 4432

Well as I see you want to use json and Javascript. When sending json with mime type application/json Its automatically transferred to an array. this is because json is an respected data type and all major browsers support it.

This is my jquery/javascript:

                $(document).ready(function () { 
                    $('body').on('click', '#clickme', function(){
                        $.post('json.php', function (json){ 

                            // Now do stuff with the json
                            var table = ''; 
                            for(q = 0; q < $(json).size(); q++){
                                table += '<tr><td>' + json[q] + '</td></tr>';
                            }
                            var content = '<table>' +table+ '</table>';
                            $('#put_stuf_inside_me').html(content);

                        }); 
                    });
                });

my html:

<input type="button" id="clickme" value="do magic" />
<div id="put_stuf_inside_me"></div>

my php:

<?php

    header('Content-Type: application/json');
    $array = array('Hello', 'Good Morning','Nice to meet you','I put something over here');

    echo json_encode($array);

?>

You see how easy it is!

Upvotes: 0

Akshat Jiwan Sharma
Akshat Jiwan Sharma

Reputation: 16000

It won't work this way since the ajax request is async. One thing that you could do is

 var data_array;

  $.post('generate.php', {id: id}, function(data){
      data_array= data; 
      $('#click_me').click(function(){
      alert(data_array[0]);
   });        
});

Or if you make sure that you are clicking the button only after the data is received your present code would work

A third option would be to retrieve the data when the user click the button

 $('#click_me').click(function(){
      $.post('generate.php', {id: id}, function(data){
       data_array= data; 
     alert(data_array[0]);        
   });

 });

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

Don't declare data-array as a local variable, use the global one by removing 'var' in nested success callback declaration:

$.post('generate.php', {id: id}, function(data){
                data_array= data;         
});

Upvotes: 1

Related Questions