Question

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

我现在要做的是拥有一个JSON数组，它包含未知数量的图例符号（由用户控制）并将其转换为html。最终产品看起来应该是这样的：

GF - GlutenFree，GFO - GlutenFree选项，Veg - Vegitarian，V - Vegan

用户可能需要任何数量的图例符号。

首先，我创建了一个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 menuUserInput = {
"legend": [
    {
        "symbol": "GF",
        "description": "GlutenFree"
    }, {
        "symbol": "GFO",
        "description": "GlutenFree option"
    }, {
        "symbol": "Veg",
        "description": "Vegitarian"
    }, {
        "symbol": "V",
        "description": "Vegan"
    }
]
};

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

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,
};

问题是这会产生以下结果：

GF - GlutenFree，GF - GlutenFree，GF - GlutenFree，GF - GlutenFree，

我不知道如何让它正确显示，因为我不知道用户想要多少个图例项目。

我已经搜索了很多但不幸的是我在这个领域的知识仍然很新。非常感谢那些花时间阅读并帮助一个菜鸟的人。

Answer 1

您需要以这种方式遍历menuUserInput.legend数组项目：

＆＃13;

var syntax = {
    "spanOpen": "<span>",
        "spanClose": "</span>",
        "hr": "<hr>",
        "pike": {
        "menu": {
             "legendOpen": "<p class='legend'>",
             "legendClose": "</p>",
             "legendIndicatorOpen": "<span class='legend-indicator'>",
             "legendIndicatorClose": "</span>",
            "legendIndicatorSpacer": " - "
        }
    }
};
var menuUserInput = {
    "legend": [{
        "symbol": "GF",
        "description": "GlutenFree",
    }, {
        "symbol": "GFO",
        "description": "GlutenFree option"
    }, {
        "symbol": "Veg",
        "description": "Vegitarian"
    }, {
        "symbol": "V",
        "description": "Vegan"
    }]
};
function createMenu(name) {
    var toReturn = '';
    if( typeof menuUserInput[name]!='undefined' ) {
        for(ind in menuUserInput[name]) {
          toReturn += syntax.pike.menu.legendOpen + syntax.pike.menu.legendIndicatorOpen + menuUserInput[name][ind].symbol + syntax.pike.menu.legendIndicatorClose + syntax.pike.menu.legendIndicatorSpacer + menuUserInput[name][ind].description + syntax.pike.menu.legendClose + '\n';  
        };
    };
    return toReturn;
};
var menuResponsive = createMenu('legend');
console.log( menuResponsive );
document.getElementById('result').innerHTML = menuResponsive;

＆＃13;

<div id="result"></div>

＆＃13;

同样在 Fiddle 。

也许您应该阅读有关JSON structure的更多信息。

Answer 2

我宁愿＆＃34;抽象＆＃34;多一点语法对象，以避免指定开始和结束标记。相反，我会说明应该是什么类型。

＆＃13;

/*
var syntax = {
   "spanOpen": "<span>",
   "spanClose": "</span>",
   "hr": "<hr>",
   "pike": {
     "menu": {
     "legendOpen": "<p class='legend'>",
     "legendClose": "</p>",
     "legendIndicatorOpen": "<span class='legend-indicator'>",
     "legendIndicatorClose": "</span>"
     }
   }
};
*/
var syntax2 = {
  
  groupItem:{
    type:'span',
    class:'pikeMenu'
   },
   divider:{
     type:'hr'
    },
    pike: {
      menu: {
        legendItem:{
          type:'p',
          class:'legend'
        },
        "legendIndicator":{
          type:'span',
          class:'legend-indicator'
        }
        
      }
      
    }
  
 };


var menuUserInput = {
  "legend": [
    {
      "symbol": "GF",
      "description": "GlutenFree"
    }, {
      "symbol": "GFO",
      "description": "GlutenFree option"
    }, {
      "symbol": "Veg",
      "description": "Vegitarian"
    }, {
      "symbol": "V",
      "description": "Vegan"
    }
  ]
};

window.onload = function () {
  var body = document.getElementsByTagName('body')[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
  };
  */

  //crete the container
  var groupContainer = document.createElement(syntax2.groupItem.type);
  groupContainer.textContent = "menu container";
  groupContainer.className = syntax2.groupItem.class;
  body.appendChild(groupContainer);
  var dividerItem = document.createElement(syntax2.divider.type);
  groupContainer.appendChild(dividerItem);

  for(var key in menuUserInput.legend){
    if(menuUserInput.legend.hasOwnProperty(key)){
      var legendItem = menuUserInput.legend[key];
      console.log(legendItem);
      var legendElement = document.createElement(syntax2.pike.menu.legendItem.type);
      legendElement.className = syntax2.pike.menu.legendItem.class;
      legendElement.textContent = legendItem.description;

      var legendIndicatorElement = document.createElement(syntax2.pike.menu.legendIndicator.type);
      legendIndicatorElement.className = syntax2.pike.menu.legendIndicator.class;
      legendIndicatorElement.textContent = legendItem.symbol;
      legendElement.appendChild(legendIndicatorElement);

      groupContainer.appendChild(legendElement);



    }
  }


}

＆＃13;

.pikeMenu{
            font-family: sans-serif;
            display: inline-block;
            border: 1px solid lightgrey;
            border-radius: 10px;
            padding: 10px;
        }
        .pikeMenu .legend{
            border-bottom: 1px solid gray;
            cursor: pointer;

        }
        .pikeMenu .legend:hover{
            background-color: azure;
        }
        .pikeMenu .legend .legend-indicator{
            float: left;
            color: lightblue;
        }
        .legend-indicator::after{
            display: inline-block;
            content: "-";
            margin-left: 4px;
            margin-right: 4px;
        }

＆＃13;

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

2 个答案: