JavaScript编码练习：将有关名画的信息从Json文件加载到网页上

最新推荐文章于 2024-05-07 10:23:16 发布

kllo__

最新推荐文章于 2024-05-07 10:23:16 发布

阅读量312

点赞数

分类专栏： javascript 文章标签： javascript json linq

本文链接：https://blog.csdn.net/kllo__/article/details/123133838

版权

javascript 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

问题描述

json 文件：

[
  {
    "name": "The Starry Night",
    "year": "1889",
    "artist": "Vincent Van Gogh"
  },
  {
    "name": "The Scream",
    "year": "1893",
    "artist": "Edvard Munch"
  },
  {
    "name": "Guernica",
    "year": "1937",
    "artist": "Pablo Picasso"
  }
]

html:

<html>
 <head>
 </head>
 <body>
	<h2>Some famous paintings</h2>
	<table id="paintings">
    <tr>
        <th>Name</th>
        <th>Year</th>
        <th>Artist</th>
    </tr>
</table>
  
 </body>
</html>

解决方法

我的：

//Write-Your-Code-Here
fetch(
    "https://raw.githubusercontent.com/bpesquet/thejsway/master/resources/paintings.json"
)
.then(reponse => reponse.json())
.then(paintings => {
    paintings.forEach(painting =>{
        const tableElement = document.getElementById("paintings");
        const trElement = document.createElement("tr") ;
        const nameElement = ducument.createElement("th");
        const yearElement = document.createElement("th");
        const artistElement = document.createElement("th");
        yearElement.textContent = painting.year;
        artistElement.textContent = painting.artist;
        nameElement.textContent = painting.name;
        trElement.appendChild(nameElement);
        trElement.appendChild(yearElement);
        trElement.appendChild(artistElement);
        tableElement.appendChild(trElement);
    });
})
.catch(err =>
{
    console.log(err.message);
});

参考答案：

fetch(
  "https://raw.githubusercontent.com/bpesquet/thejsway/master/resources/paintings.json"
)
  .then(response => response.json()) // Access and return response's JSON content
  .then(paintings => {
    const paintingsElement = document.getElementById("paintings");
    paintings.forEach(painting => {
      const paintingElement = document.createElement("tr");
      paintingElement.innerHTML = `<td>
        ${painting.name}
        </td>
        <td>
        ${painting.year}
        </td>
        <td>
        ${painting.artist}
        </td>`;
      paintingsElement.appendChild(paintingElement);
    });
  })
  .catch(err => {
    console.error(err.message);
  });

kllo__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript编码练习：将有关名画的信息从Json文件加载到网页上

问题描述json 文件：[ { "name": "The Starry Night", "year": "1889", "artist": "Vincent Van Gogh" }, { "name": "The Scream", "year": "1893", "artist": "Edvard Munch" }, { "name": "Guernica", "year": "1937", "artist
复制链接

扫一扫