如何使用数组/字符串 html 制作动态卡片

Question

我有一个数据

    {
        "data": {
            "count": 8,
            "rows": [
                {
                    "session_name": "1_M1",
                    "date": "09-09-2021",
                    "p_id": "WEB506",
                    "sub_id": "Physiotherapy"
                },
                {
                    "session_name": "WEB506_09092021_M1",
                    "date": "09-09-2021",
                    "p_id": "WEB506",
                    "sub_id": "Physiotherapy"
                },
                {
                    "session_name": "WEB506_09092021_M1",
                    "date": "09-09-2021",
                    "p_id": "WEB506",
                    "sub_id": "Physiotherapy"
                },
                {
                    "session_name": "WEB506_09092021_M1",
                    "date": "09-09-2021",
                    "p_id": "WEB506",
                    "sub_id": "Physiotherapy"
                },
                {
                    "session_name": "WEB506_09092021_M1",
                    "date": "09-09-2021",
                    "p_id": "WEB506",
                    "sub_id": "Physiotherapy"
                },
                {
                    "session_name": "WEB506_09092021_M1",
                    "date": "09-09-2021",
                    "p_id": "WEB506",
                    "sub_id": "Physiotherapy"
                },
                {
                    "session_name": "WEB506_09092021_M1",
                    "date": "09-09-2021",
                    "p_id": "WEB506",
                    "sub_id": "Physiotherapy"
                },
                {
                    "session_name": "WEB506_09092021_M1",
                    "date": "09-09-2021",
                    "p_id": "WEB506",
                    "sub_id": "Physiotherapy"
                }
            ]
        }
    }

我通过处理 ajax 从 post API(nodejs, express) 获得。我将这些数据保存在 localstorage 中，并在下一页通过 localstorage 访问它。然后我想创建动态卡片，并从这些数据中传递一些值。问题是我在下一页的脚本中获取了这些数据，但是当我创建卡片时 foreach 不起作用。请帮忙。

我的 ajax，

    $.ajax({
                type: 'POST',
                data: JSON.stringify(data),
                 contentType: 'application/json',
                 dataType: 'json',
                 url: "http://localhost:5000/SessionData",                      
                 success: function(data) {
                
                     console.log(data);
    
                    
                     localStorage.setItem('myData', JSON.stringify(data));
                     window.location.href = 'nextpage'
                    },
                    
                  error: function(){
                    alert("Error")
                    console.log('error occured')
                  }
            })

在我的下一页，

     <script>
        var data = localStorage.getItem('myData');
        console.log(data);
        var arr = new Array(data);
        console.log(arr,"arr");
        const container = document.getElementById('aa');
    
    arr.data.forEach((result, idx) => {
      // Create card element
      const card = document.createElement('div');
      card.classList = 'card-body';
    
      // Construct card content
      const content = `
        <div class="card" style="width:700px;height: 150px">
      
         
        
    
        
          <div class="card-body">
    
            <li> Session Name :${result.sub_id}</li>
            <li> Date :${result.date}</li>
            <li> Patient ID : ${result.p_id}</li>
            <button class="btn btn-link" style="width: 60px;height: 30px;background-color:#d1b147;color data-toggle="collapse" data-target="#collapse-${idx}" aria-expanded="true" aria-controls="collapse-${idx}">
              View
            </button>
          </div>
        </div>
      </div>
    </div>
      `;
    
      
      container.innerHTML += content;
    })
        
      </script>

Answer 1

您需要将存储的string 转换回object，例如使用JSON.parse():

const parsedData = JSON.parse(localStorage.getItem('myData'));
parsedData.data.rows.forEach((result, idx) => {
   ...
});