Пытаюсь использовать данные JSON для создания кнопок в HTML Я все пробовал - PullRequest
Новая
       50

Пытаюсь использовать данные JSON для создания кнопок в HTML Я все пробовал

0 голосов
/ 14 июля 2020

Я пытаюсь создать интерактивное меню из JSON данных, поэтому в конечном итоге я хочу, чтобы каждый элемент был представлен в виде кнопки. У меня большие проблемы с преобразованием данных в кнопку HTML.

Данные JSON проверены. Я не буду публиковать все это, потому что это более 1000 строк, но, похоже, это не является частью проблемы.

Ниже моя последняя попытка использовать appendChild () и a для l oop: 

breakfast = {
    "Breakfast": [{
          "Pancakes": [{
              "item": "1 Pancake",
              "price": 2.00,

              "add-ons": {
                "blueberries": {
                  "add-on price": 0.50
                },
                "chocolate chips": {
                  "add-on price": 0.50
                },
                "M&Ms": {
                  "add-on price": 0.50
                },
                "Strawberry Topping": {
                  "add-on price": 0.50
                }
              }
            },
            {
              "item": "2 Pancakes",
              "price": 3.00,

              "add-ons": {
                "blueberries": {
                  "add-on price": 0.50
                },
                "chocolate chips": {
                  "add-on price": 0.50
                },
                "M&Ms": {
                  "add-on price": 0.50
                },
                "Strawberry Topping": {
                  "add-on price": 0.50
                }
              }
            },
            {
              "item": "3 Pancakes",
              "price": 4.00,

              "add-ons": {
                "blueberries": {
                  "add-on price": 0.50
                },
                "chocolate chips": {
                  "add-on price": 0.50
                },
                "M&Ms": {
                  "add-on price": 0.50
                },
                "Strawberry Topping": {
                  "add-on price": 0.50
                }
              }
            },
            {
              "item": "4 Pancakes",
              "price": 5.00,

              "add-ons": {
                "blueberries": {
                  "add-on price": 0.50
                },
                "chocolate chips": {
                  "add-on price": 0.50
                },
                "M&Ms": {
                  "add-on price": 0.50
                },
                "Strawberry Topping": {
                  "add-on price": 0.50
                }
              }
            }
          ],

        }

//Snippet of massive JSON data

menuStart = document.getElementById("menuStart") //where the menu is placed on the page
function initiateBreakfast() {
  for (i = 0; i < data.length; i++) {
    var myJSON = JSON.stringify(breakfast);
    var node = document.createElement("BUTTON");
    var textnode = document.createTextNode(myJSON[i]);
    node.appendChild(textnode);
    menuStart.appendChild(node);
    console.log(breakfast);
  }
}

Спасибо за любую помощь или понимание.

...