javascript - 使用 JSON 文件中的数据动态创建元素
问题描述
我正在尝试用我从我的 recordData.json 文件中收集的数据填充我的页面。
JSON 文件中的每条记录都应具有如下元素:
<div class="card text-center bg-dark cardBorder" style="width: 18rem;">
<img class="card-img-top" src="images/1984.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">1984</h5>
<p class="card-text">Van Halen</p>
</div>
</div>
JSON 文件格式如下:
"recordData": [
{
"name": "Let's Rock",
"artist": "The Black Keys",
"genre": "Rock",
"imagePath": "images/Let's Rock.jpg"
},
{
"name": "Brothers",
"artist": "The Black Keys",
"genre": "Rock",
"imagePath": "images/Brothers.jpg"
}, //and so on
我有这个 jQuery 函数:
$(function() {
$.getJSON("recordData.json", function(data) {
var html = '';
$.each(data, function(key, value) {
html += '<div class="card text-center bg-dark cardBorder" style="width: 18rem;">';
html += '<img class="card-img-top" src="'+value.imagePath+'" alt="Card image cap">';
html += '<div class="card-body">';
html += '<h5 class="card-title">'+value.name+'</h5>';
html += '<p class="card-text">'+value.artist+'</p>';
html += '</div>';
html += '</div>';
});
$("#recordDiv").html(html);
});
});
我将函数放在正文的脚本标记中,但页面上没有填充任何内容。如果我遗漏了什么或者这里可能出了什么问题,谁能告诉我?PS这是我的第一篇文章,所以请放轻松:)
解决方案
您在$.each
块的第一行缺少括号。记得使用 chrome / browser devtools 控制台来快速发现像这样的语法错误。
$(function() {
$.getJSON("recordData.json", function(data) {
var html = '';
$.each(data, function(key, value) {
html += '<div class="card text-center bg-dark cardBorder" style="width: 18rem;">';
...
推荐阅读
- html - 如何找到其中没有
- php - 在 PHP PCRE 语法中,如何指定多码点 Unicode 字符/“表情符号”?
- python - 如何从不同的仓库激活 python 虚拟环境?
- c# - ML Agents 中的课程学习 - YAML 配置
- java - Spring Boot:Kafka 健康指标
- twitter-bootstrap - 移动版上的 Bootstrap4 Navbar 折叠按钮没有响应
- r - 不。geom_point 的匹配值
- c++ - 通过 const 引用传递指针
- android - 当我清理我的应用程序时,android studio 服务不起作用
- node.js - 如何在 MongoDB 中插入列表并插入嵌套的嵌入列表