Простой скрипт Ajax Jquery - Как я могу получить информацию для каждой строки в таблице?

Я следую простому примеру ajax> php> mysql, размещенному здесь http://openenergymonitor.org/emon/node/107

Я могу отображать информацию только из первой строки. { {1}} Моя таблица устроена так

--------------
|  id  | name|
--------------
| 1    | Pat |
| 2    | Joe |
| 3    | Rob |
--------------

PHP-код

 $result = mysql_query("SELECT * FROM $tableName");          //query
 $array = mysql_fetch_row($result);                          //fetch result  
 echo json_encode($array);

Скрипт

$(function () 
  {
    $.ajax({                                      
      url: 'api.php', data: "", dataType: 'json',  success: function(data)        
      { 
        var id = data[0];              //get id
        var vname = data[1];           //get name
         $('#output').html("id: "+id+" name: "+vname); 
      } 
    });
  }); 

ROW 1

Если я поставлю var id = data [0]; , я получу значение 1. Если я поставлю var name = data [1]; , я получу Pat.

ROWS 2 n 3 не определены

Пример var id = data [2]; возвращает undefined и т. Д.

Мои вопросы

1. Почему я получаю только значения из первой строки?

2. Как я могу получить информацию для строк, кроме первой?

Из других вопросов по Stackoverflow я вижу, что мне, вероятно, придется использовать цикл while, но я не совсем уверен, почему или как.