迭代通过JSON对象数组

Question

这个问题已被问及答复很多次，但我不能得到它的工作。我的问题看起来像这样one，这one和third example。

我想要做的是从JSON对象填充一个选项框，如this和this问题。他们都略有不同，但相似，但我无法实现它的工作。下面是从WebService我的代码：

<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}] 

这似乎确定。

如果我从msg中删除'd'。在警报结果是：

[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填充字符串中字符数量的选项框。我试图用'getJSON'从'msg'显式创建一个JSON对象。 （是不是'数据类型'的目的？）我不能使用命名对象，因为我没有，就像你可以在示例数据中看到的那样。我错过了什么？

一些如何我不能让代码看到数组有三个条目。

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将文本作为第一个参数，将值作为第二个参数。 select元素上的options列表有点像数组，但为了与旧版浏览器兼容，而不是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); 
     } 
    }); 
}