集團從多維數組一個HTML表格與數據驅動的文件

Question

夥計們，

我想組分別用於各自的父元素的子元素的數組元素，我們能做到這一點在驅動文件JS數據？

這是我的JSON數據。

http://jsfiddle.net/maryhansen/d9wgnbdd/

我的HTML看起來像下面，

 d3.json("Udashboard.json", function (error,data) { 

      function tabulate(data, columns) { 
       var table = d3.select('body').append('table') 
       var thead = table.append('thead') 
       var tbody = table.append('tbody'); 

      // append the header row 
      thead.append('tr') 
      .selectAll('th') 
      .data(columns).enter() 
      .append('th') 
      .text(function (column) { return column; }); 

      // create a row for each object in the data 
      var rows = tbody.selectAll('tr') 
      .data(data.objects) 
      .enter() 
      .append('tr'); 

      // create a cell in each row for each column 
      var cells = rows.selectAll('td') 
      .data(function (row) { 
       return columns.map(function (column) { 
        return {column: column, value: row.officetype[column]}; 

       }); 
      }) 
      .enter() 
      .append('td') 
      .text(function (d) { return d.value; }); 

      return table; 
     } 

     console.log (data); 
     // render the table(s) 
    var peopleTable = tabulate(data, ['code']); // single column table 

     // uppercase the column headers 
     peopleTable.selectAll("thead th") 
     .text(function(column) { 
     return column.charAt(0).toUpperCase() + column.substr(1); 
    }); 

    }); 

    </script> 

Answer 1

編輯

更新，以反映從JSON層次的不同部分數據的多列的表格。

這是試圖解析你相當複雜的JSON。在這個例子中，d3.json已被刪除，因爲它沒有使用外部文件，但是如果需要，您可以將其添加回去，並將tabulate(myJSON, ....;更改回tabulate(data, ...

E.g.

d3.json('/api/data.json', function (error,data) { 
    function tabulate(data, columns) { 
     // etc etc as per snippet below 
    } 

    var columnFields = [ { id: "ID", key: "id" }, 
         { id: "Interest", key: "interest" }, 
         { id: "Loan Amount", key: "loan.amount" }, 
         { id: "Code", key: "loan.grouploan[0].gl.groupoffice.code" }, 
         { id: "Name", key: "loan.grouploan[0].gl.groupoffice.name" } ]; 

    // render the table(s) 
    var groupOfficeTable = tabulate(myJSON, columnFields); // multi column table  
}); 

請注意，它通過鑽取到.objects.loan.grouploan[0].gl.groupoffice來檢索數據。如果有多個組，則需要修改此代碼。

var myJSON = { 
 
     "meta" : { 
 
      "limit" : 200, 
 
      "next" : "/api/v1/loandcb/?limit=200&offset=200", 
 
      "offset" : 0, 
 
      "previous" : null, 
 
      "total_count" : 22374 
 
     }, 
 
     "objects" : [{ 
 
       "collections" : 0.0, 
 
       "id" : 2081041, 
 
       "interest" : 916.32, 
 
       "loan" : { 
 
        "amount" : 225000.0, 
 
        "approval_date" : "2006-05-02T00:00:00", 
 
        "grouploan" : [{ 
 
          "gl" : { 
 
           "go" : "C1030", 
 
           "groupoffice" : { 
 
            "code" : "C1030", 
 
            "name" : "MANNARGUDI", 
 
            "officeparent" : { 
 
             "code" : "BN110", 
 
             "name" : "MANNARGUDI", 
 
             "officeparent" : { 
 
              "code" : "TJR", 
 
              "name" : "TANJORE", 
 
              "officeparent" : { 
 
               "code" : "CRP", 
 
               "name" : "CORPORATE", 
 
               "officeparent" : null, 
 
               "oficecode" : null, 
 
               "resource_uri" : "/api/v1/office/1/" 
 
              }, 
 
              "oficecode" : "CRP", 
 
              "resource_uri" : "/api/v1/office/344/" 
 
             }, 
 
             "oficecode" : "TJR", 
 
             "resource_uri" : "/api/v1/office/19/" 
 
            }, 
 
            "oficecode" : "BN110", 
 
            "resource_uri" : "/api/v1/office/86/" 
 
           }, 
 
           "resource_uri" : "/api/v1/group/5190/" 
 
          }, 
 
          "id" : 1432, 
 
          "last_modified_date" : "2013-04-14T12:42:39.951000", 
 
          "resource_uri" : "/api/v1/grouploan/1432/" 
 
         } 
 
        ], 
 
        "product" : { 
 
         "code" : "ATL", 
 
         "id" : "2", 
 
         "resource_uri" : "" 
 
        }, 
 
        "resource_uri" : "/api/v1/entityloan/1/" 
 
       }, 
 
       "resource_uri" : "/api/v1/loandcb/2081041/" 
 
      }, { 
 
       "collections" : 0.0, 
 
       "id" : 2081042, 
 
       "interest" : 212.05, 
 
       "loan" : { 
 
        "amount" : 237500.0, 
 
        "approval_date" : "2006-05-02T00:00:00", 
 
        "grouploan" : [{ 
 
          "gl" : { 
 
           "go" : "C1088", 
 
           "groupoffice" : { 
 
            "code" : "C1088", 
 
            "name" : "TRICHY", 
 
            "officeparent" : { 
 
             "code" : "BN128", 
 
             "name" : "TRICHY", 
 
             "officeparent" : { 
 
              "code" : "TRY", 
 
              "name" : "TRICHY", 
 
              "officeparent" : { 
 
               "code" : "CRP", 
 
               "name" : "CORPORATE", 
 
               "officeparent" : null, 
 
               "oficecode" : null, 
 
               "resource_uri" : "/api/v1/office/1/" 
 
              }, 
 
              "oficecode" : "CRP", 
 
              "resource_uri" : "/api/v1/office/11/" 
 
             }, 
 
             "oficecode" : "TRY", 
 
             "resource_uri" : "/api/v1/office/36/" 
 
            }, 
 
            "oficecode" : "BN128", 
 
            "resource_uri" : "/api/v1/office/127/" 
 
           }, 
 
           "resource_uri" : "/api/v1/group/3260/" 
 
          }, 
 
          "id" : 907, 
 
          "last_modified_date" : "2013-04-14T12:42:39.951000", 
 
          "resource_uri" : "/api/v1/grouploan/907/" 
 
         } 
 
        ], 
 
        "product" : { 
 
         "code" : "ATL", 
 
         "id" : "2", 
 
         "resource_uri" : "" 
 
        }, 
 
        "resource_uri" : "/api/v1/entityloan/2/" 
 
       }, 
 
       "resource_uri" : "/api/v1/loandcb/2081042/" 
 
      } 
 
     ] 
 
    }; 
 

 
function tabulate(data, columns) { 
 
\t \t var table = d3.select('body').append('table') 
 
\t \t var thead = table.append('thead') 
 
\t \t var \t tbody = table.append('tbody'); 
 
    
 
\t \t // append the header row 
 
\t \t thead.append('tr') 
 
\t \t .selectAll('th') 
 
\t \t .data(columns).enter() 
 
\t \t .append('th') 
 
\t \t  .text(function (column) { return column.id; }); 
 
    
 
\t \t // create a row for each object in the data 
 
\t \t var rows = tbody.selectAll('tr') 
 
\t \t .data(data.objects) 
 
\t \t .enter() 
 
\t \t .append('tr'); 
 
    
 
\t \t // create a cell in each row for each column 
 
\t \t var cells = rows.selectAll('td') 
 
\t \t .data(function (row) { 
 
\t \t  return columns.map(function (column) { 
 
\t \t  return { column: column.id, value: eval('row.'+column.key) }; 
 
\t \t  }); 
 
\t \t }) 
 
\t \t .enter() 
 
\t \t .append('td') 
 
\t \t  .text(function (d) { return d.value; }); 
 
    
 
\t return table; 
 
} 
 

 
var columnFields = [ { id: "ID", key: "id" }, 
 
        { id: "Interest", key: "interest" }, 
 
        { id: "Loan Amount", key: "loan.amount" }, 
 
        { id: "Code", key: "loan.grouploan[0].gl.groupoffice.code" }, 
 
        { id: "Name", key: "loan.grouploan[0].gl.groupoffice.name" } ]; 
 

 
\t // render the table(s) 
 
tabulate(myJSON, columnFields); // multi column table

td, th { 
 
    padding: 1px 4px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>