CODEWITHSUNDEEP
javascriptjqueryarraysloops
Paul
Paul

Reputation: 3368

Looping through a split array and outputting with wrapInner

I am having difficulty figuring out the best method of doing the following. I am getting anywhere from 0 to x number of string names, ie: Zillow, Trulia. What I am wanting to do is associate an image with those string names and then display them into a list. I am attempting to do a switch statement, but am unsure if that will work for more than 1 condition...please correct me if I am wrong.

So for instance, the variable list is holding two items (Zillow/Trulia), how can I check ky split function variable for multiple values and then add the output: $('#review-icon-list').wrapInner('<li class="review-icon">' + zillowImg + '</li>');

Right now my switch case is throwing an unexpected token error, but I do not think I am using the right method anyways. Does anyone know how I would do this? Would I be doing some sort of loop and if so, how would I structure it?

var reviewSiteNames = 'Zillow,Trulia';
    reviewSiteNames = reviewSiteNames.split(',');
    console.log(reviewSiteNames);
    var zillowImg = '<img src="https://s3.amazonaws.com/retain-static/www/zillow.jpg" alt="Zillow">';
    var truliaImg = '<img src="https://s3.amazonaws.com/retain-static/www/trulia.png" alt="Trulia">';

    if (reviewSiteNames == '') {
        $('#no-current-reviewSites').html('No review sites currently added')
    }
    /*else if (reviewSiteNames) {
        $('#review-icon-list').wrapInner('<li class="review-icon"></li>');
    }*/
    switch (true) {
        case (reviewSiteNames.indexOf('Zillow') >= 0):
            $('#review-icon-list').wrapInner('<li class="review-icon">' + zillowImg + '</li>');
            break;
        case (reviewSiteNames.indexOf('Realtor.com') >= 0):
            $('#review-icon-list').wrapInner('<li class="review-icon">' + realtorDotComImg + '</li>');        
            break;        
        case (reviewSiteNames.indexOf('Trulia') >= 0):
            $('#review-icon-list').wrapInner('<li class="review-icon">' + truliaImg + '</li>');
        default: return '';
    }​;

New method of trying this. The only image that is displaying is the last if statement in the each function.

$.each(reviewSiteNames, function (index, value) {
        if (reviewSiteNames.includes('Zillow')) {
            $('#review-icon-current').wrapInner('<li class="review-icon">' + zillowImg + '</li>');
        }
        if (reviewSiteNames.includes('Trulia')) {
            $('#review-icon-current').wrapInner('<li class="review-icon">' + truliaImg + '</li>');
        }
        //return (value !== 'three');
    });

Upvotes: 0

Views: 37

Answers (2)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

Here is how I would write what I understand from your code:

I think you want to check if some specific word are in the reviewSiteNames array to determine how to wrap the #review-icon-list element.

// Site names as a string
var reviewSiteNames = 'Zillow,Trulia';

// Site names as an array
reviewSiteNames = reviewSiteNames.split(',');
//console.log(reviewSiteNames);

// Some images used in li wrappers...
var zillowImg = '<img src="https://s3.amazonaws.com/retain-static/www/zillow.jpg" alt="Zillow">';
var truliaImg = '<img src="https://s3.amazonaws.com/retain-static/www/trulia.png" alt="Trulia">';

// If the array is empty
if (reviewSiteNames.length == 0) {
  $('#no-current-reviewSites').html('No review sites currently added')
}

var myHTMLtoInsert = "";

// Check if specific values are in array
if( $.inArray('Zillow', reviewSiteNames) ){
  myHTMLtoInsert += '<li class="review-icon">' + zillowImg + '</li>';

}
if( $.inArray('Realtor.com', reviewSiteNames) ){
  myHTMLtoInsert += '<li class="review-icon">' + realtorDotComImg + '</li>';
}
if( $.inArray('Trulia',, reviewSiteNames) ){ 
   myHTMLtoInsert += '<li class="review-icon">' + truliaImg + '</li>';
}


$('#review-icon-list').html(myHTMLtoInsert);

Upvotes: 1

ibrahim mahrir
ibrahim mahrir

Reputation: 31712

// The names:
var names = 'Zillow,Trulia';
names = names.split(',');

// The images mapper: an object that has names as keys and images as values
var images = {
    "Zillow": '<img src="https://s3.amazonaws.com/retain-static/www/zillow.jpg" alt="Zillow">',
    "Trulia": '<img src="https://s3.amazonaws.com/retain-static/www/trulia.png" alt="Trulia">'
};

// if names is empty: (names == '' won't work because names is no longer a string, it's an array now)
if (names.length === 0) {
    $('#no-current-reviewSites').html('No review sites currently added')
}
// if there is names
else {
    // loop through all names
    names.forEach(function(name) {
        // if this name got an image in the images mapper (images[name] !== undefined)
        if(images[name]) {
            // then do magic stuff with it
            $('#review-icon-list').wrapInner('<li class="review-icon">' + images[name] + '</li>');
        }
    });
}

I hope this is usefull as I'm not quite sure what the goal really is.

Upvotes: 1

Related Questions