用Javascript處理數組

我對javascript很新，所以請耐心等待！用Javascript處理數組

因此，我通過綁定到API網關的lambda腳本將一些數據從AWS DynamoDB中提取出來。

所以我在我的頁面上有一個javascript函數發出一個GET請求的數據，這很好。我能夠獲取數據。當我得到它，它看起來像這樣：

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

所以我試圖建立與數據在網頁上動態表。這是我有的代碼。注意map函數，我試圖改變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個小時現在谷歌搜索等，我只是不能完全得到我所需要的。

來源

2017-06-04 Edward S.

實際上[指定]的對象屬性迭代順序（http://www.ecma-international.org/ecma-262/7.0/#sec-ordinaryownpropertykeys）以ES2015開頭，但我不知道是否可以依賴在它上面呢。我認爲也不應該這樣做。（這是對現在刪除的評論的迴應。） –

那麼在lambda中有沒有辦法做到這一點，以更可預測的方式從DynamoDB中獲取數據？我只需要能夠根據dynamoDB中的內容生成動態表並將其粘貼到網頁上即可。 –

我對迪納摩一無所知，但您應該可以使用提供的數據並將其格式化爲您喜歡的格式。我在下面提供了一個答案，建議比標題列表和重新排序索引列表更直接。 –

而不是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]的數據從數據中提取命名的字段。

整體看起來更乾淨。

來源

2017-06-04 22:27:27

用Javascript處理數組

回答

相關問題