translation of vanilla JavaScript to jQuery

Question

Below is a JS function:

I'd like to update this so it uses jQuery but I am having difficulty figuring out how to translate it.

function pathContents(fileList) {
    var list = document.createElement('ul');
    for (file in fileList) {
        var item = document.createElement('li');
        item.appendChild(document.createTextNode(fileList[file]));
        list.appendChild(item);
    }
    return list;
}

UPDATE: Removing the call to pathContents() and replacing it with Malvolio's code - this is the browser output -

Why isn't it displaying the data as list items in an unordered list?

Why converting it into jQuery? What's wrong with that code snippet? If you want to create a jQuery object, pass the returned value to jQuery: `$( pathContents(fileList) )` and done :) — Ram, Jul 24 '16 at 21:35
Because I'm trying to learn jQuery and doing a translation is a useful exercise in the learning process. — knot22, Jul 24 '16 at 21:41
JQuery isn't something "else". It's still Javascript. So translating "from JS to JQuery" doesn't make much sense. You're just rewriting it to use a Javascript library. — Ingo Bürk, Jul 24 '16 at 21:42
@ryanlutgen - well, you could write AJAX in js without jQuery but it wouldn't be as short, maintainable, readable and configurable easily as jQuery. but generally it's true, but not even 90%. much less, jquery is very very performant and in many cases performance isn't as important as readability — vsync, Jul 24 '16 at 21:59
Note that your update exposes a misunderstanding of what the code @Malvollio posted is doing - this will not work - you're not going to return a list but a function.. That code is meant to **replace** your `pathContents` function, not go inside it. — George Mauer, Jul 24 '16 at 23:00

trincot · Accepted Answer · 2016-07-24T22:23:29.417

2

The jQuery equivalent "all-the-way" would be:

function pathContents(fileList) {
    var $list = $('<ul/>');
    $.each(fileList, function () {
        $('<li/>').text(this).appendTo($list);
    });
    return $list;
}

The use of this inside $.each is often seen in jQuery code, but it is cleaner to use the function arguments instead:

    $.each(fileList, function (_, file) {
        $('<li/>').text(file).appendTo($list);
    });

But the pure JavaScript way really is not that bad. For one, you cannot beat the performance of it.

edited Jul 24 '16 at 22:23

answered Jul 24 '16 at 21:46

trincot

317,000
35
244
286

is the `text(fileList[file])` will eliminate problems that I'm fixing with regex? – spirit Jul 24 '16 at 21:49
The Console shows ReferenceError: file is not defined. – knot22 Jul 24 '16 at 21:51
btw, in your code `fileList[file]` will be `undefined`... You've forgot to add function parameter, like this: `function (file) { ... }` when you passing callback to the `$.each()` – spirit Jul 24 '16 at 21:51
@spirit: Ah yes, the best way is to use `this`: that really is how jQuery works. Thanks. Now the code really looks nice – trincot Jul 24 '16 at 21:53
1

@spirit, I missed your first comment: yes the text method takes care of this, as it comes down to assigning to the `textContent` DOM property, which does not interpret text as HTML, but as .... plain text. – trincot Jul 24 '16 at 22:07
I disagree with using `this` in the `$.each`. Essentially you just opt to use a variable that you can't name instead of one that you can. jQuery doesn't "work that way", in fact in 90% of cases in jQuery, you can use a named parameter instead of `this` - the fact that people insist on using the context parameter is just bad culture. – George Mauer Jul 24 '16 at 22:08
Also, you don't need closing `/` in the element factories - that's another case of people just seeing bad code in blogs and going with it. Check the jQuery source, it doesn't care if there's a slash there or not. – George Mauer Jul 24 '16 at 22:10
@GeorgeMauer, closing html tag is not bad code. it just **valid xml**. – spirit Jul 24 '16 at 22:11
The jQuery documentation seems to give [no preference](http://api.jquery.com/jQuery/#creating-new-elements) for adding the slash or even the complete closing tag, while SO shows that [everyone has their opinion](http://stackoverflow.com/a/268520/5459839) on it. ;-) – trincot Jul 24 '16 at 22:15
I see your point about `this`, @GeorgeMauer, although the function argument of interest is the second one, so it would look like `function (_, file)`, which ... well, ... is a bit of a pity. – trincot Jul 24 '16 at 22:20
@trincot yes, you're correct, there's no preference in the docs - that's why I said [check the jquery source](https://github.com/jquery/jquery/blob/master/src/core/var/rsingleTag.js). It basically does a regex that ignores terminating slashes. There's no preference expressed over not doing `$('
`) either, its just ignored.
– George Mauer Jul 24 '16 at 22:31
Why is function argument of interest the second one? I got lost on that part. What is the first argument? I see in the code the first argument is represented as _ but don't understand why. – knot22 Jul 24 '16 at 22:34
1

The first argument is de index in the array, and the second is the value of the array element at that index. So if you would name the first argument `i` you could write `fileList[i]`, but with the second argument, the same is written by just using that argument: `file`. – trincot Jul 24 '16 at 22:36
1

@knot22 so basically a long time ago, the jQuery team screwed up - when you're using `$.each` it would make sense to have it be `$.each(array, function(value, index) { })` which is how it works everywhere else, but they screwed up and inverted the two parameters. `_` is just a valid variable name that by convention we know to indicate "this isn't used". (Technically btw the jQuery team didn't screw up - they did this before it was conventional everywhere else). – George Mauer Jul 24 '16 at 22:37
1

Yep, I suppose you could phrase it like that ;-) – trincot Jul 24 '16 at 22:38

spirit · Answer 2 · 2016-07-24T22:10:00.823

1

you can try following :):

function pathContents(fileList) {
    var list = $('<ul />');
    for (file in fileList) {
        list.append($('<li />').text(fileList[file]));
    }
    return list;
}

or you can return list.html();

And yes, as many users mentioned, you will have some performance loss compared to pure javascript

edited Jul 24 '16 at 22:10

answered Jul 24 '16 at 21:38

spirit

3,265
2
14
29

Let's just hope there is no ampersand or less-than sign somewhere in that file list. – trincot Jul 24 '16 at 21:39
Or a file named `` – Michael Lorton Jul 24 '16 at 21:43
Nah, that way lies madness. You may _think_ you have caught every case, but you'll find out when someone hacks your site. Use the library-provided tools, like `.text()`. – Michael Lorton Jul 24 '16 at 22:01
@Malvolio, and you really think that giving me -1 is a good idea??? So why you didn't give -1 to *vsync* than? he is not using anything at all =) – spirit Jul 24 '16 at 22:05
Just because I didn't see vsync's answer. Any answer that encourages _security flaws_ is a bad answer. Your answer, as amended, isn't terrible, but much better to use proper libraries. – Michael Lorton Jul 24 '16 at 22:44
@Malvolio, ok. Now what's the problem with my code? Is that that I'm using `for` and not an `$.each()`? – spirit Jul 25 '16 at 07:32
_Personally_ I prefer `.map` or `$.each`, but `in` is not a security hole (the way constructing HTML from input would be). Upvoted. – Michael Lorton Jul 25 '16 at 20:06

score 0 · Answer 3 · answered Jul 24 '16 at 22:00

0

The modern version of your function would be

let pathContents =
    fileList => 
         $('<ul/>').append(fileList.map(file => $('<li/>').text(file)));

This version uses jQuery to create and append to DOM objects, the fat-arrow notation for functions, and the .map method on lists. It doesn't rely on the unreliable in operator and avoids the Bobby Tables exploit.

I kept your function and variable names, but I think you should consider more descriptive names.

answered Jul 24 '16 at 22:00

Michael Lorton

43,060
26
103
144

In the console it says TypeError: fileList.map is not a function. – knot22 Jul 24 '16 at 22:04
@knot22 then either you're using a [really really old browser](http://caniuse.com/#search=map) or `fileList` is not an array as your code implies. – George Mauer Jul 24 '16 at 22:12
Browser is Firefox 47.0. – knot22 Jul 24 '16 at 22:13
@knot22 so your code implied that `fileList` as an array, but if you're on 47 it is not. That is why Malvolio said to use `map`. You can instead do `$.map(fileList, file => $('
').text(file))` which will operate just on the values of `fileList` which I assume is an object. If it still doesn't do what you want it to do, you might want to specify what type `fileList` is

George Mauer

Jul 24 '16 at 22:15

Strange...I was sure it was an array. I will go look. – knot22 Jul 24 '16 at 22:17

The output from the parsed JSON is {"fileList":["Queries","Scripts","Sprocs","Tables","Views"]} – knot22 Jul 24 '16 at 22:22

@knot22 open up the console and check what `Array.isArray(fileList)` gives you – George Mauer Jul 24 '16 at 22:33

I added that as the first line of the pathContents() function but nothing appeared in the Console. Also tried putting it in the function that calls pathContents() and nothing showed in the Console either. Evidently I am doing something wrong. – knot22 Jul 24 '16 at 22:40

You need to add `console.log(Array.isArray(fileList))` if it's in the program itself. – Michael Lorton Jul 24 '16 at 22:42

Yeah, sorry for not being very specific - you might want to take a minute and watch a video on how to use the debugger to halt code execution at a certain point so that you can look around (though fair warning - in my experience the Firefox debugger is one of the worst out there and frequently just plain doesn't work) – George Mauer Jul 24 '16 at 22:46

Made the update recommended by Malvolio but the Console still shows nothing. – knot22 Jul 24 '16 at 22:46

@GeorgeMauer -- are you talking about Firebug? My experience with it has been entirely positive. – Michael Lorton Jul 24 '16 at 22:47

I switched over to Chrome and then `console.log(Array.isArray(fileList)` worked fine. It is returning true. – knot22 Jul 24 '16 at 22:50

@Malvolio both Firebug and the built-in one. Nearly threw my computer out the window a few years ago after the 50th time it failed to stop on a breakpoint or expose a variable in console, or swallowed a console.log. It's happened to several coworkers too. Might depend on the Operating System though. I like Firefox in theory, but they are by far the most frustrating experience with browser bugs I've had since IE6 days (try doing anything with building up custom iframes). Anyways, waay off topic. – George Mauer Jul 24 '16 at 22:51

@knot22 then `fileList.map` should definitely exist and should definitely be a function - are you sure that you copied the original code correctly? – George Mauer Jul 24 '16 at 22:52

I will edit my original post so it's visible. I was not sure if this code was supposed to be placed in the pathContents() function or if it was meant to be implemented some other way. – knot22 Jul 24 '16 at 22:54

@knot22 this code *is* the `pathContents` function - note the `let pathContents = ..` - that creates a function and puts it into a `pathContents` variable. Everything else is the function body using es6 arrow functions. Which by the way won't work in Firefox 47 or Chrome < 51. You're coming to Javascript at a weird time. The language saw its largest update of syntax ever last year and many people still don't know how to use the new sytnax, what it means, nor which browsers natively support it (and how to get around that with transpilers). – George Mauer Jul 24 '16 at 22:57

Ah ha! OK, I replaced the line that called pathContents() to the code exactly posted by @Malvolio above and the browser output is nearly there. It's just not being displayed as list items. I'll edit my original post with a screen shot so you can see the output now. – knot22 Jul 24 '16 at 23:02

score -1 · Answer 4 · edited May 23 '17 at 11:58

-1

For better performance only parse the HTML string at the very end:

function pathContents(fileList) {
    var ul = '<ul>';
    for( var file of fileList )
        ul += `<li>${file}</li>`;
    ul += '</ul>';
    
    return $.parseHTML(ul);
;
}

console.log( pathContents([1,2,3])[0].outerHTML )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

or as simple as:

function pathContents(fileList) {
    var ul = '<ul><li>' + fileList.join('</li><li>') + '</li></ul>';

    return $.parseHTML(ul);
}

By using $.parseHTML the parsed output will be stripped of any <script> tags. If you do want to keep them, pass true as the second argument for that method. See further discussion about this.

Please be careful when creating DOM from javascript: make sure the input is sanitized
(does not contain any malicious code).

edited May 23 '17 at 11:58

Community

1
1

answered Jul 24 '16 at 21:56

vsync

118,978
58
307
400

1

That could even be a one-liner :) – trincot Jul 24 '16 at 21:57
1

but what about some special characters? =) look at my answer – spirit Jul 24 '16 at 21:58
1

Should ''? – knot22 Jul 24 '16 at 21:59
@knot22 - yeah thanks, fixed. what about special characters? works good with `pathContents(['a&b',2,3]);` – vsync Jul 24 '16 at 22:01
1

@trincot - one liner it is :) – vsync Jul 24 '16 at 22:02
this will produce an invalid `html` from the validator point of view =) – spirit Jul 24 '16 at 22:02
@spirit - the validator can go validate itself ;) anyway, build tools should convert such things into HTML entities automatically – vsync Jul 24 '16 at 22:04
1

PLEASE DON'T DO THIS! This is a cross-site-scripting attack vector. Your site and your users will get hacked. I agree with the concept you're trying to portray, but people will see this and stick this in their sites without further research. Either put a hard disclaimer on it or delete the answer. – George Mauer Jul 24 '16 at 22:17
I'm with George. Don't [bury dragon's teeth](https://en.wikipedia.org/wiki/Dragon%27s_teeth_(mythology)), especially not pursuing an illusory or unneeded performance enhancement. – Michael Lorton Jul 24 '16 at 22:45
@GeorgeMauer, How? – JonSG Jul 24 '16 at 22:58
@JonSG -- a file named `` will have an... undesired effect. – Michael Lorton Jul 24 '16 at 23:06
@JonSG suppose `file` is something that a user can define at some point? What happens when they set it to ``? What happens when someone views the page? (Actually that exact thing wouldn't work but you get the idea I hope...also rather than pop up an error how about stealing authentication cookies?) You can find out more by looking up how XSS works. Any time you concatenate strings (and then set `innerHTML`) you're going to have this prolem. That's why using the `text` method (`textContent` property in vanillajs) is highly recommended. – George Mauer Jul 24 '16 at 23:11
@GeorgeMauer - WHAT are you talking about? are you kidding me??? the question is about looping an array and returning a jQuery unordered list element. that is all, it's something done everywhere, for a decade. nobody even said that the OP's code is even connected to the internet. I have been downvoted unfairly. – vsync Jul 25 '16 at 08:20
@GeorgeMauer - it's not the responsibility and the scope of this thread to deal with imaginary risks which might exist or not, that is for another separate discussion. a simple question got a simple answer, to the point, and there is no "law" saying an answer must cover every possible scenario. I do the implement the above code for years in internal protected systems where nothing can happen, and there is protection layer also which will prevent such things as you've mentioned, which if completely transparent. – vsync Jul 25 '16 at 08:23
@vsync Like I said - the concept that you're conveying I actually agree with. It's just a little irresponsible to put code with obvious security bugs and no warning on here. You *know* how the internet works - people will find, copy, paste. If you edit a disclaimer into your answer that this is a security issue and exactly when it is/is not a problem I would gladly upvote. – George Mauer Jul 25 '16 at 14:43
@GeorgeMauer - (1) nobody said the array that is being transformed into a list element is of any malicious content, so you could assume your unbased assumption on ANY array-related answer in here which transforms it to HTML, which is how templates work (2) the title of this page and the manner of the question has nothing to do with injecting any scripts. it is highly improbable that doing standard array iteration and constructing HTML will harm anyone. it's is the basic thing done by countless everyday. (like underscore templates/Jade and so on), stop making an elephant out of a mouse. – vsync Jul 25 '16 at 14:52
My answer is not different (and better) than the chosen one and was bashed unfairly. – vsync Jul 25 '16 at 14:54
Templates do *not* simply concatenate - nearly all the ones I know have built-in anti-xss scrubbing devices and check them regularly against OWASP. If you really think XSS isn't that big a deal, go install the BeefProject VM and spend 15 minutes playing with a real hacker tool - cross site scripting is terrifying in what it can do. Yes, many people do this, and many get hacked. But yes, I agree - it wasn't in the scope of the question, but you can't ignore the reality of the internet and how sites like SO work. – George Mauer Jul 25 '16 at 15:25
@GeorgeMauer - updated my answer, any scripts are now omitted by default. – vsync Jul 25 '16 at 15:46
@vsync unfortunately, that doesn't do it, as is [explicitly documented](https://api.jquery.com/jquery.parsehtml/) under "Security Considerations" - in fact - that img onerror thing is the first thing that any hacker would try. I don't think you have to show the OP how to defend against xss. Just mention that this technique might expose it and they should research it to verify whether it applies to them or not. – George Mauer Jul 25 '16 at 15:58
@GeorgeMauer - I knew that prior to editing. Added a disclaimer for the poor souls who might somehow use an array from an unknown source and convert it to DOM and then inject it on their page. – vsync Jul 25 '16 at 16:10
@vsync -- do not suppose that the behavior you mock as only something "a poor soul" would do is any less common than rain on Sundays. The only reason that XSS works is that programmers are not vigilant against it. "Fools attract predators, by being easy prey." — Richard Adams – Michael Lorton Jul 25 '16 at 20:11
a fool developer would ignore DRY principle, a wise one will implement a security measurement in a higher level of the code, which wouldn't need to be repeated, as in this case. please go now and fix 10 million other answers in this website regarding generating DOM and make sure all of those also include XSS safty guard... it's out of the scope of the questions. answers are not articles which should cover every possible thing. I am against that approach. – vsync Jul 26 '16 at 08:08

translation of vanilla JavaScript to jQuery

4 Answers4