在 HTML 页面的 id 部分显示 DynamoDB 项目

Question

使用 Lambda 函数，我扫描了数据库的项目。我的挑战是获取这些内容，并在单击按钮时在我的

HTML代码

<p id="all"><b>Show all</b>
    <button onclick="getAll()"><b>Get</b></button>
</p>

Javascript getAll()

代码

</script>
    function getAll(itemStr) {
        var itemObj=JSON.parse(itemStr);

        var htm = "";
        var item;
        for (item in itemObj) {
            var data = itemObj[0];
            if (typeof data !== 'object')
                htm += '<li>'+item+' '+itemObj[item] +'</li>';
            else
                htm += '<li>' + item + ' ' + getAll(item) + '</li>';
        }
        return '<ul>'+htm+'</ul>';
    }
</script>

数据库中的项目：

response=dynamodb.put_item(TableName='log', Item={'logID':{'S':str(datetime.now())},'text':{'S':文本}})

数据库项目返回为

[{'logID': {'S': '2021-03-23 04:06:46.687457'}, 'text': {'S': " {'chicken':false,'veggie':true,'beef':true,'pork':false,'Take-out':false,'Dine-in':true,'Other':false,'Door-Dash':false}"}},{'logID': {'S': '2021-03-23 02:11:21.440315'}, 'text': {'S': "{'chicken':false,'veggie':true,'beef':false,'pork':false,'Take-out':false,'Dine-in':true,'Other':false,'Door-Dash':false}"}}]

来自 XMLHttpRequest 的 console.log 的屏幕截图

Answer 1

根据您的示例数据，您可以按照下面的代码注释进行操作。

//Assumming that data is already an Array, if a string do a JSON.parse first
const itemData = [
  {'logID': {'S': '2021-03-23 04:06:46.687457'}, 
    'text': {'S': "{'chicken':false,'veggie':true,'beef':true,'pork':false,'Take-out':false,'Dine-  in':true,'Other':false,'Door-Dash':false}"}},
  {'logID': {'S': '2021-03-23 02:11:21.440315'}, 
    'text': {'S': "{'chicken':false,'veggie':true,'beef':false,'pork':false,'Take-out':false,'Dine-in':true,'Other':false,'Door-Dash':false}"}}
]


function getAll(itemStr) {
  let htm = ""
  
  
  for (let item of itemStr){
    htm += "<p>Log ID: " + item.logID.S + "</p>" + getAllItems(item.text.S)
  }
  
  //append list to paragraph tag 
  document.getElementById('section').innerHTML = "<ul>" + htm + "</ul>"
  
}


function getAllItems(textData){
  let formattedString = textData.replaceAll(`'`, `"`) // replace all single qoute to double qoutes
  
  //parse textData to JS Object
  let data = JSON.parse(formattedString)
  let listItems = ""
   //loop for displaying data
   for (let key in data) {
      listItems += `<li>${key}:${data[key]}</li>`
   }
   
  return listItems
}

getAll(itemData)

<p id="section">
</p>

在 HTML 页面的 id 部分显示 DynamoDB 项目

Display DynamoDB items in id section of HTML page

html

javascript

amazon-dynamodb