Показать один JSON в разных идентификаторах - PullRequest
Новая
       8

Показать один JSON в разных идентификаторах

0 голосов
/ 24 марта 2020

Вот пример моего 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"
}

По сути, я бы хотел, чтобы данные за каждый день отображались в отдельном блоке / столбце.

Итак, у меня есть следующие настройки 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.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);

Таким образом, любой ОДИН скрипт / div / ID заполняет данные в правильный столбец. Я попытался добавить несколько getElementbyID к одному и тому же сценарию, и я смог получить только один для заполнения.

Затем я попробовал 2 скрипта, которые в основном были одинаковыми, за исключением изменения переменных "день". Это сработало (первый div показал несколько копий одних и тех же данных, а 2-й столбец был верным). А добавление 5 сценариев просто не сработало.

Как я могу получить данные в отдельные элементы div / column / ID?

1 Ответ

1 голос
/ 24 марта 2020

L oop через содержимое и преобразовать имя свойства в соответствующий идентификатор div. 

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