Блог

Главная - Вопросы по программированию - Как получить все значения json при успешном выполнении ajax?

Как получить все значения json при успешном выполнении ajax?

#jquery #ajax #arrays #json

#jquery #ajax #массивы #json

Вопрос:

У меня есть пример результата json:

 {"Products": [{"ProductIndex": "1", "ProductCode": "116001", "ProductPrice": "$517.00"},{"ProductIndex": "2", "ProductCode": "37732", "ProductPrice": "$288.00"}],"Totals": [{"CartTotal": "$805.00", "Quantity": "2", "DiscountTotal": "0", "LastProduct": "0"}]}

У меня есть этот jQuery:

      jQuery(function(){
        jQuery.ajax({
           url: '/AjaxCart.asp',
           cache: false,
           dataType: 'text',
           success: function(data) {
              var json = eval('('   data   ')');
              var quantity;
              var cartTotal;
              var screenId;
              quantity = json.Totals[0].Quantity;
              cartTotal = json.Totals[0].CartTotal;
              screenId = json.Products[0].ProductCode;
              $("#content_area").prepend(screenId);
              },
           error: function() {
              return false;
           }
        });
     });

Это работает, но screenid извлекает только первое значение ProductCode. Мне нужно, чтобы он перебирал весь результат и отображал оба значения ProductCode. Я попытался поместить .каждая функция использует разные вещи, но безрезультатно. Любая помощь?

Я думаю, что я близок к этому, но он все еще не работает:

 pIndex = json.Products[0];
for(var i = pIndex.length; i--;) {
screenItem = pIndex[i];
$("#content_area.").prepend(screenItem.ProductCode)

Ответ №1:

Я думаю, вам просто нужно перейти pIndex = json.Products[0]; на pIndex = json.Products; , в тот момент, когда вы пытаетесь перебрать один объект, первый элемент Products массива.

 pIndex = json.Products;
for(var i = 0; i < pIndex.length; i  ) {
  screenItem = pIndex[i];

  var $span = $('<span />').text(screenItem.ProductCode);
  $("#content_area.").append($span);
}

Комментарии:

1. На самом деле, вы можете помочь немного больше? Результат таков: 11600137732 Как я могу включить возможность оформления каждого результата с помощью CSS на этом этапе?

2. Конечно, я обновил приведенный выше код, чтобы каждый элемент был заключен в <span> тег, очевидно, вы можете изменить это, чтобы использовать любой тег, который вам нравится.

Ответ №2:

Если вы всегда возвращаете json из своего ajax-вызова, было бы лучше установить для вашего свойства ajax DataType значение «json», чтобы вам не нужно было самостоятельно анализировать текст (с помощью метода eval или метода parseJSON). Кроме того, jQuery.каждая функция предпочтительнее стандартного цикла javascript for.

Я бы написал ваш код следующим образом:

 jQuery(function(){
    jQuery.ajax({
       url: '/AjaxCart.asp',
       cache: false,
       dataType: 'json',
       success: function(data) {
          jQuery.each(data.Products, function(index, element) {
             $("#content_area").prepend(element.ProductCode);
          });
       },
       error: function() {
          return false;
       }
    });
 });