Javascript 尝试创建HTML表并使用相同的JSON数据填充select标记

我有一个JSON数据，我正试图从中创建一个HTML表和一个下拉列表，但也面临着呈现表和下拉列表的问题

我的JSON：

[
  {
    "Category name": "juce",
    "Category Data": [
      {
        "Item Code": "1234",
        "Item Name": "juce1",
        "Quantity": "0"
      }
    ]
  },
  {
    "Category name": "juce",
    "Category Data": [
      {
        "Item Code": "1234",
        "Item Name": "juce2",
        "Quantity": "0"
      }
    ]
  },
  {
    "Category name": "rice",
    "Category Data": [
      {
        "Item Code": "1234",
        "Item Name": "rice1",
        "Quantity": "0"
      }
    ]
  },
  {
    "Category name": "rice",
    "Category Data": [
      {
        "Item Code": "1234",
        "Item Name": "juce2",
        "Quantity": "0"
      }
    ]
  },
  {
    "Category name": "roti",
    "Category Data": [
      {
        "Item Code": "1234",
        "Item Name": "roti1",
        "Quantity": "0"
      }
    ]
  },
  {
    "Category name": "roti",
    "Category Data": [
      {
        "Item Code": "1234",
        "Item Name": "juce2",
        "Quantity": "0"
      }
    ]
  }
]

我正在尝试创建一个HTML表，它的外部有一个下拉列表，名为Category Name

就像在JSON中一样，我有一个下拉列表中需要的类别名称，以及HTML表中的其他数据

当用户单击下拉列表中的任何类别时，HTML表仅根据该类别名称填充

“数量”此字段可编辑，将由用户输入

我正在尝试的部分：

函数addTable（tableData）{
var col=Object.keys（tableData[0]）；
var countNum=col.filter（i=>！isNaN（i））.length；
var num=列拼接（0，countNum）；
col=col.concat（num）；
var table=document.createElement（“表”）；
var tr=table.insertRow（-1）；//表行。
var colNum=col.length；//提高速度
对于（var i=0；i=colNum）{
th.innerHTML=“数量”；
tr.appendChild（th）；
tr.classList.add（“文本中心”）；
tr.classList.add（“head”）
}否则{
th.innerHTML=col[i]；
tr.appendChild（th）；
tr.classList.add（“文本中心”）；
tr.classList.add（“head”）
}
}
对于（var i=0；i-1&&j>=colNum）{
var quantityField=document.createElement（“输入”）；
quantityField.style.border=“无”；
quantityField.style[“文本对齐”]=“居中”；
setAttribute（'name'，'Quantity'）；
setAttribute（'autocomplete'，'on'）；
setAttribute（'value'，'0'）；
setAttribute（'type'，'number'）；
setAttribute（'required'，'required'）；
quantityField.classList.add（“dataReset”）；
tabCell.appendChild（quantityField）；
}否则{
if（tableData[i]['Item Code']==tableData[i][col[j]]）{
tabCell.innerHTML=表格数据；
setAttribute（'name'，'Item_Code'）；
setAttribute（'value'，tabledata）；
tabCell.appendChild（hiddenField）；
}
if（tableData[i]['Item Name']===tableData[i][col[j]]）{
tabCell.innerHTML=表格数据；
setAttribute（'name'，'Item_name'）；
setAttribute（'value'，tabledata）；
tabCell.appendChild（hiddenField）；
}
如果（j>1）
tabCell.classList.add（“文本右键”）；
}
}
}
var divContainer=document.getElementById（“HourlysalesSummary”）；
divContainer.innerHTML=“”；
divContainer.appendChild（表）；
表.classList.add（“表”）；
table.classList.add（“带条纹的表”）；
table.classList.add（“带边框的表”）；
table.classList.add（“表悬停”）；
}
addTable（tableData）

类别
全部的
朱斯
大米
罗蒂

拯救
明智的做法是选择一个实用程序库，例如下划线或Lodash，以使数组操作更容易一些。对于这个例子，我使用了Lodash

var data = []/ //enter your array of data here instead of empty array
var dataArray = []; //this will hold a collection of Category Names
for (datum of data) {
   console.log(datum);
   dataArray.push(datum["Category name"]);
}
uniqueArrayForDropdown = _.sortedUniq(dataArray); //only save unique category names

现在，当有人选择类别名称时，您可以使用如下函数过滤
数据
对象（这里我将
rice
设置为静态，但您可以将其更改为从下拉列表中选择的值）：

您可以通过如下设置创建一个函数，并将更改事件设置为执行
filterSelection（）
，来应用此功能：

只要表逻辑正确，就可以让它绘制
filteredData
数组
filteredData
包含与筛选条件匹配的
数据
对象的子集。
对于此项目，最好将步骤分解。我看到了几个步骤：


从数据键创建表头
从数据创建表体
从类别名称更新筛选选项（唯一）

考虑以下代码


var-tData=[{
“类别名称”：“juce”，
“类别数据”：[{
“项目代码”：“1234”，
“项目名称”：“juce1”，
“数量”：“0”
}]
},
{
“类别名称”：“juce”，
“类别数据”：[{
“项目代码”：“1234”，
“项目名称”：“juce2”，
“数量”：“0”
}]
},
{
“类别名称”：“大米”，
“类别数据”：[{
“项目代码”：“1234”，
“项目名称”：“rice1”，
“数量”：“0”
}]
},
{
“类别名称”：“大米”，
“类别数据”：[{
“项目代码”：“1234”，
“项目名称”：“juce2”，
“数量”：“0”
}]
},
{
“类别名称”：“roti”，
“类别数据”：[{
“项目代码”：“1234”，
“项目名称”：“roti1”，
“数量”：“0”
}]
},
{
“类别名称”：“roti”，
“类别数据”：[{
“项目代码”：“1234”，
“项目名称”：“juce2”，
“数量”：“0”
}]
}
];
$（函数（）{
函数getCatNames（arr）{
变量名称=[]；
$。每个（arr，功能（键，obj）{
name.push（obj['Category name']）；
});
var unique=names.filter（（v，i，a）=>a.indexOf（v）==i）；
返回唯一值；
}
函数更新过滤器（obj，d）{
var catOpts=getCatNames（d）；
html（“”）；
对象附加（“全部”）；
$。每个（catOpts，函数（k，v）{
$（“”）.html（v）.appendTo（obj）；
});
}
函数过滤器选择（obj）{
var s=$（“#CategoryName选项：选中”）.val（）；
如果（s=“全部”）{
$（“tbody tr”，obj.show（）；
返回；
}
$（“tbody tr”，o
//this is the simple example with static data
data.filter(function(item) {return item["Category name"] === "rice";})

// this is a dynamic function that reads the selected value from the
// DOM and applies the filter accordingly
function filterSelection() {
   var e = document.getElementById("CategoryName");
   var selectedCategory = e.options[e.selectedIndex].value;
   var filteredData = data.filter(function(item) {return item["Category name"] === selectedCategory;})

   drawTable(filteredData); //you need to write the drawTable method
}