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

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上，我有产品Carbon。 检查thead的位置，确定碳的产生者。 在行中将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>