Ragamffn Ragamffn - 6 months ago 15
Javascript Question

Pass variable to append

On the homepage, the JS will grab up to three news stories from the news page, and will show abbreviated versions which will link to full story. The problem I'm running into is that one of the variables I'm attempting to concatenate is not doing so as intended.

Homepage:

<div id="news-autoloader">

</div>


Newspage:

<h3 id="news1">News Item 1</h3>

<p>Lorem ipsum dolor sit amet...</p>

<h3 id="news2">News Item 2</h3>

<p>Lorem ipsum dolor sit amet...</p>

// more or less of the same news items


The news page may have no items, but we will capture up to three, first the headline, and then n characters (would rather capture n words, but that's after this issue is resolved!) of the first p following the h3 headline.

<script>
$.get('company-news.html',
function(data){
var news1 = $(data).find('#news1 + p');
var news2 = $(data).find('#news2 + p');
var news3 = $(data).find('#news3 + p');

// see how many news items there are (there's probably a more graceful way of doing this!):

if (news1.html() == null){
var items = 0;
} else if (news2.html() == null){
var items = 1;
} else if (news3.html() == null){
var items = 2;
} else {
var items = 3;
}

if (items == 0){
$('#news-autoloader').append('<h3>No News.</h3>');
} else {
for (i=1; i<=items; i++){
var abc = '#news' + i;
var def = 'news' + i;
var url = 'a href="company-news.html#news' +i;

$('#news-autoloader').append($(abc,data)).append('<p>' + def.html().substr(0, 175) + ' <' + url + '">More</a></p>');
}
}
}, 'html');
</script>


Everything works -
abc
evaluates properly in the first append, but in our second append, variable
def
does not.

I would like to know three things:

1) How do I get
def
to work in the second append,

2) Is there a more graceful way find the number of news items,

3) How do I limit by number of words instead of characters (so abbreviated sentences are complete).

TIA!!!

Answer

Your problem is that you called ...def.html().... and def is neither a jQuery object or an element. Rather, the value of def is 'news' + i, where i is the iteration number.

If your intention was to take the HTML from the element with the id of news then you need to change the value of def to '#news' + i, and then wrap def into a jQuery object, $(def), function:

...$(def).html()....


UPDATE

If I misunderstood you again, and what you want to do is render the variables news1, news2 and news3, then you should put those variables into an array.

You CANNOT reference a variable from a string in JavaScript without using an array.

If this is the case, your updated code will be as follows:

<script>
$.get('company-news.html',
    function(data){
        var newsData = [];
        newsData["news1"] = $(data).find('#news1 + p');
        newsData["news2"] = $(data).find('#news2 + p');
        newsData["news3"] = $(data).find('#news3 + p');

// see how many news items there are (there's probably a more graceful way of doing this!):

    if (newsData["news1"].html() == null){
        var items = 0;
    } else if (newsData["news2"].html() == null){
        var items = 1;
    } else if (newsData["news3"].html() == null){
        var items = 2;
    } else {
        var items = 3;
    }

    if (items == 0){
        $('#news-autoloader').append('<h3>No News.</h3>');
    } else {
        for (i=1; i<=items; i++){
            var abc = '#news' + i;
            var def = 'news' + i;
            var url   = 'a href="company-news.html#news' +i;

            $('#news-autoloader').append($(abc,data)).append('<p>' + $(newsData[def]).html().substr(0, 175) + ' <' + url + '">More</a></p>');
        }
    }
}, 'html');
</script>
Comments