JSON Plunker 中未显示数据

Question

我无法将 JSON 数据文档 appear/input 转换为 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.

Answer 1

问题是您混合了 jQuery 和本机 dom 方法，然后对什么是什么感到困惑

这个returns一个jQuery对象：

var viewerSection = $('#viewed');

这是将属性应用于不会更新 DOM 的属性对象，因为它未应用于 DOM 节点：

 viewerSection.innerHTML( newViewers);

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

 viewerSection.html( newViewers);

或者使用你需要做的本地方法来设置它

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

我建议您选择 jQuery 或本机 javascript 进行 DOM 操作，并坚持使用其中一种，不要混合使用它们

Working Demo Using html()

JSON Plunker 中未显示数据

JSON Data Not Showing In Plunker

javascript

jquery

json

plunker