How to fetch from this JSON file?-CodePudding

here's the JSON file

[{
"Pizza": [
  {
    "title": "cheese lovers",
    "photo": "./cl.jpg"
  },
  {
    "title": "checken ranch",
    "photo": "./cr.jpg"
  }
],
"Pasta": [
  {
    "title": "spaghetti",
    "photo": "./sp.jpg"
  },
  {
    "title": "lasagna",
    "photo": "./la.jpg"
  }
],
"Asian": [
  {
    "title": "sushi",
    "photo": "sushi.jpg"
  },
  {
    "title": "chicken sweet & sour",
    "photo": "css.jpg"
  }
],
"Dessert": [
  {
    "title": "cheesecake",
    "photo": "cc.jpg"
  },
  {
    "title": "ice ceam",
    "photo": "ic.jpg"
  }
],
"Drinks": [
  {
    "title": "tea",
    "photo": "tea.jpg"
  },
  {
    "title": "orange juice",
    "photo": "oj.jpg"
  }
]

} ]

What I wanna do is using the fetch API the categories would be listed in a menu, and the inside content would be shown in other HTML elements. When I use a normal fetch API function I can see everything in the console, but when I try to render the JSON data it only shows [object object], any deeper levels give me errors. So is there a different way I can fetch the data or the JSON file itself needs editing?

CodePudding user response：

You cannot render an object directly into HTML, for example if you want to render your fetched API into HTML Lists you can do it like this:

const a = [{
  "Pizza": [{
      "title": "cheese lovers",
      "photo": "./cl.jpg"
    },
    {
      "title": "checken ranch",
      "photo": "./cr.jpg"
    }
  ],
  "Pasta": [{
      "title": "spaghetti",
      "photo": "./sp.jpg"
    },
    {
      "title": "lasagna",
      "photo": "./la.jpg"
    }
  ],
  "Asian": [{
      "title": "sushi",
      "photo": "sushi.jpg"
    },
    {
      "title": "chicken sweet & sour",
      "photo": "css.jpg"
    }
  ],
  "Dessert": [{
      "title": "cheesecake",
      "photo": "cc.jpg"
    },
    {
      "title": "ice ceam",
      "photo": "ic.jpg"
    }
  ],
  "Drinks": [{
      "title": "tea",
      "photo": "tea.jpg"
    },
    {
      "title": "orange juice",
      "photo": "oj.jpg"
    }
  ]
}];
list = document.getElementById("ul"); //get access to your ul tag

for (const [key, value] of Object.entries(a[0])) { //a[0] since you have the first layer is an array with one item

  let li = document.createElement("li"); // you map through your object and create an li tag

  li.innerText = key; // add the key text to the li ("Pizza", "Pasta", "Asian" ...)

  list.appendChild(li); // add the list item to the list

  let smallerList = document.createElement("ul"); //create another list (nested list)

  li.appendChild(smallerList); // add the nested list under the first list item

  value.forEach((element) => { //since its an array we map through it using array.forEach which means element is {"title": some data, "photo": some data}

    for (const [key2, value2] of Object.entries(element)) { //so we find that it is another object so we map through it

      let smallerLi = document.createElement("li"); // create another list item

      smallerLi.innerText = `${key2}: ${value2}`; // set the text of the list item to for example ("title": "orange juice")

      smallerList.appendChild(smallerLi); //add the smaller list item to the nested list

    }
  });
}

<!DOCTYPE html>
<html>
<body>
  <ul id="ul">
  </ul>
</body>
</html>

CodePudding user response：

You cannot console.log an object directly. One quick solution to debug (I assume you're trying to debug using console.log) is this

console.log(JSON.stringify(data).

Another options for quick inspection are console.table(data) for table formatting or console.dir(data) to see all properties of your object.