如何将数据从JSON注入HTML

我正在研究一个小项目来读取JSON文件并将每个对象插入到已经存在的HTML中的div中。所以如果你检查下面，我需要JSON文件中的id和class显示在这个顺序下:

"id": external-events-list "class": fc-event fc-h-event.fc-daygrid-event.fc-daygrid-block-event.fc-event-main

问题是，我不能让它工作到我想要的地方。请检查JS代码:

<script>
$(document).ready(function () {
$.getJSON("resources.json", 
function (data) {
var employee = '';
$.each(data, function (key, value) {
//CONSTRUCTION OF ROWS HAVING
// DATA FROM JSON OBJECT
employee += '<tr>';
employee += '<td>' +  
value.id + '</td>';  // THe ID is showing up - So like this it works!
employee +=  '<div class="fc-event-main">' +  '<div class="fc-event.fc-h-event.fc-daygrid-event.fc-daygrid-block-event">' +
value.title + '</div>' + '</div>'; //But this Doesn't WORK! 
});

//INSERTING ROWS INTO TABLE 
$('.fc-event-main').append(employee);
});
});
</script>

下面是HTML代码:

<body>
<div id='wrap'>
<div id='external-events'>
<div id='external-events-list'>
<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
<div class='fc-event-main'>Employee 1</div>
</div>
<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
<div class='fc-event-main'>Employee 2</div>
</div>

</div>
</body>
</html>

JSON代码是这样的:

[
{
"id": "1",
"title": "John",
},
{
"id": "2",
"title": "Tom",
}
]

很难说您到底想要这个脚本做什么，因为您混合了带有div标记的表格单元格和每个添加了class标记的div列表。有许多小错误。以下是我的解释。看一看。注意，我使用了反引号和模板文字来显示数据。这使得代码更清晰，更容易阅读。

$(document).ready(function() {
//  $.getJSON("resources.json",
//   function(data) {
let data = [{
"id": "1",
"title": "John",
},
{
"id": "2",
"title": "Tom",
}
]
let employee = '';
$.each(data, function(key, value) {
employee += `<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
<div class='fc-event-main'>Employee ${key+1}</div>
<table><tr><td>${value.id}</td>
<td><div class="fc-event-main">
<div class="fc-event.fc-h-event.fc-daygrid-event.fc-daygrid-block-event">${value.title}</div>
</div></td></tr></table>
</div>`;
});
//INSERTING ROWS INTO TABLE 
$('#external-events-list').append(employee);
//  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='wrap'>
<div id='external-events'>
<div id='external-events-list'>
</div>
</div>
</div>

如果您想要一些更健壮和抽象的东西，您可能会发现这很有趣，根据需要应用于样式/类。

如果你想要添加和删除项目，你应该在对象上工作，然后运行渲染函数来渲染事物，如果你要添加点击事件，这一点尤其重要。

let employee = (function() {
let root, form, data = []
function init(elm, items) {
root = elm
data = items
render()
}
function cancel() {
form.find('[name="title"], [name="id"]').val('')
form.find('.add').show()
form.find('.update, .cancel').hide()
}
function add(id, title) {
data.push({
id: data.length ? parseInt(data[data.length - 1].id, 10) + 1 : 1,
title: form.find('[name="title"]').val()
})
cancel()
render()
}
function edit(item) {
form.find('[name="id"]').val(item.id)
form.find('[name="title"]').val(item.title)
form.find('.add').hide()
form.find('.update, .cancel').show()
}
function update() {
let id = parseInt(form.find('[name="id"]').val(), 10)
data.splice(data.findIndex(v => v.id === id), 1, {
id,
title: form.find('[name="title"]').val()
})
cancel()
render()
}
function remove(item) {
data.splice(data.indexOf(item), 1)
render()
}
function render() {
root.empty()
form = $(`
<form>
<input type="hidden" name="id" />
<input type="text" name="title" />

<button type="button" class="add">+</button>
<button type="button" class="update">✔️</button>
<button type="button" class="cancel">x</button>
</form>
`)
form.find('.add').click(add)
form.find('.update').hide().click(update)
form.find('.cancel').hide().click(cancel)
let list = $('<div id="events-list" />')
$.each(data, function(key, value) {
let item = $(`
<div>
<div>
Employee ${parseInt(value.id, 10)} - ${$('<span/>').text(value.title).text()} 
<button class="delete">X</button> <button class="edit">Edit</button>
</div>
</div>
`)
item.find('.delete').click(() => remove(value))
item.find('.edit').click(() => edit(value))
list.append(item)
})
root.append(list)
root.append(form)
}
return {
init
}
})()
$(document).ready(function() {
// $.getJSON("resources.json", function(data) {
let data = [{
"id": "1",
"title": "John",
},
{
"id": "2",
"title": "Tom",
}
]
employee.init($('#events'), data || [])
//})
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='events'></div>

相关内容

最新更新

热门标签：