Доступ к массиву json в методе ajax дает неопределенный вывод.Попытка получить доступ к объекту ответа в ajax

Question

В моем сервлете я заполняю список Продуктов, выбранных пользователем для сравнения, и преобразую его в JSON. Данные продукта состоят из кода продукта, имени, цены, полного изображения, эскиза и т. Д. Это некоторые из атрибутов

    List<ProductData> comparedProducts=getProductPanelDetails(prodCodeList);
    json=new Gson().toJson(comparedProducts);
    System.out.println(json);
    response.setContentType("application/json");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(json);

Моя строка JSON, напечатанная из сервлета, выглядит так, как показано ниже

[
  {
    "productID": "P0001",
    "productName": "Nexus 5",
    "price": "INR 25,000",
    "image": "images/nexus5.jpg",
    "thumbnail": "images/thumbnail_nexus5.jpg"
  },
  {
    "productID": "P0002",
    "productName": "Nexus 6",
    "price": "INR 45,000",
    "image": "images/nexus6.jpg",
    "thumbnail": "images/thumbnail-nexus6.jpg"
  }
]    

Я не уверен, как мне это прочитать в моей функции ajax.Я хочу динамически создать панель и добавить в нее эти продукты.Эта функция выполняется всякий раз, когда пользователь нажимает флажок «Добавить для сравнения» со страницы jsp

 $.ajax({
           type: 'POST',
           url: 'productSelected',
           contentType: 'application/x-www-form-urlencoded; charset=UTF-8;',
           data: {productCode:productCode,check:check},
           dataType:'json',
           cache: false,
           success: function (response) {
               for(i in response)
            { 
             alert(i.productID);
             alert(i.productName);
            };// This gives undefined as output
               alert("Record Has been Saved in Database");
           }
         });

Здесь код продукта - это идентификатор продукта, выбранный пользователем, и проверка указывает, установил ли пользователь флажок или снял флажок.Это логическая переменная.Можете ли вы помочь мне получить доступ к ProductDataList в моей функции AJAX.Я не уверен, как получить вывод JSON в AJAX для отображения его на переднем конце.Я попробовал цикл for с объектом ответа, но он не сработал. Однако, если я попробую response [0] .productName, тогда он даст мне название продукта.Но я не уверен, как мне получить все значения в списке данных продукта

Answer 1

Это дает неопределенное значение в качестве вывода

 for(i in response)

Здесь i - это индекс / смещение массива, а не сам объект, используйте response[i] вместо, т.е. response[i].productID ии так далее.

var response = [{
    "productID": "P0001",
    "productName": "Nexus 5",
    "price": "INR 25,000",
    "image": "images/nexus5.jpg",
    "thumbnail": "images/thumbnail_nexus5.jpg"
  },
  {
    "productID": "P0002",
    "productName": "Nexus 6",
    "price": "INR 45,000",
    "image": "images/nexus6.jpg",
    "thumbnail": "images/thumbnail-nexus6.jpg"
  }
];

for (var i in response) {
  console.log('i=', i, ', product id=', response[i].productID);
}

Вы можете использовать Array # forEach, например:

var response = [{
    "productID": "P0001",
    "productName": "Nexus 5",
    "price": "INR 25,000",
    "image": "images/nexus5.jpg",
    "thumbnail": "images/thumbnail_nexus5.jpg"
  },
  {
    "productID": "P0002",
    "productName": "Nexus 6",
    "price": "INR 45,000",
    "image": "images/nexus6.jpg",
    "thumbnail": "images/thumbnail-nexus6.jpg"
  }
];

response.forEach(function(o) {
  console.log('product id=', o.productID);
});

Answer 2

Вы можете просто написать свой контроллер следующим образом

@Controller
@RequestMapping("/compare")
public class CompareController extends AbstractController
{
    @Autowired
    private ProductFacade productFacade;

    @RequestMapping(value = "/products", method ={RequestMethod.GET}, produces = "application/json")
    @ResponseBody
    public List<ProductData> productCompare(@RequestParam("productCodes") final String[] productCodes)
    {
        final List<ProductOption> options = new ArrayList<>(Arrays.asList(ProductOption.BASIC, ProductOption.PRICE));
        final List<ProductData> productList = new ArrayList<ProductData>();
        for (final String code : productCodes)
        {
            productList.add(productFacade.getProductForCodeAndOptions(code, options));
        }
        return productList;
    }
}

Теперь проверьте, получаете ли вы правильный ответ?

alert(JSON.stringify(response));

Если вы получаете ответправильно, то вы можете перебрать ответ JSON.

Как:

$.ajax({
    type: "GET",
    url: url+"?"+prodCodeList,
    contentType: "application/json",
    success: function (response) {
        alert(JSON.stringify(response));
        response.forEach(function(product)
        {
              alert(product.productID);
        });
    }
});