Создать объект javascript после запроса к базе данных jquery / AJAX

Question

Привет, это пример кода, который я хочу выполнить:

        $('#search1').submit(function(){
    var date = $('#date').val();
    var location = $('#location').val();
    var datastring = 'date=' + date + '&location=' + location;
    $.ajax({
        type: "POST",
        cache: "true",
        url: "search.php",
        dataType:"json",
        data: datastring,
        success: function(data){
            $('#main').html('')
            for ($i = 0, $j = data.bus.length; $i < $j; $i++) {

                //Create an object for each successful query result that holds information such as departure time, location, seats open...

                   $('#main').append(html);

            }

Как бы я занялся кодированием функции успеха?Я хочу, чтобы объект сохранял информацию о каждой шине, чтобы информация могла отображаться в результатах поиска, а также чтобы на нее можно было ссылаться, когда пользователь позже подтвердит свой RSVP.Спасибо заранее

Answer 1

Вы можете объявить объект для использования в качестве карты в содержащей области:

var busInfo = {};

... и затем, если записи на автобусе имеют форму уникального идентификатора, вы можете записать их следующим образом:

success: function(data){
    var $i, $j, bus;

    $('#main').html('')
    for ($i = 0, $j = data.bus.length; $i < $j; $i++) {
        // Remember this bus by ID
        bus = data.bus[$i];
        busInfo[bus.id] = bus;

        $('#main').append(html);
    }
}

А потом, когда пользователь выбирает шину, используйте выбранный идентификатор, чтобы получить полную информацию о шине:

var bus = busInfo[theChosenId];

Это работает, потому что все объекты JavaScript являются картами ключ / значение. Ключи всегда являются строками, но интерпретатор с удовольствием создаст строки из того, что вы ему даете (например, busInfo[42] = ... будет работать, 42 станет "42" неявно).

Если вы просто хотите массив, ваш data.bus уже равен единице, верно?

var busInfo = [];

// ....

success: function(data){
    var $i, $j;

    // Remember it
    busInfo = data.bus;

    $('#main').html('')
    for ($i = 0, $j = data.bus.length; $i < $j; $i++) {

        $('#main').append(html);
    }
}

(Обратите внимание, что массивы JavaScript на самом деле не являются массивами , они также являются картами имя / значение.)

---

Обновление : я набросал быстрый пример объекта с ключом ( живая копия ):

HTML:

<input type='button' id='btnLoad' value='Load Buses'>
<br>...and then click a bus below:
<ul id="busList"></ul>
...to see details here:
<table style="border: 1px solid #aaa;">
  <tbody>
    <tr>
      <th>ID:</th>
      <td id="busId">--</td>
    </tr>
    <tr>
      <th>Name:</th>
      <td id="busName">--</td>
    </tr>
    <tr>
      <th>Route:</th>
      <td id="busRoute">--</td>
    </tr>
  </tbody>
</table>

JavaScript с jQuery:

jQuery(function($) {
  // Our bus information -- note that it's within a function,
  // not at global scope. Global scope is *way* too crowded.
  var busInfo = {};

  // Load the buses on click
  $("#btnLoad").click(function() {
    $.ajax({
      url: "http://jsbin.com/ulawem",
      dataType: "json",
      success: function(data) {
        var busList = $("#busList");

        // Clear old bus info
        busInfo = {};

        // Show and remember the buses
        if (!data.buses) {
          display("Invalid bus information received");
        }
        else {
          $.each(data.buses, function(index, bus) {
            // Remember this bus
            busInfo[bus.id] = bus;

            // Show it
            $("<li class='businfo'>")
              .text(bus.name)
              .attr("data-id", bus.id)
              .appendTo(busList);
          });
        }
      },
      error: function() {
        display("Error loading bus information");
      }
    });
  });

  // When the user clicks a bus in the list, show its deatils
  $("#busList").delegate(".businfo", "click", function() {
    var id = $(this).attr("data-id"),
        bus = id ? busInfo[id] : null;
    if (id) {
      if (bus) {
        $("#busId").text(bus.id);
        $("#busName").text(bus.name);
        $("#busRoute").text(bus.route);
      }
      else {
        $("#busId, #busName, #busRoute").text("--");
      }
    }
  });

});

Данные:

{"buses": [
    {"id": 42, "name": "Number 42", "route": "Highgate to Wycombe"},
    {"id": 67, "name": "Old Coach Express", "route": "There and Back"}
]}

---

Не по теме : обратите внимание, что я добавил var $i, $j; к вашей функции успеха. Без этого вы становитесь жертвой Ужаса неявных глобалов , который вы можете сказать по названию - Плохая вещь ^(тм) .