Получить данные из массива JSON в JQuery

Question

Здравствуйте, пожалуйста, у меня возникли проблемы получения данных из следующего массива, который был возвращен через AJAX:

Array 
(
    [routes] => Array 
     (
      [0] => Array 
       (
        [route_id] => 4 
        [company_id] => 2 
        [from] => Soye 
        [to] => Martelange 
        [fare] => 98 
        [is_active] => 
       ) 

      [1] => Array 
       (
        [route_id] => 9 
        [company_id] => 2 
        [from] => Auckland 
        [to] => Stevoort 
        [fare] => 65 
        [is_active] => 
       ) 

      [2] => Array 
       (
        [route_id] => 11 
        [company_id] => 2 
        [from] => Bowden 
        [to] => Kessel 
        [fare] => 60 
        [is_active] => 
       ) 

      [3] => Array 
       (
        [route_id] => 17 
        [company_id] => 2 
        [from] => Berg 
        [to] => Clearwater Municipal District 
        [fare] => 97 
        [is_active] => 
       ) 

      [4] => Array 
       (
        [route_id] => 24 
        [company_id] => 2 
        [from] => Martelange 
        [to] => Soye 
        [fare] => 98 
        [is_active] => 
       ) 

      [5] => Array 
       (
        [route_id] => 29 
        [company_id] => 2 
        [from] => Stevoort 
        [to] => Auckland 
        [fare] => 65 
        [is_active] => 
       ) 

      [6] => Array 
       (
        [route_id] => 31 
        [company_id] => 2 
        [from] => Kessel 
        [to] => Bowden 
        [fare] => 60 
        [is_active] => 
       ) 

      [7] => Array 
       (
        [route_id] => 37 
        [company_id] => 2 
        [from] => Clearwater Municipal District 
        [to] => Berg 
        [fare] => 97 
        [is_active] => 
       ) 

     ) 

) 

Это мой JavaScript:

var data = {id:id}; //Array 

     $.ajax({ 
      url : url+"ticketinfo/routes", 
      type: "POST", 
      data : data, 
      success: function(data, textStatus, jqXHR) 
      { 
       var jsonArray = data.routes; 
       var options = $("#options"); 
       $.each(jsonArray , function(index, data) { 
        //adds all this values fron the array ,only from and to 

        options.append($("<option/>").text(data.from + "/" + data.from)); 
       }); 
      }, 
      error: function (jqXHR, textStatus, errorThrown) 
      { 

      } 
     }); 

И проблема, я имею в виду, я не знаю, как, я попробовал несколько примеров здесь, но никто не работал для меня. То, что я хочу сделать точно, - это получить эти два поля в массиве: от и до и использовать эти данные для динамического заполнения двух элементов управления выбором динамически с помощью jquery. Я был бы очень признателен, если бы кто-то мог помочь мне в этом. Заранее спасибо. :)

Answer 1

Так я бы это сделал, попробовали ли вы следующий метод, чтобы проверить вывод на консоль в качестве результата теста?

var routes = data.routes 
for(var i = 0; i < routes.length; i++){ 
    console.log(routes[i].to); 
    console.log(routes[i].from); 
} 

Answer 2

Попробуйте это:

var selectData1 = ""; 
var selectData2 = ""; 
routes.each(function(index,options) 
{ 
    selectData1 += '<option>' + $(this)[0].from + '</option>'; 
    selectData2 += '<option>' + $(this)[0].to + '</option>'; 

}); 

    $("#select1ID").html(selectData1); 
    $("#select2ID").html(selectData2); 

Я не пробовал так делать ожидать некоторые ошибки синтаксиса, но это должен делать эту работу вам нужно.

Answer 3

Так что, видимо, все это связано с кодировкой и расшифровкой массива json. Причина, по которой ответ Csdtestings не работает, заключается в том, что массив, который он использовал в своем примере, не был json-кодированным массивом объектов, о котором я думаю. В любом случае я попытался использовать json.parse в возвращенном массиве, который избавился от ошибки, но затем у меня возникла еще одна проблема, которая представляет собой элементы массива, которые все появились как «[object] [object]». Итак, мне показалось, что это может иметь какое-то отношение к типу массива, который был закодирован. Так что я вернулся в мой PHP и изменил это:

$data = $this->route->get_routes_by_company($company_id); //using codeigniter framework 
echo json_encode($data); 

Для этого:

$data = $this->route->get_routes_by_company($company_id); //using codeigniter framework 
foreach ($data as $row) 
{ 
    $result = array($row['from'], $row['to']); 
} 
echo json_encode($result); 

, после чего я просто изменил мою JavaScript для этого и вуаля он работал:

$.ajax({ 

    type: "POST", 
    url: url+"ticketinfo/routes", 
    data: { 
     'id' : id 
    }, 
    dataType: "json", 
    success: function (response) { 
     if (response.length > 0) 
     { 
      $.each(response, function(index, element) { 
       $('#From').append("<option value='" + element[0] + "'>" + element[0] + "</option>"); 
       $('#To').append("<option value='" + element[1] + "'>" + element[1] + "</option>");   
      }); 
     } 
    } 

});