JSON Data Not Showing In Plunker

Question

I am having trouble getting a JSON data document to appear/input into a HTML document on Plunker.

The current JS being used:

$(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');

});

The JSON Data should be inputted into the div #viewed with the viewers first and last name. I am not too familiar with Plunker, so I am not sure if I am going about something the wrong way within Plunker, or if a portion of the current code is causing the JSON Data to not be entered.

View the current Plunker.

score 1 · Accepted Answer · answered Jan 04 '15 at 00:07

The problem is you are mixing jQuery and native dom methods then getting confused about what is what

This returns a jQuery object:

var viewerSection = $('#viewed');

This is applying a property to that jQuery object that won't update the DOM since it isn't being applied to a DOM node:

 viewerSection.innerHTML( newViewers);

to set the html using jQuery you need to use html() method:

 viewerSection.html( newViewers);

Or to set it using native method you need to do

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

I would suggest for DOM manipulation you pick either jQuery or native javascript and stick to using one or the other and don't mix them

Working Demo Using html()

also note that since you are using jQuery the jQuery ajax API is easier to read than native `XMLHttpRequest` and has a simple callback system for success and errors — charlietfl, Jan 04 '15 at 00:26

JSON Data Not Showing In Plunker

1 Answers1