AJAX receives multiple results from PHP-CodePudding

I hope someone can help get it sorted, AJAX receives only one result to display on select dropdown. It looks like this Model1Model2Model3Model4. I wanted to look like this

Model1

Model2

Model3

Model4

where would look like this on jquery script:

$('#input_11_183').append('Model1');

$('#input_11_183').append('Model2');

$('#input_11_183').append('Model3');

$('#input_11_183').append('Model4');

and all these data will be added to a select dropdown field

Here are my php codes:

<?php
function list_of_brandcars() {
    $model_option = $_POST['pass_data'];  

    $carposts = array(             
        'post_type' => 'list_of_cars',
        'post_status'    => 'publish',              
        's'     => $model_option
        );                  

    $att = new WP_Query($carposts);
    $count=0;
    if($att->have_posts()){
    
        while($att->have_posts()) : $att->the_post();                                
                while(have_rows('mods')) : the_row();                                                             
                    echo get_sub_field('model');                   
                endwhile;                  
        endwhile;

    }
    die(); 
}
add_action('wp_ajax_nopriv_list_of_brandcars', 'list_of_brandcars');
add_action('wp_ajax_list_of_brandcars', 'list_of_brandcars');
?>

and here is my jQuery script

<script>
$(document).ready(function($) { 
    
    $('#input_11_11').change(function(){
        var from_brand = $(this).val();
        
        $.ajax({
            type: 'POST',
            url: ajaxurl,   
            data: {     
                action: 'list_of_brandcars',                        
                pass_data: from_brand
            },
            success: function(data) {           
                $('#input_11_183').empty();
                for (var i = 0; i < data.length; i  ) {             
                    $('#input_11_183').append('<option value="'   data   '">'   data   '</option>');
                }
            }
        });
        die();
    });
});
</script>

CodePudding user response：

You're outputting raw strings, which just gets concatatenated together and becomes a single line of text in the response. You need to output some structured data in JSON format. To achieve that, first make an array, and then add each piece of text to the array.

Here's an example. I've added comments everywhere I've added or changed something in the code:

PHP

$att = new WP_Query($carposts);
$count=0;
$response = array(); //make empty array

if($att->have_posts()){
    while($att->have_posts()) : $att->the_post();                                
            while(have_rows('mods')) : the_row();                                                             
                $response[] = get_sub_field('model'); //add to the array
            endwhile;                  
    endwhile;
}

echo json_encode($response); //encode the array as JSON and output it
die();

JavaScript:

    $.ajax({
        type: 'POST',
        url: ajaxurl,
        dataType: "json", //tell jQuery to expect JSON in the response, and automatically parse it
        data: {     
            action: 'list_of_brandcars',                        
            pass_data: from_brand
        },
        success: function(data) {           
            $('#input_11_183').empty();
            for (var i = 0; i < data.length; i  ) {             
                $('#input_11_183').append('<option value="'   data[i]   '">'   data[i]   '</option>'); //access the correct element of (what is now) an array of strings.
            }
        }
    });