解析JSON以進行預輸入的問題

Question

我是使用typeahead插件的新手，我的javascript（不是jquery）技能太糟糕了。 這是我的JSON：

{"Product":[
    {"@ProductCode":"C1010","@CategoryName":"Clips"},       
    {"@ProductCode":"C1012","@CategoryName":"Clips"},
    {"@ProductCode":"C1013","@CategoryName":"Clips"},
    {"@ProductCode":"C1014","@CategoryName":"Clips"},
    {"@ProductCode":"C1015","@CategoryName":"Clips", "EAN":"0987654321"}
]}

我有預付捆綁包0.10.5，這是我的js：

$(document).ready(function () {
    var products = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        limit: 100,
        remote: {
            url: 'TypeAhead.ashx?q=%QUERY&cat=prod',
            filter: function (data) {
                return data.Products;
            }
        }
    });

    products.initialize();

    $("#tbSSearch").typeahead({
        highlight: true,
        minLength: 2
    }, {
        source: products.ttAdapter(),
        displayKey: function (products) {
            return products.product.code;
        },
        templates: {
            header:"<h3>Products</h3>"
        }
    });
});

Chrome控制台為我提供：

未捕獲的TypeError：無法讀取未定義的屬性“ length”

但這是在我的jquery.2.1（最小化）庫中，而不是上面的js源代碼中。 瀏覽器在#tbSearch輸入下方#tbSearch顯示任何彈出#tbSearch 。

正如@Mike所建議的，jsfiddle http://jsfiddle.net/gw0sfptd/1/，但是我不得不修改一些東西才能使用本地json。 而且這也不起作用大聲笑

按照David的建議進行編輯 ，我應該清理我的json。 現在是這樣：

[{"Code":"C1010","Gtin13":0,"CategoryName":"Clips"},
 {"Code":"C1012","Gtin13":0,"CategoryName":"Clips"},
 {"Code":"C1013","Gtin13":0,"CategoryName":"Clips"}]

和js：

remote: {
    url: 'TypeAhead.ashx?q=%QUERY&cat=prod',
    filter: function (products) {
        return $.map(products.results, function (product) {
            return {
                value: product.Code
            };
        });
    }
}
datumTokenizer: function (datum) {
    return Bloodhound.tokenizers.whitespace(datum.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,

但是在firefox控制台中沒有預先輸入，也沒有（可用）錯誤。 我想要的輸出將是產品代碼的列表，還包括它們所在的類別和gtin13（如果不為null），因為sql搜索所有這三個選項。 我應該在客戶端為產品制作一個javascript“類”並將json解析為它嗎？ 我仍然不清楚整個獵犬的運作方式。 （是的，我已經查看了樣本並閱讀了typeahead和bloodhound的文檔）我不知道是否有可能，但是我的最終願望是，當您從typeahead建議中選擇一個項目時，此productdatasource鏈接到productdetail .aspx，如果您選擇categorydatasource的一項（在此問題中不可見），則它將頁面重定向到categorydetail.aspx

Answer 1

我已經寫了一個小提琴來演示如何在typeahead.js中使用JSON（本地示例，而不是遠程示例）：

http://jsfiddle.net/Fresh/f9rbeqyc/

在以下答案中，我選擇使用ProductCode作為建議，但是如果需要，您顯然可以使用CategoryName。

我使用的代碼的關鍵部分以及一些注釋在此處：

var json = '{"Product":[ ' +
 '{"@ProductCode\":\"C1010\",\"@CategoryName\":\"Clips\"},' +
 '{"@ProductCode\":\"C1012\",\"@CategoryName\":\"Clips\"},' +
 '{"@ProductCode\":\"C1015\",\"@CategoryName\":\"Clips\", \"EAN\":\"0987654321\"}]}';

// Parse the JSON string to a JSON object
var jsonObject = JSON.parse(json);

var products = new Bloodhound({
    // Use $.map() to create an array of ProductCode key value pairs
    local: $.map(jsonObject.Product, function (product) {
        return {
            value: product["@ProductCode"]
        };
    }),
    datumTokenizer: function (datum) {
        // Specify the variable within the datum to use as suggestion data
        // In this case it's the value
        return Bloodhound.tokenizers.whitespace(datum.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace
});

另請注意，datumTokenizer指定要使用哪個值作為建議； 創建了一個具有稱為“值”的鍵的基准數組，因此我們希望使用“值”作為顯示鍵。 在您的示例中，您有“ return products.product.code;”。 這將不起作用，因為您的數據沒有一個名為“ code”的字段，您的JSON（！）也沒有。

您應該可以參考我的示例和此答案，以提前使用遠程工作。

Answer 2

貝爾吉是對的。 此后，您已經固定了大寫字母，但沒有固定復數：它應該是data.Product ，而不是data.Products 。 或者，您引用的JSON僅僅是data.Products ，在這種情況下，數組是data.Products.Product 。

鱸魚和數組

您應該注意的另一件事。 看起來這里的JSON來自badgerfish 。 我不知道您是否知道這意味着什么-基本上這是將XML轉換為JSON的一種方式。 如果只有一種產品或根本沒有任何產品，則格式會有所不同。 例如，以下XML：

<Products>
    <Product ProductCode="C1010" ="Clips"/>
    <Product ProductCode="C1012" ="Clips"/>
</Products>

將給出以下JSON：

{
    "Products": {
        "Product": [
            {"@ProductCode":"C1010","@CategoryName":"Clips"},       
            {"@ProductCode":"C1012","@CategoryName":"Clips"},
        ]
    }
}

但是只有一種產品，badge魚不知道將其制成數組，您會得到以下信息：

{
    "Products": {
        "Product": {"@ProductCode":"C1010","@CategoryName":"Clips"}
    }
}

並且沒有產品，根本就不會包含"Product" ：

{
    "Products": {}
}

結果是您可能應該為這些情況做准備。 同樣，在我看來，函數displayKey會拋出異常，除非它接收到恰好一個產品。

我正在一個項目中，我們的nodejs服務器連接到后端服務器。 這些后端傳統上使用XML，但現在可以選擇使用badgerfish以JSON進行響應。 數組的這種情況非常普遍，以至於我們有一個實用程序函數，該函數將data.Products.Product作為參數並將其轉換為數組（如果還不是一個數組）。