显示一个JSON到不同的ID

Question

这是我的示例 JSON:

{
  "Monday": [
    {
      "type": "menu_category",
      "recipe": "Soup"
    },
    {
      "type": "menu_item",
      "recipe": "Monday Soup 1"
    },
    {
      "type": "menu_item",
      "recipe": "Monday Soup 2"
    }
],
  "Tuesday": [
    {
      "type": "menu_category",
      "recipe": "Soup"
    },
    {
      "type": "menu_item",
      "recipe": "Tuesday Soup 1"
    },
    {
      "type": "menu_item",
      "recipe": "Tuesday Soup 2"
    }
],
... same format for "Wednesday", "Thursday", and "Friday"
}

基本上，我希望每天的数据显示在单独的 div/column 中。

因此，我对该数据进行了以下 HTML 设置：

             <div class="monday">
                <p class="weekday">Monday</p>
                <div id="outputMon"></div>
                <script src="scriptM.js"></script>
            </div>
            <div class="tuesday">
                <p class="weekday">Tuesday</p>
                <div id="outputTue"></div>
            <script src="script2.js"></script>
            </div>
            <div class="wednesday">
                <p class="weekday">Wednesday</p>
                <div id="outputWed"></div>
            <script src="scriptW.js"></script>
            </div>
            <div class="thursday">
                <p class="weekday">Thursday</p>
                <div id="outputThu"></div>
            <script src="scriptTh.js"></script>
            </div>
            <div class="friday">
                <p class="weekday">Friday</p>
                <div id="outputFri"></div>
            <script src="scriptF.js"></script>
            </div>

并且我有以下 js 脚本的不同版本来向 divs 提供数据：

var outputTue = document.getElementById('outputWed');
var ajaxhttp = new XMLHttpRequest();
var url = "URL_TO_JSON";

ajaxhttp.open("GET", url, true);
ajaxhttp.setRequestHeader("content-type","application/json");
ajaxhttp.onreadystatechange = function(){
    if(ajaxhttp.readyState == 4 && ajaxhttp.status == 200)
        {
            var jcontent= JSON.parse(ajaxhttp.responseText);
            console.log(jcontent);
            for(var i = 0 ; i < jcontent.Wednesday.length ; i++)
    {
        outputWed.innerHTML = outputWed.innerHTML + "<p class="+ jcontent.Wednesday[i].type + ">" + jcontent.Wednesday[i].recipe+"</p>";
    };
        }
}

ajaxhttp.send(null);

因此，任何单个 ONE script/div/ID 都会将数据填充到正确的列中。我尝试将多个 getElementbyID 添加到同一个脚本，但我只能填充一个。

然后我尝试了2个脚本，除了更改"day"变量外，它们基本上是一样的。那种工作（第一个 div 显示相同数据的多个副本，第二列是正确的）。并且添加 5 个脚本根本不起作用。

如何将数据放入单独的 divs/columns/IDs？

Answer 1

遍历内容，将属性名称转换为对应的div ID。

for (var day in jcontent) {
    if (day.match(/day$/)) {
        var divid = 'output' + day.substr(0, 3);
        var output = document.getElementById(divid);
        var newContent = jcontent[day].map(({type, recipe}) => `<p class="${type}">${recipe}</p>`).join("");
        output.innerHTML = newContent;
    }
}

显示一个JSON到不同的ID

Display one JSON into different IDs

html

javascript

json

getelementbyid