将 JSON 对象与数组一起使用不能与数据表一起使用答案

【问题标题】：Using JSON object with arrays not working with Datatables将 JSON 对象与数组一起使用不能与数据表一起使用
【发布时间】：2016-11-30 03:38:42
【问题描述】：

我正在努力将我的 JSON 数据与数据表一起使用。抱歉格式化，但这是我在开发人员工具中得到的：

Object
pharmacy:Array[3]
0:"Walmart"
1:"Safeway"
2:"Kroger Pharmacy"
length:3
__proto__:Array[0]
price: Array[3]
0:58.14
1:65.45
2:66.76
length:3
__proto__:Array[0]
...

我正在使用这个：

$.ajax({
    url: 'test.php',
    type: 'POST',
    dataType: 'JSON',
    data: {
      drug: picked_drug,
        },
    success: function(data) {
        var all_data = JSON.parse(data);
        final_data = all_data.data.price_detail;
        console.log(final_data); //this outputs object above.
}
});

然后我像这样渲染表格：

var drugtable = $("#drug_datatable").DataTable({
            "data": final_data,              
            "paging": true,
            "dom": '<"top">Bt<"bottom"><"clear">',
            "pageLength": 25,
            "order": [
                [0, "desc"]
            ],
            "columns": [
            {
                "data": "pharmacy",
        "searchable": false,
        "width": "20%",
        "className": "lang_body_2",
        "title": "Attribute"
    }, 
    {
                "data": "price",
        "searchable": false,
        "width": "20%",
        "className": "lang_body_2",
        "title": "Attribute"
    }, 
              ],
        });

问题是我的表返回“表中没有可用数据”。我确定我的对象的格式存在问题，但我不知道要更改什么。

谢谢！

【问题讨论】：

标签： jquery arrays json object datatables

【解决方案1】：

你的数据结构对吗？你的数据看起来像 ["Safeway", "Kroger Pharmacy"], price:[58.14, 65.45, 66.76]}

您可能想要 [{pharmacy:"Walmart",price:58.14 }, {pharmacy:"Safeway", price:65.45}, {pharmacy:"Kroger Pharmacy", price:66.76} ]

这可以展平数据。

    // simulated the return from ajax as i understand your data
    function stuff () {
        this.pharmacy = ["Walmart","Safeway", "Kroger Pharmacy"];
        this.price = [58.14, 65.45, 66.76]
    }
    var list = new stuff();

    // now flatening for datatables
    var keys = Object.keys(list);
    var listLen = list[keys[0]].length;
    var final_data = [];
    // create the list for data table
    for (var i = 0; i < listLen; ++i) {

        var item = {};
        for (var j = 0; j < keys.length; ++j) {
            item[keys[j]] = list[keys[j]][i];
        }
        final_data[final_data.length] = item;
    }

我用这个测试了数据：

            var drugtable = $("#drug_datatable").DataTable({
            "data": final_data,
            columns: [{ data: "pharmacy" }, {data:"price"}]
        });

【讨论】：

是的......这就是我想要的......我正在努力使用each 声明来实现它。想法？
所以您不能从源头更改数据，将其展平？
数据来自 API，所以我只能尝试类似：$.each(final_data, function(index, val) { item = {} item [index] = val; });
我有一个想法，但我需要几分钟才能重新创建它
我还没有测试数据表部分，还没有安装在我的开发环境中。我确实对数组同步做了一些假设

【解决方案2】：

我无法实际测试此代码，因为我无法从源中获取数据，但根据我们的讨论，这是我最好的选择。

<script type="text/javascript">

    // this flattens the data passed back by ajax
    function flattenData(list) {
        // now flatening for datatables
        var keys = Object.keys(list);
        var listLen = list[keys[0]].length;
        var fd= [];
        // create the list for data table
        for (var i = 0; i < listLen; ++i) {

            var item = {};
            for (var j = 0; j < keys.length; ++j) {
                item[keys[j]] = list[keys[j]][i];
            }
            fd[final_data.length] = item;
        }
        return fd;
    }


    // function is called from the success callback function to create the DataTable
    function createTable(tableData) {

        var drugtable = $("#drug_datatable").DataTable({
            "data": tableData,
            columns: [{ data: "pharmacy" }, { data: "price" }],
        });
    }

    $(function ($) {

        $.ajax({
            url: 'test.php',
            type: 'POST',
            dataType: 'JSON',
            data: {
                drug: picked_drug,
            },
            success: function (data) {
                var all_data = JSON.parse(data);
                var final_data = flattenData(all_data.data.price_detail);
                createTable(final_data)
                console.log(final_data); //this outputs object above.
            }
        });

    })
</script>

【讨论】：