JavaScriptを使用して配列を操作する

Question

私はかなりJavaScriptの新機能ですので、私と一緒にいらしてください！

私は、APIゲートウェイに接続されたラムダスクリプトを使用してAWS DynamoDBからデータを抜き出しています。

私のページには、データのGETリクエストを発行するjavascript関数があり、これはうまくいきます。私はデータを取得することができます。私がそれを得ると、それはこのようになります：

{"Items":[{"issue":"my issue","email":"my@email.com","caseDate":1496543576984,"phone":"1234567890","status":"queueing","enterpriseID":"john.smith"},{"issue":"Test issue 02","email":"john.smithy@company.com","caseDate":1496543945585,"phone":"1234567890","status":"queueing","enterpriseID":"john.smithy"}],"Count":2,"ScannedCount":2} 

私はデータを持つWebページ上に動的な表を構築しようとしています。これは私が持っているコードです。 Items.issue、Items.caseDateなどの順序を変更して列見出しと一致させようとしているマップ関数に注目してください。

 var API_URL = 'https://myapi.execute-api.us-west-2.amazonaws.com/dev/cases'; 
 
     var table = document.createElement("table"); 
 
     
 
     $(document).ready(function(){ 
 
      $.ajax({ 
 
       type: 'GET', 
 
       url: API_URL, 
 

 
       success: function(data){ 
 
        
 
        //alert(data); 
 
        
 
        table.setAttribute("id", "myTable"); 
 

 
        var tableHeader = document.createElement("thead"); 
 
        
 
        var headerNames = ["Date", "Enterprise ID", "Client Phone", "Client Email", 
 
             "Case Status", "Client Issue"]; 
 
        
 
        headerNames.forEach(function(header){ 
 
         var tableHeaderItem = document.createElement("th"); 
 
         var headerText = document.createTextNode(header.toString()); 
 
         
 
         tableHeaderItem.appendChild(headerText); 
 
         tableHeader.appendChild(tableHeaderItem); 
 
         
 
        }); 
 

 
        table.appendChild(tableHeader); 
 

 
        data.Items.forEach(function(queueItem){ 
 

 
         var myTableRow = document.createElement("tr"); 
 
         myTableRow.setAttribute("id", queueItem.date); 
 
         
 
         var arr1 = $.map(queueItem, function(value, index) { 
 
          return [value]; 
 
         }); 
 

 
         const map =[2,5,3,1,4,0] 
 
         const arr3 = Array.apply(null, Array(map.length)) 
 
         arr3.map((d, i) => arr3[map[i]] = arr1[i]); 
 
         
 
         arr3.forEach(function(item){ 
 
          var tableItem = document.createElement("td"); 
 
          var itemText = document.createTextNode(item); 
 
          
 
          tableItem.appendChild(itemText); 
 
          myTableRow.appendChild(tableItem); 
 
         }); 
 

 
         table.appendChild(myTableRow); 
 
        }) 
 
        document.getElementById("queueTable").appendChild(table); 
 
       } 
 
      }); 
 
     });

だから、問題は、私が間違った順序で項目のいずれかのうち、実際のデータを取得し、それを反復するために、配列にそれを突き出す、その一度ということです。このマップ機能は素晴らしいと思うが、うまくいかないため、どうすればこの問題を解決できますか？

私は私を取得する必要があります：

mapping["ID","phone","issue","caseDate","status","email"] 

しかし、それは実際に私を取得します。

mapping["caseDate","ID","phone","email","status","issue"] 

ヘルプ！私は今3時間Googleの検索などのために私の頭を壁に打ち負かされていると私はちょうど私が必要なものを得ることはできません。

Answer 1

代わりのheaderNamesおよびそれらの内部マッピング、あなたはあなたは

const fields = [ 
    {name: 'caseDate', header: 'Date'}, 
    {name: 'issue', header: 'Client Issue'}, 
    {name: 'email', header: 'Client Email'}, 
    {name: 'phone', header: 'Client Phone'}, 
    {name: 'status', header: 'Case Status'}, 
    {name: 'enterpriseID', header: 'Enterprise ID'} 
] 

？：代わりに、このようなデータ構造を使用することができheaderプロパティをオフに引っ張って、ヘッダーのためにはこれらをループ可能性があり、それぞれに行から、item[field.name]のようなものを介してデータから名前付きフィールドを引き出します。

全体的に見た目はきれいです。