Javascript 使用JSON文件中的数据动态创建元素

Javascript 使用JSON文件中的数据动态创建元素,javascript,jquery,html,json,Javascript,Jquery,Html,Json,我试图用div填充我的页面,div中填充了我从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-

我试图用div填充我的页面,div中填充了我从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>
我有这个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);
    });
});
$(函数(){
$.getJSON(“recordData.json”,函数(数据){
var html='';
$。每个(数据、函数(键、值){
html+='';
html+='';
html+='';
html+=''+值。名称+'';
html+='

'+value.artist+'

'; html+=''; html+=''; }); $(“#recordDiv”).html(html); }); });

我将函数放置在正文中的脚本标记中,但页面上没有填充任何内容。有没有人能告诉我我是否遗漏了什么或者这里可能出了什么问题?另外,这是我的第一篇帖子,所以请放轻松:)

您的

$的第一行缺少一个括号。每个
块。请记住使用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;">';
            ...
$(函数(){
$.getJSON(“recordData.json”,函数(数据){
var html='';
$。每个(数据、函数(键、值){
html+='';
...

您的
$的第一行缺少一个括号。每个
块都有一个括号。请记住使用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;">';
            ...
$(函数(){
$.getJSON(“recordData.json”,函数(数据){
var html='';
$。每个(数据、函数(键、值){
html+='';
...

我在html文件中没有看到id为“recordDiv”的html元素

 $("#recordDiv").html(html);
确保html元素的id是正确的


另外,看起来您并不是在访问json文件“recordData”中的数组键。

我在html文件中没有看到id为“recordDiv”的html元素

 $("#recordDiv").html(html);
确保html元素的id是正确的


另外,看起来您并不是在访问json文件“recordData”中的数组键,抱歉。
是脚本标记所在的位置。请在循环中输入console.log,以确保它确实在控制台上运行,而不是在控制台上运行。这会让我感到困惑“jQuery.Deferred异常:$.getJSON不是函数类型错误:$.getJSON不是函数"。通过文档验证了语法,它看起来是正确的,但.git去掉了循环逻辑,并调试调用getJSON函数并打印文件数据,以查看文件是否在第一时间被读取。还要确保使用
数据访问数组。recordData
而不仅仅是
数据
道歉。
是脚本标记所在的位置。请在循环中输入console.log,以确保它实际运行于控制台,而不是控制台。它会向我抛出“jQuery.Deferred exception:$。getJSON不是函数类型错误:$。getJSON不是函数”。通过文档验证了语法,它看起来是正确的,但.git去掉了循环逻辑,并调试调用getJSON函数并打印文件数据,以查看文件是否首先被读取。还请确保使用
数据访问数组。recordData
而不仅仅是
数据
是否可以放置它在一个密码笔里,这样我就可以玩它了?现在什么都没有跳出来。你能不能把它放在一个密码笔里,这样我就可以玩它了?现在什么都没有跳出来。