时间戳

首页 > 解决方案 > 如何将动态数据从 json 文件部署到 html 表中？

javascript - 如何将动态数据从 json 文件部署到 html 表中？

问题描述

我尝试过以下代码，但它不起作用。我想根据行ID动态地将数据部署到表中。所以将来如果有人对json文件进行更改，那么数据必须根据json数据显示到表的列中。例如，如果我从星期一开始对我的json文件进行更改到星期五，然后数据必须显示在星期五列中，而不对 javascript 代码进行任何更改。

var makeSchedule= 
{
"schedule" : [
    {"fitnessClass": "One",
     "sessionType": "Push Up", 
     "duration": 1,
     "allocatedTime": {
         "group" : "A",
         "day" : "mon", 
         "location" : "Main Hall",
         "time": "11"
         },
     "alternativeTimes":
        [
        {"group" : "B",
         "day" : "tues", 
         "location" : "Main Hall2",
        "time": "11"}
        ]
    },

    {"fitnessClass": "Two",
     "sessionType": "Running", 
     "duration": 1,
     "allocatedTime": {
         "group" : "A",
         "day" : "weds", 
         "location" : "Main Hall 3",
         "time": "9"
         },
     "alternativeTimes":
        [
        {"group" : "B",
         "day" : "thurs", 
         "location" : "Main Hall 4",
         "time": "9"}
        ]
    },

    {"fitnessClass": "Three",
     "sessionType": "Pull Ups", 
     "duration": 1,
     "day" : "thurs", 
     "location" : "Main Hall 3",
     "time": "15"           
    }
    ]
}


window.addEventListener("load",function(){                 
  makeSchedule.schedule.forEach(booked => {                      
       if(booked.allocatedTime.day==='thurs')
       {                
          document.getElementsByClassName('s9').innerHTML = `${booked.sessionType}`;        

       }            
  });        
}); 
<table>
        <tbody> 
            <tr id="mon">
    		    <td class="dayRowHead">Monday</td>
    		    <td class="s9"></td>
    		    <td class="s10"></td>
            </tr>
            <tr id="tues">
    		    <td class="s9"></td>
    		    <td class="s10"></td>
    	    </tr>
    	    <tr id="thurs">
    		    <td class="s9"></td>
    		    <td class="s10"></td>
    	    </tr>
        </tbody>
    </table>

标签： javascriptjson

解决方案

这一行：

if(booked.allocatedTime==='thurs')

看起来应该是：

if(booked.allocatedTime.day ==='thurs')

根据你拥有的对象。

document.getElementsByClassName('s9').innerHTML = ${booked.sessionType};

更新

@utkanos 指出document.getElementsByClassName('s9').innerHTML返回的是 nodeList 而不是 HTMLElement，这是另一个问题。更完整的代码块如下所示：

var makeSchedule = {
  "schedule": [{
      "fitnessClass": "One",
      "sessionType": "Push Up",
      "duration": 1,
      "allocatedTime": {
        "group": "A",
        "day": "mon",
        "location": "Main Hall",
        "time": "11"
      },
      "alternativeTimes": [{
        "group": "B",
        "day": "tues",
        "location": "Main Hall2",
        "time": "11"
      }]
    },

    {
      "fitnessClass": "Two",
      "sessionType": "Running",
      "duration": 1,
      "allocatedTime": {
        "group": "A",
        "day": "weds",
        "location": "Main Hall 3",
        "time": "9"
      },
      "alternativeTimes": [{
        "group": "B",
        "day": "thurs",
        "location": "Main Hall 4",
        "time": "9"
      }]
    },

    {
      "fitnessClass": "Three",
      "sessionType": "Pull Ups",
      "duration": 1,
      "day": "thurs",
      "location": "Main Hall 3",
      "time": "15"
    }
  ]
}


window.addEventListener("load", function() {
  makeSchedule.schedule.forEach(booked => {
    if (booked.allocatedTime && booked.allocatedTime.day === 'mon') {
       document.querySelectorAll('.s9').forEach(el => {
            el.innerHTML = `${booked.sessionType}`;
        })
    }
  });
});
<table>
  <tbody>
    <tr id="mon">
      <td class="dayRowHead">Monday</td>
      <td class="s9"></td>
      <td class="s10"></td>
    </tr>
    <tr id="tues">
      <td class="s9"></td>
      <td class="s10"></td>
    </tr>
    <tr id="thurs">
      <td class="s9"></td>
      <td class="s10"></td>
    </tr>
  </tbody>
</table>

请注意，我使用querySelectorAll()而不是getElementsByClassName()，并使用 循环遍历结果forEach()。最后，我将“thurs”更改为“mon”，因为“thurs”仅在您booked.alternativeTimes.day的booked.day示例数据中。我建议使您的数据对象在结构上更加统一，这样您将来就不必使用大量条件来访问正确的数据。例如，您应该始终能够期望“day”值出现在每个booked对象的相同位置。

推荐阅读