Json用未定义填充下拉列表

Question

Json 用 undefined 填充我的下拉列表。

<option value="undefined">undefined</option>
<option value="undefined">undefined</option>
<option value="undefined">undefined</option>
etc

我使用以下代码来填写我的下拉菜单；

$("select[name$='product_type']").change(function(){
    var url = "/all_json_models/" + $(this).val();
    var product_type = $(this).val();
    $.getJSON(url, function(products){
        var options = '<option value="Z">Select a type</option>';
        for (var i = 0; i < products.length; i++) {
            options += '<option value="' + products[i].pk + '">' + products[i].product_description + '</option>';
        }
        $("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);
    });    
})

功能（产品）的内容；

[{
    "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
}]

我在这里遗漏了什么，所以下拉菜单使用 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 = '<option value="Z">Select a type</option>';
        for (var i = 0; i < products.length; i++) {
            options += '<option value="' + products[i].fields.pk + '">' + products[i].fields.product_description + '</option>';
        }
        $("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 来获取产品描述之外，我在您的客户端代码中看不到任何明显的问题。

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

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

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

Answer 3

问题是：products[i].product_description

从您返回的json：product_description 是对象“字段”中的一个子对象。你可以通过 console.logging 整个返回的 JSON 对象 products 来判断这一点

因此您需要通过指定“字段”来访问该属性，例如：

products[i]["fields"].product_description

输出：

---

这是我的测试：

HTML：

  <div id="test"></div>
    <select id="test2">

    </select>

JS：

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