We Keep Coding

Splitting a JavaScript string from XML and wrapping in HTML element

I'm working on displaying an RSS feed in a website through the use of jQuery and AJAX. One of the strings from the source XML file are wrapped in a <category> tag, and there are multiple of these returned. I'm getting the source data like follows:
var _category = $(this).find('category').text();
Because there are multiple categories returned with this method, say the following:
<category>Travel</category>
<category>Business</category>
<category>Lifestyle</category>
I'm getting strings returned like so:
TravelBusinessLifestyle
My end goal is to see each of these separate strings returned and wrapped in individual HTML elements, such as <div class="new"></div>.
I did end up trying the following:
var _categoryContainer = $(this)
.find('category')
.each(function () {
$(this).wrap( "<div class='new'></div>" );
});
among quite a few other variations.
This is all being appended to a HTML structure similar to the following.
// Add XML content to the HTML structure
$(".rss .rss-loader")
.append(
'<div class="col">'
+ <h5 class="myClass">myTitle</h5>
+ _category
+ "</div>"
);
Any suggestions would be much appreciated!

if it's a simple html which is mentioned in a question. you can use something like below.
var html="<category>Travel</category><category>Business</category><category>Lifestyle</category>"
var htmlObj=$.parseHTML(html);
var container=$("#container")
$.each(htmlObj,function(i,o){
container.append("<div class='new'>"+o.innerText+"</div>")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='container'></div>

Same as first answer, but without jquery
let container = document.querySelector('div#container');
document.querySelectorAll('category').forEach(element => {
let div = document.createElement('div');
div.innerText = element.innerText;
container.appendChild(div);
})
<category>Travel</category><category>Business</category><category>Lifestyle</category>
<div id="container"></div>

Apache Velocity and adding JavaScript

Please forgive me as I've never used Apache Velocity before but I have to figure this out!
I'm using an adobe recommendation template for products and I'm now adding a star rating system into it as noted in the image below:
However, as you can see the logic i have added (In JS) is only being executed the first time. and obviously not running through the loop, since it is in Velocity.
My question to the community is; how do i go about making this work?
I've tried for a day now to no avail, so ANY help would be greatly appreciated.
Please see the code below! (And thanks!)
[The #foreach loops is the velocity, and everything between the script tags is my appended code]
<div class="line">
<h2>More for You</h2>
#set($count=1)
#foreach($e in $entities)
#if($e.id != "" && $count < $entities.size() && $count <=18)
<li>
<script type="text/javascript">
var myString = $e.rating;
if (myString >= 5) { myString = 5;}
var myRegexp2 = /\d(?!.*\d)/;
var match2 = myRegexp2.exec(myString);
var starIMG = "<img src='http://kirklands.ugc.bazaarvoice.com/3768-en_us/" + match + "_" + match2 + "/5/rating.gif' alt='' />";
var myRegexp3 = /\d/;
var match = myRegexp3.exec(myString);
function myFunction() {
return(match);
}
</script>
<a class="productBlock" onclick="var s = s_gi(s_account);
s.linkTrackVars='events,eVar21';
s.linkTrackEvents='event16';
s.events='event16';
s.eVar21='';
s.tl(this,'o','Product Detail Cross-Sell');" href="$e.pageUrl?icid=hpFS ">
<img title="$e.name" alt="$e.name" src="$e.thumbnailUrl">
<h3>$e.name</h3>
<div id="starRating"><script>document.getElementById("starRating").innerHTML =
starIMG;</script></div>
<p>$$e.value</p>
</a>
</li>
#set($count = $count + 1)
#end
#end
</ul>
</div>
<div class="scroolBtn btnRight"><span class="btn" id="scrool-forward"></span></div>
</div>
jQuery(function () {
jQuery('#scrool').scrollbox({
direction: 'h',
switchItems: 3,
distance: 450,
autoPlay:false
});
jQuery('#scrool-backward').click(function () {
jQuery('#scrool').trigger('backward');
});
jQuery('#scrool-forward').click(function () {
jQuery('#scrool').trigger('forward');
});
});

I have not used Velocity template scripts for years but wild guess is an escaping problem. Everything you include in a velocity template is actually run by Velocity engine, you must escape $variable literals.
http://velocity.apache.org/engine/devel/user-guide.html#escapingvalidvtlreferences
edit No wait, you mean you wanted to run javascript code at server side, each foreach item step should evaluate javascript code?

Group API results in one DIV

I'm having a really hard time trying to edit the JS code/API (Google Feeds) to make it work in a responsive design.
Right now the results of the API is as followed :
<div class="gfg-subtitle"></div>
<div class="gfg-list"></div>
<div class="gfg-subtitle"></div>
<div class="gfg-list"></div>
...
I want it to be like that :
<div class="gfg-group">
<div class="gfg-subtitle"></div>
<div class="gfg-list"></div>
</div>
<div class="gfg-group">
<div class="gfg-subtitle"></div>
<div class="gfg-list"></div>
</div>
I tried this (but don't get any result) :
$(document).ready(function(){ $("#contentfeed").append("<div class='gfg-grouped'></div>");
$(".gfg-grouped").text($(".gfg-subtitle").text() + " " +$(".gfg-list").text()); });
Tried this as well (doesn't seem to work either) :
var groupDiv = document.createElement('div');
groupDiv.className = 'gfg-group';
groupDiv.appendChild(newTitle);
groupDiv.appendChild(newList);
See http://jsfiddle.net/pnwm67q8/2/ :

Thanks to the previous replies, I went on and solved it myself (took me way too long but that's how we all learn right? :) Leaving the solution here if that can help someone.
I added the following lines :
var newGroup = this.createDiv_('gfg-grouped');
and
if (!this.options.horizontal && this.options.stacked) {
var newGroup = this.createDiv_('gfg-grouped');
var newTitle = this.createDiv_('gfg-subtitle');
nodes.root.appendChild(newGroup);
newGroup.appendChild(newTitle);
this.setTitle_(this.results[0].feed, newTitle);
and
newGroup.appendChild(nodes.list);
See : http://jsfiddle.net/m5krqvbz/3/

There's a lot of logic going and I'm not familiar with the API on but you can group the entries like so:
// group the Title and List
var groupDiv = document.createElement('div');
groupDiv.className = 'gfg-grouped';
groupDiv.appendChild(newTitle);
groupDiv.appendChild(newList);

You would get something like the following:
$intendedContainer = $("");
$(".gfg-subtitle").each(function(){
var $list = $(this).next().detach();
var $subitle = $(this).detach();
var $groupItem = $("<div class='gfg-group'></div>");
$groupItem.append($list).append($subtitle);
$groupItem.insertBefore($subTitle);
$intendedContainer.append($groupItem);
});
I didn't work through your entire code as it's quite huge, but this is the kind of logic you will need to implement.

a more graceful multi-line javascript string method

The only way I know how to print a huge string without using += is to use \ backslashes. ugly!
<div id="foo"></div>
<script type="text/javascript">
var longString = '<div id="lol">\
<div id="otherstuff">\
test content. maybe some code\
</div>\
</div>';
document.getElementById('foo').innerHTML = longString;
</script>
is there any way to do this where the longString is untainted? php has $foo = ''' long multiline string '''; I want this in javascript!
Anyone know of a better method for printing long, multi-line strings in javascript?

In general, the answer is: not in the language syntax. Though as Ken pointed out in his answer there are many work-arounds (my personal method is to load a file via AJAX). In your specific case though, I'd prefer creating a HTML constructor function so you can then define the HTML structure using javascript object literals. Something like:
var longString = makeHTML([{
div : {
id : "lol",
children : [{
div : {
id : "otherstuff",
children : [{
text : "test content. maybe some code"
}]
}]
}]
which I find to be much easier to handle. Plus, you this would allow you to use real function literals when you need it to avoid string quoting hell:
makeHTML([{
span : {
onclick : function (event) {/* do something */}
}
}]);
note: the implementation of makeHTML is left as exercise for the reader
Additional answer:
Found some old code after a quick scan through my hard disk. It's a bit different from what I suggested above so I thought I'd share it to illustrate one of the many ways you can write functions like this. Javascript is a very flexible language and there is not much that forces you to write code one way or another. Choose the API you feel most natural and comfortable and write code to implement it.
Here's the code:
function makeElement (tag, spec, children) {
var el = document.createElement(tag);
for (var n in spec) {
if (n == 'style') {
setStyle(el,spec[n]);
}
else {
el[n] = spec[n];
}
}
if (children && children.length) {
for (var i=0; i<children.length; i++) {
el.appendChild(children[i]);
}
}
return el;
}
/* implementation of setStyle is
* left as exercise for the reader
*/
Using it would be something like:
document.getElementById('foo').appendChild(
makeElement(div,{id:"lol"},[
makeElement(div,{id:"otherstuff"},[
makeText("test content. maybe some code")
])
])
);
/* implementation of makeText is
* left as exercise for the reader
*/

One technique if you have a big block is a <script> tag with an invalid type. It will be ignored by browsers.
<script type="text/x-my-stuff" id="longString">
<div id="lol">
<div id="otherstuff">
test content. maybe some code
</div>
</div>
</script>
<script type="text/javascript">
var longString = document.getElementById("longString").text;
document.getElementById('foo').innerHTML = longString;
</script>

A few somewhat unattractive options are discussed in the answers to this question.

You really could minimize this ugliness by creating your <div id="lol"> as HTML, and set its content with .innerHTML = "test content. maybe some code"
I don't like creating HTML in Javascript because of this exact issue, and instead use "template" elements which i simply clone then manipulate.
var lol = document.getElementById("template_lol").clone();
lol.firstChild.innerHTML = "code and stuff";
foo.appendChild(lol);
And this is the HTML:
<body>
<div>normal stuff</div>
<div style="display:none" id="templateBucket">
<div id="template_lol"><div class="otherstuff"></div></div>
</div>
</body>

This works too :
var longString =
'<div id="lol">' +
'<div id="otherstuff">' +
'test content. maybe some code' +
'</div>' +
'</div>';

Finding out what line number an element in the dom occurs on in Javascript?

Though I've never heard of this but, is it possible to retrieve a node from the DOM using JS, and then find out on what line of the file that node occurred on?
I'm open to anything, alternative browsers plugins/add-ons etc...it doesn't need to be cross-browser per say.
I would assume that this would be possible somehow considering that some JS debuggers are capable of finding the line number within a script tag, but I'm not entirely sure.

Ok, forgive me for how large this is. I thought this was a very interesting question but while playing with it, I quickly realized that innerHTML and its ilk are quite unreliable wrt maintaining whitespace, comments, etc. With that in mind, I fell back to actually pulling down a full copy of the source so that I could be absolutely sure I got the full source. I then used jquery and a few (relatively small) regexes to find the location of each node. It seems to work well although I'm sure I've missed some edge cases. And, yeah, yeah, regexes and two problems, blah blah blah.
Edit: As an exercise in building jquery plugins, I've modified my code to function reasonably well as a standalone plugin with an example similar to the html found below (which I will leave here for posterity). I've tried to make the code slightly more robust (such as now handling tags inside quoted strings, such as onclick), but the biggest remaining bug is that it can't account for any modifications to the page, such as appending elements. I would need probably need to use an iframe instead of an ajax call to handle that case.
<html>
<head id="node0">
<!-- first comment -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style id="node1">
/* div { border: 1px solid black; } */
pre { border: 1px solid black; }
</style>
<!-- second comment -->
<script>
$(function() {
// fetch and display source
var source;
$.ajax({
url: location.href,
type: 'get',
dataType: 'text',
success: function(data) {
source = data;
var lines = data.split(/\r?\n/);
var html = $.map(lines, function(line, i) {
return ['<span id="line_number_', i, '"><strong>', i, ':</strong> ', line.replace(/</g, '<').replace(/>/g, '>'), '</span>'].join('');
}).join('\n');
// now sanitize the raw html so you don't get false hits in code or comments
var inside = false;
var tag = '';
var closing = {
xmp: '<\\/\\s*xmp\\s*>',
script: '<\\/\\s*script\\s*>',
'!--': '-->'
};
var clean_source = $.map(lines, function(line) {
if (inside && line.match(closing[tag])) {
var re = new RegExp('.*(' + closing[tag] + ')', 'i');
line = line.replace(re, "$1");
inside = false;
} else if (inside) {
line = '';
}
if (line.match(/<(script|!--)/)) {
tag = RegExp.$1;
line = line.replace(/<(script|xmp|!--)[^>]*.*(<(\/(script|xmp)|--)?>)/i, "<$1>$2");
var re = new RegExp(closing[tag], 'i');
inside = ! (re).test(line);
}
return line;
});
// nodes we're looking for
var nodes = $.map([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], function(num) { return $('#node' + num) });
// now find each desired node in both the DOM and the source
var line_numbers = $.map(nodes, function(node) {
var tag = node.attr('tagName');
var tags = $(tag);
var index = tags.index(node) + 1;
var count = 0;
for (var i = 0; i < clean_source.length; i++) {
var re = new RegExp('<' + tag, 'gi');
var matches = clean_source[i].match(re);
if (matches && matches.length) {
count += matches.length;
if (count >= index) {
console.debug(node, tag, index, count, i);
return i;
}
}
}
return count;
});
// saved till end to avoid affecting source html
$('#source_pretty').html(html);
$('#source_raw').text(source);
$('#source_clean').text(clean_source.join('\n'));
$.each(line_numbers, function() { $('#line_number_' + this).css('background-color', 'orange'); });
},
});
var false_matches = [
"<div>",
"<div>",
"</div>",
"</div>"
].join('');
});
</script>
</head>
<!-- third comment -->
<body id="node2">
<div>
<pre id="source_pretty">
</pre>
<pre id="source_raw">
</pre>
<pre id="source_clean">
</pre>
</div>
<div id="node3">
<xmp>
<code>
// <xmp> is deprecated, you should put it in <code> instead
</code>
</xmp>
</div>
<!-- fourth comment -->
<div><div><div><div><div><div><span><div id="node4"><span><span><b><em>
<i><strong><pre></pre></strong></i><div><div id="node5"><div></div></div></div></em>
</b></span><span><span id="node6"></span></span></span></div></span></div></div></div></div></div></div>
<div>
<div>
<div id="node7">
<div>
<div>
<div id="node8">
<span>
<!-- fifth comment -->
<div>
<span>
<span>
<b>
<em id="node9">
<i>
<strong>
<pre>
</pre>
</strong>
</i>
<div>
<div>
<div>
</div>
</div>
</div>
</em>
</b>
</span>
<span>
<span id="node10">
</span>
</span>
</span>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Something like this?
var wholeDocument = document.getElementsByTagName('html')[0]
var findNode = document.getElementById('whatever')
var documentUpToFindNode = wholeDocument.substr(0, wholeDocument.indexOf(findNode.outerHTML))
var nlsUpToFindNode = documentUpToFindNode.match(/\n/g).length

This can be done. Start by getting the highest node in the document like this:
var htmlNode = document.getElementsByTagName('html')[0];
var node = htmlNode;
while (node.previousSibling !== null) {
node = node.previousSibling;
}
var firstNode = node;
(this code was tested and retrieved both the doctype node as well as comments above the html node)
Then you loop through all nodes (both siblings and children). In IE, you'll only see the elements and comments (not text nodes), so it'll be best to use FF or chrome or something (you said it wouldn't have to be cross browser).
When you get to each text node, parse it to look for carriage returns.

You could try: -
- start at the 'whatever' node,
- traverse to each previous node back to the doc begining while concatenating the html of each node,
- then count the new lines in your collected HTML.
Post the code once you nut it out coz thats a good question :)