Json用undefined填充下拉列表

Json用undefined填充我的Drop-down。

undefined undefined undefined etc 

我使用以下代码来填充我的Drop-Down;

 $("select[name$='product_type']").change(function(){ var url = "/all_json_models/" + $(this).val(); var product_type = $(this).val(); $.getJSON(url, function(products){ var options = 'Select a type'; for (var i = 0; i < products.length; i++) { options += '' + products[i].product_description + ''; } $("select#id_orderline_set-0-product").html(options); $("select#id_orderline_set-0-product option:first").attr('selected', 'selected'); $("select#id_orderline_set-0-product").attr('disabled', false); }); }) 

function（产品）的内容;

 [{ "fields": { "timestamp_created": "2014-09-30T20:20:06.912Z", "timestamp_updated": "2014-09-30T20:20:06.912Z", "product_price": "102", "product_type": 6, "product_description": "Roef 95X25X6" }, "model": "product.product", "pk": 9 }, { "fields": { "timestamp_created": "2014-10-23T19:27:37.570Z", "timestamp_updated": "2014-10-23T19:27:37.571Z", "product_price": "34", "product_type": 6, "product_description": "dfsfgsdfg" }, "model": "product.product", "pk": 20 }] 

我在这里缺少什么，所以Drop-Down使用pk和产品描述？

运行console.log(products[i]); 我在控制台中得到以下结果;

 [ ordercalculations.js:35 { ordercalculations.js:35 " ordercalculations.js:35 f ordercalculations.js:35 i ordercalculations.js:35 e ordercalculations.js:35 l ordercalculations.js:35 d ordercalculations.js:35 s ordercalculations.js:35 " ordercalculations.js:35 etc 

添加了我的views.py

 def all_json_models(request, id=None): if id: current_product_type = ProductType.objects.get(pk=id) else: current_product_type = ProductType() products = Product.objects.all().filter(product_type=current_product_type) products_serial = serializers.serialize("json", products) return HttpResponse( json.dumps(products_serial), content_type='application/json' ) 

Answer 1

试试这个

 $("select[name$='product_type']").change(function(){ var url = "/all_json_models/" + $(this).val(); var product_type = $(this).val(); $.getJSON(url, function(products){ products = $.parseJSON( products ); var options = 'Select a type'; for (var i = 0; i < products.length; i++) { options += '' + products[i].fields.product_description + ''; } $("select#id_orderline_set-0-product").html(options); $("select#id_orderline_set-0-product option:first").attr('selected', 'selected'); $("select#id_orderline_set-0-product").attr('disabled', false); }); }); 

Answer 2

除了products[i].fields.product_description ， products[i].fields.product_description在您的客户端代码中看不到任何明显的问题，以获取产品说明。

问题是您从服务器获取字符串，因此更新服务器以使用JSON对象而不是字符串进行回复。

如果不能，请使用$.parseJSON()从products字符串创建对象。

关于服务器代码：我不熟悉Python但是：您确定需要序列化products吗？ 是dumps()还是dump() ？ 尝试使用mimetype而不是content_type

Answer 3

问题是： products[i].product_description

从您返回的json ： product_description是对象“fields”中的子项。 您可以通过console.logging告诉它整个返回的JSON对象products

因此，您需要通过指定“fields”来访问该属性，如下所示：

products[i]["fields"].product_description

输出：

---

这是我的测试：

HTML：

JS：

  $(document).ready(function() { var product_type = $(this).val(); $.getJSON("./json/test.json", function(products){ var options = 'Select a type'; for (var i = 0; i < products.length; i++) { console.log(products); options += '' + products[i]["fields"].product_description + ''; } $("#test2").html(options); }); });