foreach function in JSON returning only one row

Question

I'm trying to display more than one row from JSON response, but somehow it is returning only one row each time. Query working well on the server. Code works well if i use it without ajax/json. I'm having headache with this. what am I doing wrong here? Any help would be appreciated.

HTML

         <form>
              <span id="span_section_row"></span>
                    <hr>
                    <div class="row">
                        <div class="form-group col-lg-6">
                            <label for="exam_date">Select Date of Exam</label>
                            <input type="text" class="form-control" id="exam_date" required readonly>
                        </div>
                        <div class="form-group col-lg-6">
                            <label for="exam_time">Enter Exam Time(In Minutes)</label>
                            <input type="number" class="form-control" id="exam_time" required>
                        </div>
                    </div>
                </form>

AJAX call:

$(document).on('click', '.schedule', function(){
        var exam_id = $(this).attr("id");
        var btn_action = 'fetch_single';
        $.ajax({
            url:'web-services/schedule-exam.php',
            method:"POST",
            data:{exam_id:exam_id, btn_action:btn_action},
            dataType:"json",
            success:function(data)
            {
                $('#setup_exam_modal').modal('show');
                $('#span_section_row').html(data.section_row);
            }
        })
    });

PHP:

if($_POST['btn_action'] == 'fetch_single')
    {
        $exam_type_id = $_POST['exam_id'];
        $query = "
        SELECT a.*, b.exam_type_name 
                        FROM exam_section a
                        INNER JOIN exam_type b 
                        ON a.exam_type_id=b.exam_type_id
                         WHERE a.status = :status
                         AND a.exam_type_id = :exam_type_id
        ";
        $statement = $conn->prepare($query);
        $statement->execute(
            array(
                ':status'    =>    'active',
                ':exam_type_id'    =>    $exam_type_id

            )
        );
        $result = $statement->fetchAll();
        foreach($result as $row)
        {
            $output['section_id'] = $row['section_id'];
            $output['exam_type_id'] = $row['exam_type_id'];
            $output['section_name'] = $row['section_name'];
            $output['exam_type_name'] = $row['exam_type_name'];

            $output['section_row'] = 
                                '<div class="row">
                                <div class="form-group col-lg-4">
                                    <label for="select_section"></label>
                                    <p id="select_section">'.$row['section_name'].'</p>
                                </div>
                                <div class="form-group col-lg-4">
                                    <label for="no_of_questions">No. of Questions</label>
                                    <input type="number" class="form-control" id="no_of_questions" required>
                                </div>
                                <div class="form-group col-lg-4">
                                    <label for="mark_per_question">Mark Per Question</label>
                                    <input type="number" class="form-control" id="mark_per_question" required>
                                </div>
                            </div>
                            ';
        }
        echo json_encode($output);
    } 

Answer 1

First in the PHP you are overwriting the array each time round the loop so there would only ever have been one occurance passed back to the javascript to process

if($_POST['btn_action'] == 'fetch_single') {
    $exam_type_id = $_POST['exam_id'];
    $query = "SELECT a.*, b.exam_type_name 
              FROM exam_section a
                INNER JOIN exam_type b ON a.exam_type_id=b.exam_type_id
              WHERE a.status = :status
              AND a.exam_type_id = :exam_type_id";

    $statement = $conn->prepare($query);
    $statement->execute(
            array(  ':status' => 'active', 
                    ':exam_type_id' => $exam_type_id)
                );
    $result = $statement->fetchAll();

    foreach($result as $row) {
        $htm = '<div class="row">
                    <div class="form-group col-lg-4">
                        <label for="select_section"></label>
                        <p id="select_section">'.$row['section_name'].'
                        </p>
                    </div>
                    <div class="form-group col-lg-4">
                        <label for="no_of_questions">No. of Questions</label>
                        <input type="number" class="form-control" id="no_of_questions" required>
                    </div>
                    <div class="form-group col-lg-4">
                        <label for="mark_per_question">Mark Per Question</label>
                        <input type="number" class="form-control" id="mark_per_question" required>
                    </div>
                </div>';

        $output[] = [
                    'section_id'        => $row['section_id'],
                    'exam_type_id'      => $row['exam_type_id'],
                    'section_name'      => $row['section_name'],
                    'exam_type_name'    => $row['exam_type_name'],
                    'section_row'       => $htm
                    ];
    }
    echo json_encode($output);
} 

So now in the javascript you will need to process that array as RASHAN suggested

$(document).on('click', '.schedule', function(){
    var exam_id = $(this).attr("id");
    var btn_action = 'fetch_single';
    $.ajax({
        url:'web-services/schedule-exam.php',
        method:"POST",
        data:{exam_id:exam_id, btn_action:btn_action},
        dataType:"json",
        success:function(data)
        {
            $('#setup_exam_modal').modal('show');
            //$('#span_section_row').html(data.section_row);
            var t="";
            $.each(data,function(index,value){
               // concatenate all the occurances of the html and place on page
                t += value.section_row;
            })
            $('#span_section_row').html(t);
        }
    })
});

Now you have one remaining problem that I can see and that is you are generating multiple HTML element all with the same id like here,

<p id="select_section">'.$row['section_name'].'

in multiple sections of your HTML. As I am not familiar with whats going on elsewhere in the code, possibly you dont need these id's at all and can remove them. Or you will have to make them unique on the page, or amend your javascript to select those elements some other way

Answer 2

From your controller you are returning data as array, you need to iterate over your response as

var append="";
$.each(data,function(i,v){
    append += v.section_row;
})
$('#span_section_row').html(append);