underscore find method issue on array of objects

Question

I have following array of objects

var ppl = [
    {
        name: "John", 
        content: "<p>description</p>"
    }, 
    {
        name: "Mike",
        content: "<p>Desc</p>"
    }, 
    {
        name: "Steve",
        content: "html"
    }, 
    {
        name: "Michael",
        content: "<p>description</p>"
    }
];

What I am doing is to display above array. Then when user clicks on name return his content. Like following

    $('a.ppl').on('click', function (e) {
        e.preventDefault();

        var text = $(this).text();

        var content = _.find(ppl, function (desc) { if (desc.name === text) return desc.content; });
        console.log(content);
    });

What above code does is it finds the content of the person clicked however it returns the entire object of that person e.g. when John is clicked the his entire object { name: "John", content: "<p>description</p>" } is returned by the _.find() function. I just need the content. How can I return content only?

what is the problem with doing var element = _.find(ppl, function (desc) { if (desc.name === text) return desc; }); console.log(element.content); — S4beR
– S4beR, Commented Sep 28, 2013 at 8:00

Archy Will He · Accepted Answer · 2013-09-28 17:10:11Z

1

If I were you I would simply do a loop:

var length = ppl.length;
var findcat = function(){
   for (var a = 0; a < length; a++) { if(ppl[a].name==text){return ppl[a].content} };
}
var content = findcat();

rather than using underscore.js .

Or if you really want to use underscore.js, change it to this:

 var content = _.find(ppl, function (desc) { if (desc.name === text) return desc; });
 content = content.content;

and it will work.

Updates (regarding HTML strings in json):

It is okay to store them in json as these HTML strings will simply be considered as normal strings data (just don't forget to escape characters like quotation and forward slash). When real HTML elements are being created from these strings (using jquery functions like .html(string), append(string) ), the browser will need to render these new contents and it may cause a slow performance comparing to leaving all the page-rendering at the start for the browser, but the difference will be pretty subtle. So in terms of performance, it is always okay to have them in json. But in terms of security, you should be careful when there were HTML markup in your data because you are making XSS easier to be accomplished. (Here is a wikipedia article that provides more details on XSS, also known as Cross-site scripting.)

edited Sep 28, 2013 at 17:10

answered Sep 28, 2013 at 7:53

Archy Will He

9,8074 gold badges37 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Om3ga Over a year ago

Thank you for the answer. One question related my json object, Is it good to remove html tags from content: <p>description</p> or should I keep it? I am asking this because I want to know whether removing html elements from json is according to best practice or not. I need efficient solution and secure too.

Om3ga Over a year ago

About escape characters, should escape it at the backend or front end? If front end then how can I escape in my example above?

c.P.u1 · Accepted Answer · 2013-09-28 07:56:23Z

0

I don't think you need an array here. A simpler and more efficient way would be to use names as properties.

var ppl = {"John": "<p>description</p>", "Mike": "<p>Desc</p>" };

 $('a.ppl').on('click', function (e) {
        e.preventDefault();

        var text = $(this).text();

        console.log(ppl[text]);
 });

answered Sep 28, 2013 at 7:56

c.P.u1

17.1k6 gold badges48 silver badges42 bronze badges

Comments

shahram.at.26 · Accepted Answer · 2013-09-28 08:03:31Z

0

This is the expected Behavior of find operator which returns whole found item ! , why dont use content.content

answered Sep 28, 2013 at 8:03

shahram.at.26

343 bronze badges

Comments

bingjie2680 · Accepted Answer · 2013-09-28 08:11:21Z

0

the _.find looks through each value in the list, returning the first one that passes a truth test, when you return desc.content, it is evalued to true, so the desc object is return. so you can't return inside the find. but you can just access the content as desc.content. here is jsfiddle code:

 $('a.ppl').on('click', function (e) {
    e.preventDefault();

    var text = $(this).text();
    var desc = _.find(ppl, function (desc) { 
        return desc.name === text; 
    });
    console.log(desc.content);
});

edited Sep 28, 2013 at 8:11

answered Sep 28, 2013 at 7:56

bingjie2680

7,7839 gold badges50 silver badges72 bronze badges

Collectives™ on Stack Overflow

underscore find method issue on array of objects

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related