Javascript绘图'；X'；从对象数据导入表中

我有一张桌子，桌子头上有日期，左手边有水果。我想做的是从另一个叫做“Eated”的对象中获取日期和吃的水果，并在表的行/列中绘制一个X，该X与吃水果的日期一致

HTML

<table class="plan">
 <thead>
  <tr>
   <th><strong>Food</strong></th>
   <th>27/01/2017</th>
   <th>28/01/2017</th>    
   <th>29/01/2017</th>
   <th>30/01/2017</th>
   <th>31/01/2017</th>
   <th>01/02/2017</th>
   <th>02/02/2017</th>
  </tr>
 </thead>
 <tbody>
  <tr><td>Apple</td></tr>
  <tr><td>Banana</td></tr>
  <tr><td>Carrot</td></tr>
  <tr><td>Pear</td></tr>
 </tbody>
</table>

食物
27/01/2017
28/01/2017    
29/01/2017
30/01/2017
31/01/2017
01/02/2017
02/02/2017
苹果
香蕉
胡萝卜
梨

食物标题是通过javascript从一个对象“food”创建的，日期是通过momentJS生成的，“eat”是我想要绘制的对象数据

Javascript

var food = '{"food":[{"Name":"Apple"},{"Name":"Banana"},{"Name":"Carrot"},{"Name":"Pear"}]}';

$.each(JSON.parse(food), function(i, f) {
  var tblRow = "";
  tblRow += "<tr><td>" + f.Name + "</td></tr>";
  $(tblRow).appendTo(".plan tbody");
});

for(i = 7; i > 0; i--) {
  var day = moment().subtract('days', i).format('DD/MM/YYYY');
  $('<th>' + day + '</th>').appendTo('.plan thead tr');
};

var eaten = '{"eaten":[{"fields":[{"value":"02/02/2017"},{"value":"Carrot"}]},{"fields":[{"value":"31/01/2017"},{"value":"Pear"}]},{"fields":[{"value":"30/01/2017"},{"value":"Banana"}]},{"fields":[{"value":"29/01/2017"},{"value":"Apple"}]},{"fields":[{"value":"27/01/2017"},{"value":"Apple"}]}]}'

var food='{“food”：[{“Name”：“Apple”}，{“Name”：“Banana”}，{“Name”：“Carrot”}，{“Name”：“Pear”}]}；
$.each（JSON.parse（food），函数（i，f）{
var tblRow=“”；
tblRow+=“”+f.名称+“”；
$（待定）。附录（“计划正文”）；
});
对于（i=7；i>0；i--）{
var day=moment（）.subtract（'days'，i）.格式（'DD/MM/YYYY'）；
$（''+day+''）。附录（'.plan thead tr'）；
};
var Eat={“Eat”：[{“fields”：[{“value”：“02/02/2017”}，{“value”：“Carrot”}，{“fields”：[{“value”：“31/01/2017”}，{“value”：“Pear”}]}，{“fields”：[{“value”：“30/01/2017”}，{“value”：“Banana”}，{“fields”：“29/01/2017”}，{“value”：“Apple”}，{“value”：“Apple”}，{“fields”：“value”：“27/01/2017”}，{“value”：“Apple”}，{“value”：

从对象绘制X的最佳方式是什么？ 我是否应该获得cellIndex/rowIndex，然后比较html文本并绘制一个X

我的建议（在不改变数据模式和尽量不改变代码逻辑的情况下）：

解析JSON一次，以便进一步重用：

var eaten = JSON.parse(eatenJSON);
var food = JSON.parse(foodJSON);

用天数填充

days

数组

var days = [];
for(i = 7; i > 0; i--) {
    var day = moment().subtract('days', i).format('DD/MM/YYYY');
    days.push(day);
}

在

td

元素中设置

data-day

和

data-food

for (var i=0; i<days.length; i++) {
    tblRow += "<td data-day='" + days[i] + "' data-food='" + f.Name + "'></td>";
} 

工作小提琴：

---

编辑：用新的JSON更新了小提琴：

刚换了这条线

$.each(food, function(i, f) {

与：

---

food.food.forEach（函数（f）{

对不起，我把“food”的数据模式弄错了。如果是这样：{“food”：[{“Name”：“Member Online Portal”}，{“Name”：“Qinvest Corporate Website”}，{“Name”：“QSuper Public Website”}，{“Name”：“Acurity”}，{“Name”：“Member Online Support Portal”}我试着像f[I]一样循环它。除了现在，每个食物在水平单元格中的变化。@Pizdets，请用更新的模式更新你的问题。我们已经更新并修复了JSFIDLE链接。干杯，

$.each(food, function(i, f) {