Appending JSON Object Number - Troubleshooting

By : Andrew
Source: Stackoverflow.com
Question!

How would I go about correctly inputting a number from an array of objects, only once into the html content?

Ideally, I want the object's "category" number to inputted after the last span with in the .viewed class. The end result would then follow something along the lines of..

Joseph Michaels and 3 more people have viewed this post. #4

An example of the JSON file:

{
  "profiles": [
    { "firstName" : "John", "lastName" : "Doe", "gender": "male", "category": 2 },
    { "firstName" : "Jane", "lastName" : "Austen", "gender": "female", "category": 2 },
    { "firstName" : "Alexander", "lastName" : "Beth", "gender": "male", "category": 3 },
    { "firstName" : "Sarah", "lastName" : "Kelly", "gender": "female", "category": 3 },
    { "firstName" : "Rachel", "lastName" : "Haiworth", "gender": "female", "category": 3 },
    { "firstName" : "Thomas", "lastName" : "Alfae", "gender": "male", "category": 3 },
    { "firstName" : "Roy", "lastName" : "Harper", "gender": "male", "category": 4 },
    { "firstName" : "Joseph", "lastName" : "Michaels", "gender": "male", "category": 4 },
    { "firstName" : "William", "lastName" : "Lee", "gender": "male", "category": 4 }
  ]
}

A portion of the JS file:

if (obj.category == 4) {
    $('.contentBox:nth-child(4) .viewed').append('<span class="user">' + obj.firstName + ' ' + obj.lastName + '</span>' + ' ');
    $('.contentBox:nth-child(4) .viewed span:last-child').append('<span class="categoryNumber">' + obj.category + '</span>');

    //$('.contentBox:nth-child(4) .viewed').append('<span class="categoryNumber">' + obj.category + '</span>');
}

Currently the code is inputting <span class="categoryNumber"></span> multiple times into the one line. Therefore, the category number is displaying multiples times.

What is the best solution for this situation?

View the current Plunker.

By : Andrew


Answers
To stop it outputting more than once, you can just check if you've already output the markup:

if( ! $('.contentBox .categoryNumber').length){
    $('.contentBox:nth-child(4) .viewed span:last-child').append('<span class="categoryNumber">' + obj.category + '</span>');
}

This is just a quick fix however I would think about organising your data more before you output html. Organise your data into a multi dimensional array based on category, taking the first in each array for the name at the front and doing a .length on each category array will generate the markup string you need in a more elegant way, and in a lot less code.

Also the above selector will output in the wrong place because of the way you are iterating and outputting markup on each iteration, refactoring as above will remove this issue! :)

By : Jack Wall


I think you're not approaching the question correctly. You don't want to append the object's category number to the span - you want to look at the index of the .contentBox div. You can access it through the '.each()' method of the JQuery API.

You could iterate through the content boxes, adding their indexes to the span you want to modify.

For example, you could add this to you checkViewers function:

$('.viewed').each(function(index){
  $(this).last().append(' #' + index);
});

By the way... you could greatly simplify the code by replacing your for loop with:

responseObject.profiles.forEach(function(obj){
    $('.contentBox:nth-child(' + obj.category + ') .viewed').append('<span class="user">' + obj.firstName + ' ' + obj.lastName + '</span>' + ' ');
});

(you will understand it more easily if you copy and paste into an IDE)

Hope it helped ;}



This video can help you solving your question :)
By: admin