Как работать с данными JSON после вызова функции AJAX в jQuery

Question

С этим кодом:

 $("#mybutton").click(function(){
           $.ajax({
                url: '/Member/GetPinPoints/@Model.Id',
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function(data) {
            alert(data);
            },
            error: function() {

            alert("error");
            }
            });


    return false;
});

Я получаю объект JSON, который выглядит следующим образом:

[{"Position":1,"Top":182,"Left":20,"Height":73,"Width":90},{"Position":2,"Top":69,"Left":103,"Height":98,"Width":1}]

Как я могу перебрать эти данные, скажем, хочу ли я предупреждать каждое отдельное значение?

Answer 1

Простой старый JavaScript:

for(var i = 0; i < data.length; i++){
    for(var key in data[i]){
        alert(key + " : " + data[i][key]);
    }
}

И jQuery:

$.each(data, function(index, element){
    $.each(element, function(key, value){
        alert(key + " : " + value);
    });
});

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

Answer 2

Предыдущие примеры будут работать, но они наивны. Ничего хорошего в коде не приведёт к циклу массива, который не очень надежен.

Давайте представим, что вы возвращаете пары ключ / значение в своем коде позади метода, и вы хотите иметь возможность выбирать эти данные для использования по своему усмотрению. Вы начинаете с этого.

[WebMethod]
    public static Dictionary<string, string> EditPromo(int promoId)
    {
        using (var db = new DataContext())
        {
            var q = db.Promos.Where(x => x.promoID == promoId).Select(x => x).Single();

            return new Dictionary<string, string>()
                       {
                           {"code", q.code},
                           {"label", q.label},
                           {"expiredate", string.Format("{0:M/d/yyyy}", q.expireDate)}
                       };
        }
    }

Теперь мы можем получить к нему доступ через jQuery Ajax, например:

$.ajax({
        url: "/Manager/mPromo/Promo.aspx/EditPromo",
        context: $("#editPromo"),
        data: "{promoId:'" + promoid + "'}",
        success: function (msg)
        {
            var resp = msg.d;
            $("h1:first", this).text("Edit " + resp.code);
            $("input#txtDate", this).val(resp.expiredate);
        }
    });

Обратите внимание, как я создал переменную для хранения msg.d, называемую респ. Затем я могу использовать resp.ReturnedDictionaryKey. Выше я использовал используемый код и истек срок действия. Я могу использовать их, как мне угодно.

Answer 3

Вы также можете передать его обратно в массив JavaScript , если это облегчает работу с ним.Хотя JavaScript-массивы не могут иметь ключи, объекты и массивы вместе могут заставить его вести себя как ассоциативный массив.

Answer 4

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

$("#mybutton").click(function(){
    $.ajax({
        url: '/Member/GetPinPoints/@Model.Id',
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function(data) {
            //asp.net 3.5 plus wraps the return into a .d property
            var msg = data.hasOwnProperty("d") ? data.d : data;
            for(var i=0; i < msg.length; i++){
              alert(msg[i].Position);  
            }
        },
        error: function() {

        alert("error");
        }
    });
    return false;
});