How to pass array from php to ajax success function?

Question

I am developing a web app. I am retrieving data from the database and storing it to an array using the $row = mysqli_fetch_array() . The problem is, that this array is supposed to go to ajax using echo json_encode($array) but I don't know how to receive it from ajax success function, by the way, I am using the jQuery.parseJSON() . After that, I am going to append the values from that array to an <option> element.

get_AssetModel.php:

$sqlGetAssetModels = "select * from tblbrands where brand_name like '$phpGetAssetModels'";
//$array = array();
$models = array();

if ($result = mysqli_query($cn, $sqlGetAssetModels)) {
    if (mysqli_num_rows($result) > 0) {
        $row = mysqli_fetch_array($result);
        $models[] = $row[3];
    }
} else {

}

echo json_encode($models);

javascript file who's gonna receive the array:

$.ajax({
        url: "inventory/get_AssetModel.php",
        type: "POST",
        data: chAssBrand,
        success: function(data, textStatus, jqXHR){
            var data = jQuery.parseJSON(data);
            var node = document.createElement("option");
            var textnode = document.createTextNode(data.0);
            node.appendChild(textnode);
            document.getElementById("txtInvModel").appendChild(node);
        },
        error: function(jqXHR, textStatus, errorThrown){
            swal("Error!", textStatus, "error");
        }
    });

OR IS THEIR OTHER WAY?

Answer 1

I assume your data may look like the below example:

 var data = ["Anthony", "Jhake", "Ravelo", "Antigro"]; data.forEach(function(value, index) { var option = document.createElement("option"); option.text = value; option.value = index; var select = document.getElementById("txtInvModel"); select.appendChild(option); }); 

 <select name="txtInvModel" id="txtInvModel"> <option value="">Select one</option> </select> 

Hope this will work for you.