如何在 HTML 中收集和解析 JSON 数据答案

【问题标题】：How to Gather & Parse JSON Data in HTML如何在 HTML 中收集和解析 JSON 数据
【发布时间】：2020-03-02 00:45:39
【问题描述】：

我最终希望创建一个 HTML 文件来完成以下任务。关键是，我需要它包含在 HTML sn-p/file 中。

对后端 CMS（即：Drupal）进行 GET api 调用。此 api 调用返回特定内容项的以下 JSON 数据：

{
    "jsonapi": {
        "version": "1.0",
        "meta": {
            "links": {
                "self": {
                    "href": "http://jsonapi.org/format/1.0/"
                }
            }
        }
    },
    "data": {
        "type": "node--espot_html",
        "id": "fbaab7dd-09c2-4aa0-852d-4b9462074a45",
        "attributes": {
            "drupal_internal__nid": 1,
            "drupal_internal__vid": 11,
            "langcode": "en",
            "revision_timestamp": "2019-10-31T13:29:29+00:00",
            "revision_log": null,
            "status": true,
            "title": "Razor Hero Image",
            "created": "2019-10-28T16:24:20+00:00",
            "changed": "2019-10-31T13:29:29+00:00",
            "promote": true,
            "sticky": false,
            "default_langcode": true,
            "revision_translation_affected": true,
            "path": {
                "alias": "/razor-hero",
                "pid": 1,
                "langcode": "en"
            },
            "body": {
                "value": "<div class=\"jns-hero-image jns-hero-image-message-left\" id=\"hero_slideshow\"><img alt=\"Clean Shave\" data-entity-type=\"file\" data-entity-uuid=\"fbc875d0-ef17-4813-981c-22a29e42c44f\" src=\"/sites/default/files/inline-images/dont-shave-2.jpg\" />\r\n<div class=\"grid-container\">\r\n<div class=\"grid-x grid-padding-x\">\r\n<div class=\"small-12 medium-8 cell hero-message\">\r\n<div>\r\n<h1 class=\"text-hero text-hero-left\">Get a Much Better<br />\r\nShave</h1>\r\n\r\n<p>Fewer things look and feel better than a clean shave!</p>\r\n<a>SHOP NOW</a></div>\r\n</div>\r\n</div>\r\n</div>\r\n</div>\r\n",
                "format": "full_html",
                "processed": "<div class=\"jns-hero-image jns-hero-image-message-left\" id=\"hero_slideshow\"><img alt=\"Clean Shave\" data-entity-type=\"file\" data-entity-uuid=\"fbc875d0-ef17-4813-981c-22a29e42c44f\" src=\"/sites/default/files/inline-images/dont-shave-2.jpg\" /><div class=\"grid-container\">\n<div class=\"grid-x grid-padding-x\">\n<div class=\"small-12 medium-8 cell hero-message\">\n<div>\n<h1 class=\"text-hero text-hero-left\">Get a Much Better<br />\nShave</h1>\n\n<p>Fewer things look and feel better than a clean shave!</p>\n<a>SHOP NOW</a></div>\n</div>\n</div>\n</div>\n</div>\n",
                "summary": ""
            }
        },
        "relationships": {
            "node_type": {
                "data": {
                    "type": "node_type--node_type",
                    "id": "837a5cbe-f8fe-4c03-a613-2092dff1168e"
                },
                "links": {
                    "self": {
                        "href": "http://localhost:4700/jsonapi/node/espot_html/fbaab7dd-09c2-4aa0-852d-4b9462074a45/relationships/node_type?resourceVersion=id%3A11"
                    },
                    "related": {
                        "href": "http://localhost:4700/jsonapi/node/espot_html/fbaab7dd-09c2-4aa0-852d-4b9462074a45/node_type?resourceVersion=id%3A11"
                    }
                }
            },
            "revision_uid": {
                "data": {
                    "type": "user--user",
                    "id": "c0d80edb-325a-4ad7-9be3-bc9dc32ed878"
                },
                "links": {
                    "self": {
                        "href": "http://localhost:4700/jsonapi/node/espot_html/fbaab7dd-09c2-4aa0-852d-4b9462074a45/relationships/revision_uid?resourceVersion=id%3A11"
                    },
                    "related": {
                        "href": "http://localhost:4700/jsonapi/node/espot_html/fbaab7dd-09c2-4aa0-852d-4b9462074a45/revision_uid?resourceVersion=id%3A11"
                    }
                }
            },
            "uid": {
                "data": {
                    "type": "user--user",
                    "id": "c0d80edb-325a-4ad7-9be3-bc9dc32ed878"
                },
                "links": {
                    "self": {
                        "href": "http://localhost:4700/jsonapi/node/espot_html/fbaab7dd-09c2-4aa0-852d-4b9462074a45/relationships/uid?resourceVersion=id%3A11"
                    },
                    "related": {
                        "href": "http://localhost:4700/jsonapi/node/espot_html/fbaab7dd-09c2-4aa0-852d-4b9462074a45/uid?resourceVersion=id%3A11"
                    }
                }
            }
        },
        "links": {
            "self": {
                "href": "http://localhost:4700/jsonapi/node/espot_html/fbaab7dd-09c2-4aa0-852d-4b9462074a45?resourceVersion=id%3A11"
            }
        }
    },
    "links": {
        "self": {
            "href": "http://localhost:4700/jsonapi/node/espot_html/fbaab7dd-09c2-4aa0-852d-4b9462074a45"
        }
    }
}

然后我正在寻找要解析的 JSON 响应以提取“值”下的唯一数据：对象。
我需要删除转义字符
最终结果应该是 HTML（如下所示）在浏览器中呈现：

<div class="jns-hero-image jns-hero-image-message-left" id="hero_slideshow"><img alt="Clean Shave" data-entity-type="file" data-entity-uuid="fbc875d0-ef17-4813-981c-22a29e42c44f" src="/sites/default/files/inline-images/dont-shave-2.jpg" /><div class="grid-container"><div class="grid-x grid-padding-x"><div class="small-12 medium-8 cell hero-message"><div><h1 class="text-hero text-hero-left">Get a Much Better<br />Shave</h1><p>Fewer things look and feel better than a clean shave!</p><a>SHOP NOW</a></div></div></div></div></div>"

如果处理成功，网页上应显示以下内容： Screenshot if image rendered via HTML
这是我尝试过的 HTML。我为打破礼仪道歉，我不知道这会被认为是这样。在我的浏览器控制台中，它告诉我 forEach 不是有效函数或此响应。

'<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Ghibli App</title>

    <link href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet" />
    <!-- <link href="style.css" rel="stylesheet" /> -->
  </head>
 

  <body>
    <div id="root"></div>
     <script>
	 const app = document.getElementById('root');

const container = document.createElement('div');
container.setAttribute('class', 'container');

app.appendChild(logo);
app.appendChild(container);

var request = new XMLHttpRequest();
request.open('GET', 'http://localhost:4700/jsonapi/node/espot_html/fbaab7dd-09c2-4aa0-852d-4b9462074a45', true);
request.onload = function () {

 // Begin accessing JSON data here
 var data = JSON.parse(this.response);
 if (request.status >= 200 && request.status < 400) {
   data.forEach(value => {
     const card = document.createElement('div');
     card.setAttribute('class', 'card');

     const h1 = document.createElement('h1');
     h1.textContent = valuable.title;

     const p = document.createElement('p');
     value.description = value.description.substring(0, 300);
     p.textContent = `${value.description}...`;

     container.appendChild(card);
     card.appendChild(h1);
     card.appendChild(p);
   });
 } else {
   const errorMessage = document.createElement('marquee');
   errorMessage.textContent = `Gah, it's not working!`;
   app.appendChild(errorMessage);
 }
}

request.send();
	 </script>
  </body>
</html>'

【问题讨论】：

所以，您非常清楚自己想要什么，这很好。不清楚的是你自己试图做什么。虽然在 Stack Overflow 上回答问题的志愿者可能会花费时间来创建您想要的应用程序，但要求他们这样做似乎有点不尊重。请拨打tour 并阅读How to Ask 以了解如何在 Stack Overflow 上获得愉快的体验。
您是否可以尝试使用responseText 而不是response 作为您的数据，因为您没有设置JSON 数据类型。 var data = JSON.parse(this.responseText);?
这是我在浏览器中加载控制台时显示的内容：json_backup.html:31 Uncaught TypeError: data.forEach is not a function at XMLHttpRequest.request.onload

标签： javascript html json parsing drupal-8

【解决方案1】：

这最终产生了我想要产生的最终结果：

<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
<script>
const app = document.getElementById('root');

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
  
    let obj = JSON.parse(this.responseText);
	console.log(obj.data.attributes.body.value)
	app.innerHTML = obj.data.attributes.body.value.replace('src="/sites','src="http://localhost:4700/sites'); 
  }
};
xmlhttp.open("GET", "http://localhost:4700/jsonapi/node/espot_html/fbaab7dd-09c2-4aa0-852d-4b9462074a45", true);
xmlhttp.send();

</script>
</body>
</html>

【讨论】：