Итерация через массив объектов JSON

Question

Этот вопрос задавался и отвечал много раз, но я не могу заставить его работать. Мой вопрос выглядит так: one, и это one и third example.

Что я хотел бы сделать, это заполнить поле варианта с объекта JSON, например, в this и this вопросов. Они все немного разные, но похожие, но я не могу заставить его работать. Вот мой код из веб-сервиса:

<System.Web.Script.Services.ScriptService()> _ 
<WebService(Namespace:="http://tempuri.org/")> _ 
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _ 
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _ 
Public Class Service 
Inherits System.Web.Services.WebService 

<WebMethod()> _ 
<ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _ 
Public Function HelloWorld(ByVal p_productCategoryId As Integer) As String 
    Dim productCategory = ProductService.GetProductCategory(p_productCategoryId) 

    'Dim productList = ProductService.GetProducts(productCategory) 
    Dim productList = New List(Of Product) 
    For cnt = 1 To 3 
     Dim product = New Product(cnt) 
     product.Productname = cnt.ToString & "|" & cnt.ToString 
     productList.Add(product) 
    Next 

    Return productList.ToJSON 

End Function 

End Class 

<System.Runtime.CompilerServices.Extension()> _ 
Public Function ToJSON(Of T)(p_items As List(Of T)) As String 
    Dim jSearializer As System.Web.Script.Serialization.JavaScriptSerializer = New System.Web.Script.Serialization.JavaScriptSerializer() 
    Return jSearializer.Serialize(p_items) 
End Function 

Если я использую следующий код:

function Test() { 
    $.ajax({ 
    type: "POST", 
    url: "Service.asmx/HelloWorld", 
    data: "{'p_productCategoryId' : 1 }", 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    success:function(msg){ 
     alert(msg.d) 
     }, 
    error: function() { 
     alert("An error has occurred during processing your request."); 
         } 
    }); 

};

Я получаю этот результат:

[{"Id":1,"IsActive":false,"Category":null,"Productname":"1|1","Price":0}, 
{"Id":2,"IsActive":false,"Category":null,"Productname":"2|2","Price":0}, 
{"Id":3,"IsActive":false,"Category":null,"Productname":"3|3","Price":0}] 

который, кажется, в порядке.

Если я удалю 'd' из msg. В результате в боевой готовности является:

[object Object] 

код «работа в прогресс», чтобы заполнить поле параметра это (на данный момент :):

function Test() { 
$.ajax({ 
    type: "POST", 
    url: "Service.asmx/HelloWorld", 
    data: "{'p_productCategoryId' : 1 }", 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    success: function (msg) { 
     $("#prd_id").empty().append($("<option></option>").val("[-]").html("Please select")); 
     $.each(msg.d, function() { 
          $("#prd_id").append($("<option></option>").val(this['Id']).html(this['Productname'])); 
     }); 
    }, 
    error: function() { 
     alert("An error has occurred during processing your request."); 
    } 
}); 

};

Я попытался несколько способов заставить его работать с примерами, упомянутыми мной ранее, безрезультатно. Использование msg.d заполняется в поле опции с количеством символов в строке. Я попытался явно создать объект JSON из «msg» с помощью «getJSON». (Разве это не ват для типа данных?) Я не могу использовать именованные объекты, потому что у меня их нет, как вы можете видеть в образцах данных. Что мне не хватает?

Некоторые из того, как я не могу получить код, чтобы увидеть, что массив имеет три записи.

Answer 1

я бы, вероятно, использовать Option конструктор, а не HTML.

Предполагая msg.d действительно массив (что .d свойство является ASP.Net вещь):

success: function (msg) { 
    var options = $("#prd_id")[0].options; 
    options.length = 0; 
    options.add(new Option("Please select", "[-]")); 
    $.each(msg.d, function() { 
     options.add(new Option(this.Productname, this.Id)); 
    }); 
}, 

Live Example | Source

Конструктор Option принимает текст как первый аргумент и значение как второе. Список options на элементе select немного похож на массив, за исключением того, что для совместимости со старыми браузерами вместо push вы используете add (или назначаете options[options.length], либо работает).

Или, если msg является массив (не .d), просто удалите .d:

success: function (msg) { 
    var options = $("#prd_id")[0].options; 
    options.length = 0; 
    options.add(new Option("Please select", "[-]")); 
    $.each(msg, function() { 
     options.add(new Option(this.Productname, this.Id)); 
    }); 
}, 

Live Example | Source

Если ваш ответ не отправляется с правильным типом MIME, msg может быть фактически текстовым, а не массивом. Если да, то вы хотите, чтобы исправить это на сервере, возвращая правильный тип MIME (application/json), хотя вы можете разобрать его вручную:

msg = $.parseJSON(msg); 

... а затем использовать выше. Или, конечно, если он вернется в msg.d (хотя это кажется очень маловероятным):

msg.d = $.parseJSON(msg.d): 

Answer 2

Вы можете сделать это:

$.each(msg.d, function (key, value) { 
    $("#prd_id").append($("<option/>").val(value.Id).html(value.Productname)); 
}); 

Fiddle Demo

Answer 3

Я пытался повторить по Вашей проблеме с моим REST WCF, которая возвращает те же JSON данные, и ниже образец работал,

<script type="text/javascript"> 
$(document).ready(function() { 
}); 
var GetRawList = function() { 
    $.ajax({ 
     type: "GET", 
     url: "RestService/HelloWorld", 
     contentType: "application/json;charset=utf-8", 
     dataType: "json", 
     success: function(data) { 
    //Change this "data.d" According to your returned JSON output header. 
      var result = data.d; 
    $("#prd_id").empty().append($("<option></option>").val("[-]").html("Please select")); 
      $.each(result, function(key, value) { 
      $("#prd_id").append($("<option/>").val(value.Id).html(value.Productname)); 
      }); 
     }, 
     error: function(xhr) { 
      alert(xhr.responseText); 
     } 
    }); 
}