将一个 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/列中。

因此，我对该数据进行了以下 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 脚本的不同版本来向 div 提供数据：

var outputTue = document.getElementById('outputWed');

var ajaxhttp = new XMLHttpRequest();

var url = "URL_TO_JSON";

ajaxhttp.send(null);

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

然后我尝试了两个脚本，除了更改“day”变量之外，它们基本上是相同的。这种方法有效（第一个 div 显示了相同数据的多个副本，第二列是正确的）。添加 5 个脚本根本不起作用。

如何将数据放入单独的 div/列/ID 中？

Answer 1

循环遍历内容，并将属性名称转换为对应的div ID。for (var day in jcontent) {&nbsp; &nbsp; if (day.match(/day$/)) {&nbsp; &nbsp; &nbsp; &nbsp; var divid = 'output' + day.substr(0, 3);&nbsp; &nbsp; &nbsp; &nbsp; var output = document.getElementById(divid);&nbsp; &nbsp; &nbsp; &nbsp; var newContent = jcontent[day].map(({type, recipe}) => `<p class="${type}">${recipe}</p>`).join("");&nbsp; &nbsp; &nbsp; &nbsp; output.innerHTML = newContent;&nbsp; &nbsp; }}