在 html 页面上显示 api 响应

Question

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>JSON Test</title>
</head>
<body>
   <h1>Hello World</h1>
   <div id="myData"></div>
   <script>
       fetch('http://localhost:3000/api/product/1234567')
           .then(function (response) {
               return response.json();
           })
           .then(function (data) {
               appendData(data);
           })
           .catch(function (err) {
               console.log('error: ' + err);
           });
       function appendData(data) {
           console.log(data)
           var mainContainer = document.getElementById("myData");
           for (let key in data) {
               var div = document.createElement("div");
               div.innerHTML = 'name: ' + data[key] + 'label' + data[key];
               mainContainer.appendChild(div);
           }
       }
   </script>
</body>
</html>

尝试获取 json 响应并将其显示在 html 页面上。 它给了我一个错误：SyntaxError: Unexpected end of JSON input。 我想我在这里可能会获得一些关于如何解决这个问题以及为什么会发生这种情况的帮助。 谢谢你。

编辑：

我在控制台上得到的响应：

{ 产品：1234567，名称：'TV'，salePrice：149.99 }

Answer 1

主要原因是您的响应不是 JSON 格式，这可能是因为获得了一些非 json 格式的响应。 请发布示例 JSON 响应格式以更好地理解。

在 html 页面上显示 api 响应

问题描述

1 个解决方案

解决方案1
1 2020-11-04 16:16:06

在 html 页面上显示 api 响应

问题描述

1 个解决方案

解决方案1 1 2020-11-04 16:16:06

解决方案1
1 2020-11-04 16:16:06