Question

我想通过映射第一行（动态产品）和列（供应商）来显示单元格的JSON数据。这是JSON输入和代码：

$(document).ready(function () {
    var json = [{
        "Supplier": "Supplier1",
        "Product": "Oxygen",
        "Quantity": 50
    }, {
        "Supplier": "Supplier1",
        "Product": "Hydrogen",
        "Quantity": 100
    }, {
        "Supplier": "Supplier1",
        "Product": "Carbon",
        "Quantity": 50
    }, {
        "Supplier": "Supplier2",
        "Product": "Carbon",
        "Quantity": 200
    }, {
        "Supplier": "Supplier2",
        "Product": "Oxygen",
        "Quantity": 100
    }, {
        "Supplier": "Supplier3",
        "Product": "Hydrogen",
        "Quantity": 50
    }];
    var tr;
    for (var i = 0; i < json.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + json[i].Supplier + "</td>");
        tr.append("<td>" + json[i].Product + "</td>");
        tr.append("<td>" + json[i].Quantity + "</td>");
        $('table').append(tr);
    }
});

这是表格：

我想重新排列数据以获取此信息：

映射供应商和产品，显示数量。所有都是动态值。

请帮助。在此先感谢。

Answer 1

你也可以使用简单的逻辑来做到这一点。

您需要根据供应商对json进行排序。然后从json数据中获取所有可用产品。

并且逻辑将做其余的事情。

这是工作jsfiddle： http://jsfiddle.net/jdk2f7gr/

javascript代码

$(document).ready(function () {
   var json = [{
        "Supplier": "Supplier1",
        "Product": "Oxygen",
        "Quantity": 50
    }, {
        "Supplier": "Supplier1",
        "Product": "Hydrogen",
        "Quantity": 100
    }, {
        "Supplier": "Supplier1",
        "Product": "Carbon",
        "Quantity": 50
    }, {
        "Supplier": "Supplier2",
        "Product": "Carbon",
        "Quantity": 200
    }, {
        "Supplier": "Supplier2",
        "Product": "Oxygen",
        "Quantity": 100
    }, {
        "Supplier": "Supplier3",
        "Product": "Hydrogen",
        "Quantity": 50
    },
    {
        "Supplier": "Supplier3",
        "Product": "Nitrogon",
        "Quantity": 200
    }];

    function sortResults(prop, asc) {
        json = json.sort(function(a, b) {
        if (asc) return (a[prop] > b[prop]) ? 1 : ((a[prop] < b[prop]) ? -1 : 0);
        else return (b[prop] > a[prop]) ? 1 : ((b[prop] < a[prop]) ? -1 : 0);
        });

    }
    sortResults('Supplier',true);

    var tr;
    var supName=json[0].Supplier;
    var productList=$.unique(json.map(function (d) {
    return d.Product;}));

    var prod={};
    function appendHeader(productList){
        tr = $('<tr/>');
        tr.append("<th>Supplier</th>");
        for(var i=0;i < productList.length; i++)
            {               
                    tr.append("<th>" + productList[i] + "</th>");           
            }
            $('table').append(tr);      
    }
    appendHeader(productList);

    function appendRow(supName,prod){
        tr = $('<tr/>');
            tr.append("<td>" + supName + "</td>");
            for(var i=0;i < productList.length; i++)
            {
                if (prod[productList[i]]) {
                    tr.append("<td>" + prod[productList[i]] + "</td>");
                } else {
                    tr.append("<td></td>");
                }

            }


            $('table').append(tr);
    }

    for (var i = 0; i < json.length; i++) {

        if(supName===json[i].Supplier){
            if(prod[json[i].Product]){
              prod[json[i].Product]= prod[json[i].Product] + json[i].Quantity;
            }else{
                 prod[json[i].Product]=json[i].Quantity;
            }
        }
        else
        {
            appendRow(supName,prod);
            prod={};
            supName=json[i].Supplier;
             if(prod[json[i].Product]){
              prod[json[i].Product]= prod[json[i].Product] + json[i].Quantity;
            }else{
                 prod[json[i].Product]=json[i].Quantity;
            }
        }


    }
    appendRow(supName,prod);

});

Answer 2

您可以使用AJAX根据您传递的参数返回JSON。这将允许您自定义它。

另一种方式是采取： Supplier1等，并将它们添加到包含产品和数量的单独数组中。然后通过它们进行迭代，并根据产品出现的位置添加。

例如，我在供应商2上，我有产品碳。检查thead的位置Carbon appeaers。将val添加到行中的当前col。

function findAjax() {
                $.ajax({
                  type: "POST",
                  dataType: 'json',
                  url: '/Action/GetDynamicJson?format='$('#json-format').val(),
                  success: function(response){              
                        $('#table-container').html("");
                        $.each (response, function (index) {
                          if ($('#json-format').val() = '1'){
                            var tableRow = "";
                            tableRow = $('<tr/>');
                            tableRow.append("<td>" + response[index].Supplier + "</td>");
                            tableRow.append("<td>" + response[index].Product + "</td>");
                            tableRow.append("<td>" + response[index].Quantity + "</td>");
                            $('#table-container').append(tableRow);
                          }else{
                          }
                  });  
                  },
                  error: function(req, status, error) {
                      //console.log("findAjax "+ status+" "+error);
                  }
              });
};

Answer 3

抱歉，我不熟悉jQuery，所以我在某些地方使用原生JavaScript。

如果您无法从服务器端访问该格式，您可以在客户端更改格式，如下所示：

$(document).ready(function() {
    var json = [{
        "Supplier": "Supplier1",
        "Product": "Oxygen",
        "Quantity": 50
    }, {
        "Supplier": "Supplier1",
        "Product": "Hydrogen",
        "Quantity": 100
    }, {
        "Supplier": "Supplier1",
        "Product": "Carbon",
        "Quantity": 50
    }, {
        "Supplier": "Supplier2",
        "Product": "Carbon",
        "Quantity": 200
    }, {
        "Supplier": "Supplier2",
        "Product": "Oxygen",
        "Quantity": 100
    }, {
        "Supplier": "Supplier3",
        "Product": "Hydrogen",
        "Quantity": 50
    }];

    var data = {}; // reformat the data
    var products = []; // types of products

    json.forEach(function(entry) {
        if (!data.hasOwnProperty(entry.Supplier)) {
            data[entry.Supplier] = {};
        }

        if (data[entry.Supplier].hasOwnProperty(entry.Product)) {
            data[entry.Supplier][entry.Product] += entry.Quantity;
        } else {
            data[entry.Supplier][entry.Product] = entry.Quantity;
        }

        // add new product type
        if (products.indexOf(entry.Product) === -1) {
            products.push(entry.Product);
        }
    });

    // set <th> line
    $('table').append('<tr><th>Supplier</th><th>' +
        products.join('</th><th>') +
        '</th></tr>');

    var table_str = '';

    for (entry in data) {
        if (data.hasOwnProperty(entry)) {
            table_str += '<tr>';
            table_str += '<td>' + entry + '</td>';
            products.forEach(function(product) {
                if (data[entry].hasOwnProperty(product)) {
                    table_str += '<td>' + data[entry][product] + '</td>';
                } else {
                    table_str += '<td></td>';
                }
            });
            table_str += '</tr>';
        }
    }

    $('table').append(table_str);

    console.log(data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table></table>

映射单元格以在HTML表格中显示JSON数据

3 个答案: