Ajax call to PHP class to return array, array index returns undefined

Question

I'm trying to add array values to an select html element. My problem is the following:

Once I try to get the array from the PHP class using AJAX the response returns undefined as you can see in the following screenshot: https://gyazo.com/1bc4872533c5ba0651c4890cbd01fd97

My Code does look like the following:

Ajax and html:

<div class="col-sm-6">
            <label>Gender</label>
            <select id="fds_gender" name="fds_gender" data-placeholder="Select a gender..." class="select-icons">
                <option value="stud" data-icon="man">Male</option>
                <option value="babe" data-icon="woman">Female</option>
            </select>
        </div>
    </div>
</div>

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

            if ($(this).val() == "stud") {
                $.ajax({
                    type: "POST",
                    data: {
                        'username' : '<?php echo $user->username; ?>',
                        'gender' : 'stud'
                    },
                    url: "ajax/fds_categories_ajax.php",
                    success: function(data){
                        console.log(data['name']);
                    }
                });
            }else if($(this).val() == "babe"){
                $.ajax({
                    type: "POST",
                    data: {
                        'username' : '<?php echo $user->username; ?>',
                        'gender' : 'babe'
                    },
                    url: "ajax/fds_categories_ajax.php",
                    success: function(data){
                        console.log(data['name']);
                    }
                });
            }
        });
     });
</script>

and here's the PHP file which calls the PHP class function which returns the array:

<?php
    require_once('../../handling/fds_categorys.php');

    if(!empty($_POST)){
        $username = $_POST['username'];
        $gender = $_POST['gender'];

        $fds_categories = new fds_categorys($username, $gender);
        $fds_categories_response = $fds_categories->get_template_categories();

        return $fds_categories_response;
    }else{
        return 'Please select a gender.';
    }
?>

The returned array does look like the following:

array(1) {
  ["categories"]=>
  array(12) {
    ["4ffc3111a41f46bf58590aa0bb200630"]=>
    array(5) {
      ["name"]=>
      string(5) "Hairs"
      ["id"]=>
      string(8) "20074652"
      ["active"]=>
      string(4) "true"
      ["displayName"]=>
      string(5) "Hairs"
      ["previewUrl"]=>
      string(13) "stud/hair.swf"
    }
    ["7f579c66d0a7d4d007a15eb17682bd8e"]=>
    array(5) {
      ["name"]=>
      string(6) "Shirts"
      ["id"]=>
      string(8) "20074653"
      ["active"]=>
      string(4) "true"
      ["displayName"]=>
      string(6) "Shirts"
      ["previewUrl"]=>
      string(13) "stud/tops.swf"
    }
    ["29d7993b5db7388915fe7067517999db"]=>
    array(5) {
      ["name"]=>
      string(7) "Jackets"
      ["id"]=>
      string(8) "20074654"
      ["active"]=>
      string(4) "true"
      ["displayName"]=>
      string(7) "Jackets"
      ["previewUrl"]=>
      string(16) "stud/jackets.swf"
    }
    ["a274880556d8853de27876a5cffd0fb9"]=>
    array(5) {
      ["name"]=>
      string(7) "Bottoms"
      ["id"]=>
      string(8) "20074655"
      ["active"]=>
      string(4) "true"
      ["displayName"]=>
      string(7) "Bottoms"
      ["previewUrl"]=>
      string(16) "stud/bottoms.swf"
    }
    ["a60ba1a7a56c9e00252baebe89d62c12"]=>
    array(5) {
      ["name"]=>
      string(5) "Shoes"
      ["id"]=>
      string(8) "20074656"
      ["active"]=>
      string(4) "true"
      ["displayName"]=>
      string(5) "Shoes"
      ["previewUrl"]=>
      string(14) "stud/shoes.swf"
    }
    ["643fdaf1fef54e8def751f54b706cd60"]=>
    array(5) {
      ["name"]=>
      string(6) "Gloves"
      ["id"]=>
      string(8) "20074657"
      ["active"]=>
      string(4) "true"
      ["displayName"]=>
      string(6) "Gloves"
      ["previewUrl"]=>
      string(15) "stud/gloves.swf"
    }
    ["044521e5145fe9bef15063b9594ee586"]=>
    array(5) {
      ["name"]=>
      string(5) "Belts"
      ["id"]=>
      string(8) "20074658"
      ["active"]=>
      string(4) "true"
      ["displayName"]=>
      string(5) "Belts"
      ["previewUrl"]=>
      string(14) "stud/belts.swf"
    }
    ["8111b0006bc6d13725a81813e5a98a09"]=>
    array(5) {
      ["name"]=>
      string(7) "Scarves"
      ["id"]=>
      string(8) "20074659"
      ["active"]=>
      string(4) "true"
      ["displayName"]=>
      string(7) "Scarves"
      ["previewUrl"]=>
      string(16) "stud/scarves.swf"
    }
    ["1765c2917753cf1c0e6994b3ef362639"]=>
    array(5) {
      ["name"]=>
      string(4) "Hats"
      ["id"]=>
      string(8) "20074660"
      ["active"]=>
      string(4) "true"
      ["displayName"]=>
      string(4) "Hats"
      ["previewUrl"]=>
      string(13) "stud/hats.swf"
    }
    ["9422d6dde5a1c70984984f203ee168df"]=>
    array(5) {
      ["name"]=>
      string(4) "Bags"
      ["id"]=>
      string(8) "20074661"
      ["active"]=>
      string(4) "true"
      ["displayName"]=>
      string(4) "Bags"
      ["previewUrl"]=>
      string(13) "stud/bags.swf"
    }
    ["af411d238070f3062264110665b9a4bc"]=>
    array(5) {
      ["name"]=>
      string(12) "Miscellanies"
      ["id"]=>
      string(8) "20074662"
      ["active"]=>
      string(4) "true"
      ["displayName"]=>
      string(4) "Misc"
      ["previewUrl"]=>
      string(13) "stud/misc.swf"
    }
    ["398c88178452f433328cf6ed836a47a4"]=>
    array(5) {
      ["name"]=>
      string(17) "FacialDecorations"
      ["id"]=>
      string(8) "20074663"
      ["active"]=>
      string(4) "true"
      ["displayName"]=>
      string(5) "Masks"
      ["previewUrl"]=>
      string(14) "stud/masks.swf"
    }
  }
}

Does anyone have a idea why the console.log returns undefined the whole time?

Ben · Accepted Answer · 2016-03-02 09:29:53Z

3

You're returning a PHP array object and are trying to make the JavaScript understand it.

Instead, convert it to a JSON array:

$response = json_encode($fds_categories_response);

Then echo it (return doesn't output any data):

echo $response;

Then in the AJAX, convert it into a JavaScript array and take a look at the console:

$.parseJSON(data);
console.log(data);

To get the category names, it would be something like:

var categories = data.categories;
$.each(index, element){
    console.log(element.name);
});

edited Mar 2, 2016 at 9:29

answered Mar 2, 2016 at 9:26

Ben

8,9519 gold badges48 silver badges82 bronze badges

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

Comments

Om R Kattimani · Accepted Answer · 2016-03-02 09:29:07Z

1

you can't return any value from the PHP function if you want something to be return use echo function and read inside ajax call function

answered Mar 2, 2016 at 9:29

Om R Kattimani

1151 silver badge9 bronze badges

Collectives™ on Stack Overflow

Ajax call to PHP class to return array, array index returns undefined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related