Json用undefined填充下拉列表

Question

Json用undefined填充我的Dropdown。

<option value="undefined">undefined</option>
<option value="undefined">undefined</option>
<option value="undefined">undefined</option>
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 = '<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
}]

我在这里缺少什么，所以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 = '<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是对象＆＃34;字段中的孩子。＆＃34;你可以通过console.logging告诉它整个返回的JSON对象products

因此，您需要通过指定＆＃34;字段＆＃34;来访问该属性：

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);
            });    
        });