Replace() before html() and add "&" between two strings

Question

Please check out this Fiddle Example. It searches for strings that contain "Glucosamine". How can I strip out "Glucosamine" and add an "&" if it returns two strings, like this:

A Item
Sulfate
B Item
Sulfate & HCl

I got an undefined error using .replace("Glucosamine","") after append.

JSON:

[{"title":"A","Ingredient":"Glucosamine Sulfate,Vitamin C"},{"title":"B","Ingredient":"Vitamin D,Glucosamine Sulfate,Glucosamine HCl,Vitamin A"}]

Code:

$.ajax({
    url: "text.json",
    success: function (data) {

        $(data.query.results.json.json).each(function (index, item) {        
            var title = item.title;
            var ingredients = item.Ingredient; 
              ingredients = ingredients.split(",");
           $.each(ingredients,function(i,ingredient){
            if (ingredient.indexOf("Glucosamine") >= 0) {
            $('.' + title+'glu').append('<h5>'+ingredient+'</h5>') 
             }
            });
        });
    },
    error: function () {}
});

HTML:

<h3>A Item</h3>
<div class="Aglu"></div>
<h3>B Item</h3>
<div class="Bglu"></div>

Note sure if I'm understanding you. Is this the effect you're after? jsfiddle.net/qs5HY — Joseph Marikle
– Joseph Marikle, Commented May 25, 2014 at 5:11
You should call ingredient.replace('Glucosamine', '') before appending it. — mathewbergt
– mathewbergt, Commented May 25, 2014 at 5:13
@JosephMarikle, Thank you, that's what I want. But how can I check if it returns Sulfate and HCl together and adds an "&" between them? — RedGiant
– RedGiant, Commented May 25, 2014 at 5:18

Joseph Marikle · Accepted Answer · 2014-05-25 05:47:28Z

Answer

The problem is that you are trying (as far as I can tell) to use replace on the jQuery object like so:

// this will not work
$('.' + title+'glu').append('<h5>'+ingredient+'</h5>').replace("Glucosamine","");

The problem is that replace() is a function of the String object in javascript and there is no replace method in the jQuery object. What you want to do is run replace() against the ingredient variable which is a string.

// this will work
$('.' + title+'glu').append('<h5>'+ingredient.replace("Glucosamine","")+'</h5>');

Not answer

However, based on your latest comment, I don't believe this will actually help you. Although it's unrelated to the actual problem you were having, I'll go ahead and quick put down here how I would approach what you are actually trying to do. I would write your function this way:

    $(data.query.results.json.json).each(function (index, item) {        
        var title = item.title;
        var ingredients = item.Ingredient; 

        // this is good.  I  like the use of split here
        ingredients = ingredients.split(",");

        // here I would just filter the array.  Don't bother with indexOf.
        // You can just as easily use regex.  I've chosen to use an
        // actual regex pattern but you can also use something like this
        // just as easily: ingredient.match("Glucosamine");.  I just
        // chose to use regex for the sake of using i for case insensi-
        // tivity.  glucosamineBased is now an array of only the glucose
        // ingredients
        var glucosamineBased = ingredients.filter(function(ingredient){
            return ingredient.match(/glucosamine\s/i);
        });

        // now that we know which ones are actually glucose based, we
        // don't need to itterate through them.  Instead we can just jump
        // on combining them.  I use join which works the opposite as
        // split above.  After they are joined into one big happy string,
        // I strip out the glucosamine words.  Easy-peasy.  Just keep in
        // mind that you need g for global (don't just replace the first
        // one, but replace all instances of the pattern) and maybe i for
        // case insensitivity.
        $('.' + title+'glu').append('<h5>' +glucosamineBased.join(' & ').replace(/glucosamine\s/gi, '')+'</h5>');
    });

Hope this helps.

Demo

http://jsfiddle.net/HANvQ/

(oops... forgot the demo)

Nelfo · Accepted Answer · 2014-05-25 06:18:36Z

It's trickier to add the ampersand if the array contains more than one instance of the word "Glucosamine", but the following should do the trick:

$(data.query.results.json.json).each(function (index, item) {
    var title = item.title;
    var ingredients = item.Ingredient;
    ingredients = ingredients.split(",");
    var string = '';
    $.each(ingredients, function (i, ingredient) {
        if (ingredient.indexOf("Glucosamine") >= 0) {
            ingredient = ingredient.replace("Glucosamine","");
            string += (string.length == 0) ? ingredient : " & "+ingredient;
        }
    });
    $('.' + title + 'glu').append('<h5>' + string + '</h5>')
});

http://jsfiddle.net/wDyZd/2/

Collectives™ on Stack Overflow

Replace() before html() and add "&" between two strings

2 Answers 2

Answer

Not answer

Demo

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Answer

Not answer

Demo

Comments

Comments

Related