Question

如何将JSON文件中的数据插入HTML？我有一个包含来自Facebook的评论的JSON数据文件，如何将它们导出到HTML div元素，每个评论都位于其自己的div元素中？以下是我从Facebook Graph API生成的JSON数据，这些数据是我在facebook页面上的评论。

现在，我要做的就是使用JSON数据，并将所有评论从我的Facebook页面放到我的网站上。我想从JSON文件中获取review_text和created_time，并为每个评论创建一个div，该评论的div应该包含review_text和created_time。

部分JSON：

{
   "data": [
      {
         "has_review": true,
         "review_text": "Mng sum zadovolna se bese \ud83d\udc4c\ud83c\udffc",
         "recommendation_type": "positive",
         "created_time": "December 6, 2018",
         "open_graph_story": {
            "id": "1924663150981821",
            "message": "Mng sum zadovolna se bese \ud83d\udc4c\ud83c\udffc",
            "start_time": "December 6, 2018",
            "type": "sellers.rates",
            "data": {
               "recommendation_type": "positive",
               "review_text": "Mng sum zadovolna se bese \ud83d\udc4c\ud83c\udffc",
               "is_hidden": false,
               "language": "mk",
               "seller": {
                  "id": "2075976265961628",
                  "title": "My Spa Home & Office Massage - \u041c\u0430\u0441\u0430\u0436\u0430 \u0432\u043e \u0432\u0430\u0448\u0438\u043e\u0442 \u0434\u043e\u043c \u0438\u043b\u0438 \u0440\u0430\u0431\u043e\u0442\u043d\u043e \u043c\u0435\u0441\u0442\u043e",
                  "type": "place",
                  "url": "https://www.facebook.com/myspamk/"
               },
               "has_review_update": false
            }
         },
         "has_rating": false
      },
      {
         "has_review": true,
         "review_text": "\u041e\u0434\u043b\u0438\u0447\u043d\u043e \u0438\u0441\u043a\u0443\u0441\u0442\u0432\u043e. \u0420\u0435\u0442\u043a\u043e \u0441\u0430\u043a\u0430\u043c \u043c\u0430\u0441\u0430\u0436\u0438, \u0437\u0430\u0448\u0442\u043e \u043c\u0438 \u0441\u0435 \u043d\u0435\u043f\u0440\u0438\u0458\u0430\u0442\u043d\u0438 \u0447\u0435\u0441\u0442\u043e, \u043d\u043e, \u043e\u0432\u0430 \u0442\u043e\u043f\u043b\u043e \u0433\u043e \u043f\u0440\u0435\u043f\u043e\u0440\u0430\u0447\u0443\u0432\u0430\u043c! \u0411\u0440\u0430\u0432\u043e \u0434\u0435\u0447\u043a\u0438. \u2764",
         "recommendation_type": "positive",
         "created_time": "December 5, 2018",
         "open_graph_story": {
            "id": "1145960125557706",
            "message": "\u041e\u0434\u043b\u0438\u0447\u043d\u043e \u0438\u0441\u043a\u0443\u0441\u0442\u0432\u043e. \u0420\u0435\u0442\u043a\u043e \u0441\u0430\u043a\u0430\u043c \u043c\u0430\u0441\u0430\u0436\u0438, \u0437\u0430\u0448\u0442\u043e \u043c\u0438 \u0441\u0435 \u043d\u0435\u043f\u0440\u0438\u0458\u0430\u0442\u043d\u0438 \u0447\u0435\u0441\u0442\u043e, \u043d\u043e, \u043e\u0432\u0430 \u0442\u043e\u043f\u043b\u043e \u0433\u043e \u043f\u0440\u0435\u043f\u043e\u0440\u0430\u0447\u0443\u0432\u0430\u043c! \u0411\u0440\u0430\u0432\u043e \u0434\u0435\u0447\u043a\u0438. \u2764",
            "start_time": "December 5, 2018",
            "type": "sellers.rates",
            "data": {
               "recommendation_type": "positive",
               "review_text": "\u041e\u0434\u043b\u0438\u0447\u043d\u043e \u0438\u0441\u043a\u0443\u0441\u0442\u0432\u043e. \u0420\u0435\u0442\u043a\u043e \u0441\u0430\u043a\u0430\u043c \u043c\u0430\u0441\u0430\u0436\u0438, \u0437\u0430\u0448\u0442\u043e \u043c\u0438 \u0441\u0435 \u043d\u0435\u043f\u0440\u0438\u0458\u0430\u0442\u043d\u0438 \u0447\u0435\u0441\u0442\u043e, \u043d\u043e, \u043e\u0432\u0430 \u0442\u043e\u043f\u043b\u043e \u0433\u043e \u043f\u0440\u0435\u043f\u043e\u0440\u0430\u0447\u0443\u0432\u0430\u043c! \u0411\u0440\u0430\u0432\u043e \u0434\u0435\u0447\u043a\u0438. \u2764",
               "is_hidden": false,
               "language": "mk",
               "seller": {
                  "id": "2075976265961628",
                  "title": "My Spa Home & Office Massage - \u041c\u0430\u0441\u0430\u0436\u0430 \u0432\u043e \u0432\u0430\u0448\u0438\u043e\u0442 \u0434\u043e\u043c \u0438\u043b\u0438 \u0440\u0430\u0431\u043e\u0442\u043d\u043e \u043c\u0435\u0441\u0442\u043e",
                  "type": "place",
                  "url": "https://www.facebook.com/myspamk/"
               },
               "has_review_update": false
            }
         },
         "has_rating": false
      },

Answer 1

您可以使用此功能：

const json2Html = json => json.data.map( obj => `<div>
        <p>${obj.created_time}</p>
        <p>${obj.review_text}</p>
    </div>`)

如何显示JSON数据到HTML猫头鹰轮播？

1 个答案: