Returning JSON from PHP into Array

Question

I want to take the returning JSON object and display what the PHP query returned, but when I use brackets to access the indices value it displays only one character at a time. Basically I want each index to contain each row from the query. This particular query has two results (the id and file name). I would like to get both the id and name into one index of the JSON array. Output displayed below:

7 5.jpg
8 7-mini.jpg

Here is my code...

<script type="text/javascript">

  $(function(){
    $.ajax({                                      
      url: '<?php echo base_url().'jqueryDB/jquery';?>',   
      type:'POST',      
      dataType: 'json',    
      success: function(output_string){
                document.write(output_string[0]);
      }
    });

  }); 

Right now this display '7', instead of '7 5.jpg'. How can I get it to store each row into one index?

Here's my PHP file:

    $userID = $this->session->userdata('id');   
    $query = $this->db->query('SELECT * FROM upload WHERE userID = '.$userID);
    $num_rows = $query->num_rows();
    $val = $query->row_array();    

    $output_string = "";  

    foreach ($query->result() as $row){
        $output_string .= $row->id;
        $output_string .= " ".$row->name."<br />";
    }

    echo json_encode($output_string);

Answer 1

...
$output = array();
foreach ($query->result() as $row) {
  $output[] = $row->id . ' ' . $row->name;
}
echo json_encode($output);

Answer 2

First, you want to store the results of your query into an array, not a string. The results of calling json_encode will take that array and turn it into a JSON-encoded string.

$output_array = array();

foreach($query->result() as $row) {
    $output_array[] = array( 'id' => $row->id, 'name' => $row->name );
}

echo json_encode( $output_array );

Notice that the array you pass it can be arbitrarily deep. json_encode will structure the object based off of the structure of the array. I would also suggest looking at the resultant string in your browser to see what the JSON looks like when encoding multidimensional arrays like this.

In your javascript, you must parse the string to get it to be a useful JavaScript object...

success: function(output_string){
    var obj = JSON.parse( output_string );
    // This will iterate over all of the values in the return object
    for(var i in obj) {
        document.write(obj[i].name + '<br>' + obj[i].id);
    }
}

Feel free to structure your return object differently, I was just going off of what you laid out in your question.

jQuery also has facilities where, if you specify your MIME types correctly, the parameter to your success callback will automatically be parsed into a JSON object for you. For more information see the jQuery documentation