Load data from database + ajax + php

Question

I have a question about loading multiple fields from the database and use them in javascript.

This is my table "deaths" with fields:

- district
- year_1999
- year_2000
- year_2001
- year_2002
- year_2003
- year_2004
- year_2005
- year_2006
- year_2007
- year_2008
- year_2009

Now I want to load the fields year_.... when district = 'districtname'

This is what I have: (PHP)

$host = "localhost";
  $user = "root";
  $pass = "root";

  $databaseName = "testdatabase";
  $tableName = "deaths";

  //--------------------------------------------------------------------------
  // 1) Connect to mysql database
  //--------------------------------------------------------------------------

  $con = mysql_connect($host,$user,$pass);
  $dbs = mysql_select_db($databaseName, $con);

  //--------------------------------------------------------------------------
  // 2) Query database for data
  //--------------------------------------------------------------------------
  $result = mysql_query("SELECT year_1999,year_2000,year_2001,year_2002,year_2003,year_2004,year_2005,year_2006,year_2007,year_2008,year_2009 FROM $tableName WHERE district = 'Binnenstad'");          //query

  $data = array();
  while ( $row = mysql_fetch_row($result) )
  {
    $data[] = $row;
  }
  echo json_encode( $data );

Javascript:

$(function () 
  {
    //-----------------------------------------------------------------------
    // 2) Send a http request with AJAX http://api.jquery.com/jQuery.ajax/
    //-----------------------------------------------------------------------
    $.ajax({                                      
      url: './api4.php',                  //the script to call to get data          
      data: "",                        //you can insert url argumnets here to pass to api.php
                                       //for example "id=5&parent=6"
      dataType: 'json',                //data format      
      success: function(rows)          //on recieve of reply
      {
        //--------------------------------------------------------------------
        // 3) Update html content
        //--------------------------------------------------------------------

        for (var i in rows)
        {
          var row = rows[i];          

          var data = row[0];

          $('#districts ul').append("<li>" + data + "</li>")
                  .append();
        } 
      } 
    });
  }); 

But this only shows the first column data (year_1999).

How can I fix this?

Answer 1

Instead for (var i in rows) ... try :

UPDATE. Looking your php closer try something like this to draw each year:

$.each(rows, function(i, data) {
    $.each(data, function(j, year) {
        $('#districts ul').append("<li>" + year + "</li>")

    });
});