Javascript 将长度未知的JSON用户输入转换为格式正确的html？

我是web开发新手，正在尝试学习如何将JSON内容转换为HTML结构。在这个项目中，我试图创建一个可以通过JSON文件编辑的餐厅菜单。该项目代号为“派克”，用于回答有关变量命名的任何问题

我现在要做的是使用一个JSON数组来保存未知数量的图例符号（由用户控制），并将其转换为html。最终产品应如下所示：

GF-无麸质，GFO-无麸质选项，素食主义者，素食主义者

其中可能有用户想要的任意数量的图例符号

首先，我创建了一个JSON数组，它将一些html语法分配给变量：

var syntax = {
"spanOpen": "<span>",
"spanClose": "</span>",
"hr": "<hr>",
"pike": {
    "menu": {
        "legendOpen": "<p class='legend'>",
        "legendClose": "</p>",
        "legendIndicatorOpen": "<span class='legend-indicator'>",
        "legendIndicatorClose": "</span>"
    }
} 
};

然后我创建了一个变量，将前两个变量放在一起：

var menuResponsive = {
"legend": syntax.pike.menu.legendOpen + new Array(menuUserInput.legend.length + 1).join(syntax.spanOpen + menuUserInput.legend[0].symbol + syntax.spanClose + " - " + menuUserInput.legend[0].description + ", ") + syntax.pike.menu.legendClose,
};

问题在于，这会产生以下结果：

无麸质，无麸质，无麸质，无麸质，无麸质

我不知道如何正确显示，因为我不知道用户需要多少图例项

---

我已经搜索了很多地方，但不幸的是我在这个领域的知识还是很新的。非常感谢所有花时间阅读本文并帮助一个noob摆脱困境的人

您需要通过以下方式循环您的

menuUserInput.legend

数组项：

var语法={
“打开”：“，
“spanClose”：“，
“hr”：“
”，
“梭子鱼”：{
“菜单”：{
“Legonen”：“
”，
“传奇关闭”：“
”，
“LegendIndicatorPropen”：“，
“legendIndicatorClose”：“，
“legendIndicatorSpacer”：“-”
}
}
};
变量menuUserInput={
“传奇”：[{
“符号”：“GF”，
“说明”：“无麸质”，
}, {
“符号”：“GFO”，
“说明”：“无麸质选项”
}, {
“符号”：“蔬菜”，
“说明”：“素食主义者”
}, {
“符号”：“V”，
“说明”：“素食主义者”
}]
};
函数createMenu（名称）{
var toReturn=''；
if（菜单输入[名称]的类型！='undefined'）{
for（菜单输入[名称]中的索引）{
toReturn+=syntax.pike.menu.legendIndicatorSpacer+syntax.pike.menu.LegendIndicatorRopen+menuUserInput[name][ind].symbol+syntax.pike.menu.legendIndicatorClose+syntax.pike.menu.legendIndicatorSpacer+menuUserInput[name][ind]。description+syntax.pike.menu.legendClose+'\n'；
};
};
回归回归；
};
var menureresponsive=createMenu（“图例”）；
console.log（菜单响应）；
document.getElementById（'result'）.innerHTML=menureResponsive
我宁愿对syntax对象多“抽象”一点，以避免指定开始和结束标记。相反，我会指出应该是什么类型


/*
变量语法={
“打开”：“，
“spanClose”：“，
“hr”：“
”，
“梭子鱼”：{
“菜单”：{
“Legonen”：“
”，
“传奇关闭”：“
”，
“LegendIndicatorPropen”：“，
“legendIndicatorClose”：”
}
}
};
*/
变量syntax2={
分组项目：{
类型：'span'，
类别：'pikeMenu'
},
分隔器：{
类型：'hr'
},
派克：{
菜单：{
传奇项目：{
类型：'p'，
类别：'legend'
},
“传奇指标”：{
类型：'span'，
类别：'legend-indicator'
}
}
}
};
变量menuUserInput={
“传奇”：[
{
“符号”：“GF”，
“说明”：“无麸质”
}, {
“符号”：“GFO”，
“说明”：“无麸质选项”
}, {
“符号”：“蔬菜”，
“说明”：“素食主义者”
}, {
“符号”：“V”，
“说明”：“素食主义者”
}
]
};
window.onload=函数（）{
var body=document.getElementsByTagName（'body'）[0]；
/*
变量菜单响应={
“图例”：syntax.pike.menu.legonen+
新数组（menuUserInput.legend.length+1）。联接（syntax.spanOpen+menuUserInput.legend[0]。symbol+syntax.spanClose+“-”+menuUserInput.legend[0]。描述+”，”）+syntax.pike.menu.legendClose
};
*/
//在容器里
var groupContainer=document.createElement（syntax2.groupItem.type）；
groupContainer.textContent=“菜单容器”；
groupContainer.className=syntax2.groupItem.class；
body.appendChild（groupContainer）；
var dividerItem=document.createElement（syntax2.divider.type）；
groupContainer.appendChild（dividerItem）；
for（menuUserInput.legend中的变量键）{
if（menuUserInput.legend.hasOwnProperty（键））{
var legendItem=menuUserInput.legend[key]；
console.log（legendItem）；
var legendeElement=document.createElement（syntax2.pike.menu.legendeItem.type）；
legendElement.className=syntax2.pike.menu.legendItem.class；
legendElement.textContent=legendItem.description；
var legendIndicatorRelation=document.createElement（syntax2.pike.menu.legendIndicator.type）；
LegendIndicatorRelation.className=syntax2.pike.menu.legendIndicator.class；
LegendIndicatorRelation.textContent=legendItem.symbol；
legendElement.appendChild（legendIndicatorRelation）；
groupContainer.appendChild（legendeElement）；
}
}
}
.pikeMenu{
字体系列：无衬线；
显示：内联块；
边框：1px纯色浅灰色；
边界半径：10px；
填充：10px；
}
.pikeMenu.图例{
边框底部：1px纯色灰色；
光标：指针；
}
.pikeMenu.图例：悬停{
背景颜色：天蓝；
}
.pikeMenu.图例.图例指示器{
浮动：左；
颜色：浅蓝色；
}
.图例指示器：：之后{
显示：内联块；
内容：“-”；
左边距：4倍；
保证金权利：4px；
}
您正在使用
图例[0]
处理所有内容。你需要扭动一下
var menuResponsive = {
"legend": syntax.pike.menu.legendOpen + new Array(menuUserInput.legend.length + 1).join(syntax.spanOpen + menuUserInput.legend[0].symbol + syntax.spanClose + " - " + menuUserInput.legend[0].description + ", ") + syntax.pike.menu.legendClose,
};