Populating different select boxes with different json data

Question

I have 3 different selectboxes. Second and third select boxes will be populated depending on first select boxes' value via ajax + php . But the response is not as i expected. It the shows error function. When i check it from the console there is no promlem with reading data from database as json format. But i'am unable to show these data as html to the screen. Here is my try:

HTML:

<table>
    <tr>
        <td valign="middle" align="center">
            <label id="fieldOfBusinessLabel" for="fieldOfBusinessText">Field of Business</label>
        </td>
        <td valign="middle" align="center">
            <select id="fieldOfBusinessSelectBox" class="selectBox" name="fieldOfBusinessSelectBox">
                <option value="">--select--</option>
                <?php
                    $result=mysqli_query($db,'SELECT * FROM field_of_business'); 
                    while($row=mysqli_fetch_assoc($result)) { 
                        echo '<option value="'.$row["FobID"].'">'.$row['FobName'].'</option>';
                    }                                                                    
                ?>
            </select>
        </td>
    </tr>
    <tr>
        <td valign="middle" align="center">
            <label id="typeOfProductionLabel" for="typeOfProductionText">Type of Production/Service</label>
        </td>
        <td valign="middle" align="center">
            <select id="typeOfProductionSelectBox" clas="selectBox" name="typeOfProductionSelectBox">
                <option value="">--select--</option>
            </select>
        </td>
    </tr>
    <tr>
        <td valign="middle" align="center">
            <label id="mainProductsLabel" for="mainProductsText">Main Products/Services</label>
        </td>
        <td valign="middle" align="center">
            <select id="mainProductSelectBox" clas="selectBox" name="mainProductSelectBox">
                <option value="">--select--</option>
            </select>
        </td>
    </tr>
</table>

JS:

$(document).ready(function(){
    $("#fieldOfBusinessSelectBox").change(function(){
        var value = $("select#fieldOfBusinessSelectBox option:selected").val();
        $.ajax({
            type: 'POST',
            url: 'listData.php',
            dataType: "json",
            data:{fobID:value},
            success:function(answer){
                var data1 = "<option>--select--</option>";
                var data2 = "<option>--select--</option>";
                $.each(answer, function(i, answer){
                    data1 += "<option>"+answer.TopsName+"</option>";
                });
                $.each(answer, function(i, answer){
                    data2 += "<option>"+answer.MpsName+"</option>";
                });
                $('#typeOfProductionSelectBox').html(data1);
                $('#mainProductSelectBox').html(data2);
            },
            error:function(){
                alert("An error has occured !");
            }         
        });
    });
});

PHP:

<?php

    include './config.php';

    if(strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest'){
        die('Wrong request !');
    }
    $fobID = mysqli_real_escape_string($db,$_POST['fobID']);     

    if(isset($_POST['fobID'])){
        $stmt1 = $db->prepare("SELECT TopsName FROM type_of_production_service WHERE FobID = ?");

        if($stmt1 == "false"){
            die('Query error !'.$db->error);  
        }
        $stmt1->bind_param('i', $fobID);
        $stmt1->execute();
        $result = $stmt1 -> get_result();
        $topsName = $result ->fetch_all(MYSQLI_BOTH);

        echo json_encode($topsName);

        $stmt2 = $db->prepare("SELECT MpsName FROM main_products_services WHERE FobID = ?");

        if($stmt2 == "false"){
            die('Query error !'.$db->error);  
        }
        $stmt2->bind_param('i', $fobID);
        $stmt2->execute();
        $result2 = $stmt2 -> get_result();
        $mpsName = $result2 ->fetch_all(MYSQLI_BOTH);

        echo json_encode($mpsName);
    }

    $db->close();

Answer 1

You have 2 json_encoded strings in result and it not decoded. User one json object:
PHP:

echo json_encode(array('mps' => $mpsName, 'tops' => $topsName));

JS:

answer = $.parseJSON(answer);
$.each(answer.tops, function(k,v){...});
$.each(answer.mps, function(k,v){...});