gpt4 book ai didi

javascript - JSON 数据未显示在 Plunker 中

转载 作者:行者123 更新时间:2023-12-03 11:07:48 26 4
gpt4 key购买 nike

我在将 JSON 数据文档显示/输入到 Plunker 上的 HTML 文档中时遇到问题。

当前使用的JS:

$(document).ready(function() {

//Content Viewer Information
function checkViewers() {
//Base Variables
var viewer = $('#viewed span.user');
var totalViews = $('#viewed span.user').length;
var shortenViews = $('#viewed span.user').length -1;

if (totalViews === 0) {
$('<span> 0 people have </span>').insertBefore($('#viewed span:last-child'));
}
if (totalViews === 2) {
$('<span> and </span>').insertAfter(viewer.first());
}
if (totalViews >= 3) {
viewer.slice(1).hide();
$('<span> and </span>').insertAfter(viewer.first());
$('<span class="user count"></span>').insertAfter(viewer.eq(2));
$('.count').html(shortenViews + ' more people');
}
}

checkViewers();

//JSON Data
var xhr = new XMLHttpRequest();

xhr.onload = function() {
if (xhr.status === 200) {
responseObject = JSON.parse(xhr.responseText);

var newViewers = '';
for (var i = 0; i < responseObject.profiles.length; i++) {
newViewers += '<span class="user">' + responseObject.profiles[i].firstName + ' ';
newViewers += responseObject.profiles[i].lastName + '</span>';
}

//Update Page With New Content
var viewerSection = $('#viewed');
viewerSection.innerHTML = newViewers;

}
};

xhr.open('GET', 'data.json', true);
xhr.send(null);
console.log('JSON Fired');

});

JSON 数据应与查看者的名字和姓氏一起输入到 div #viewed 中。我对 Plunker 不太熟悉,所以我不确定我是否在 Plunker 中以错误的方式进行了操作,或者当前代码的一部分是否导致 JSON 数据无法输入。

查看当前Plunker .

最佳答案

问题是你混合了 jQuery 和原生 dom 方法,然后对什么是什么感到困惑

这将返回一个 jQuery 对象:

var viewerSection = $('#viewed');

这是将一个属性应用于该 jQuery 对象,该对象不会更新 DOM,因为它没有应用于 DOM 节点:

 viewerSection.innerHTML( newViewers);

要使用 jQuery 设置 html,您需要使用 html() 方法:

 viewerSection.html( newViewers);

或者使用您需要执行的 native 方法来设置它

var viewerSection = $('#viewed')[0]; /* returns the DOM node from jQuery object */
/* or */
var viewerSection = document.getElementById('viewed');
/* then */
viewerSection.innerHTML( newViewers);

对于 DOM 操作,我建议您选择 jQuery 或 native javascript,并坚持使用其中之一,不要混合使用它们

<强> Working Demo Using html()

关于javascript - JSON 数据未显示在 Plunker 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27760679/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com