映射單元格以在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>