Question

我对javascript很新，所以请耐心等待我！

所以我有一些数据可以通过绑定到API网关的lambda脚本从AWS DynamoDB中提取出来。

所以我的页面上有一个javascript函数，它发出了对数据的GET请求，这很有用。我能够获取数据。当我得到它时，它看起来像这样：

{"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}

所以我试图在带有数据的网页上构建动态表。这是我的代码。注意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个小时，现在谷歌搜索等等，我只是不能得到我需要的东西。

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]的内容从数据中提取命名字段。

整体看起来更清洁。

使用Javascript操作数组

1 个答案: