Question

我有以下对象数组

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

我正在做的是显示上面的数组。然后，当用户点击名称返回他的内容。喜欢以下

    $('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);
    });

上面的代码所做的是它找到被点击的人的内容但是它返回该人的整个对象，例如单击John时，{ name: "John", content: "<p>description</p>" }函数将返回其整个对象_.find()。 我只需要内容。如何仅返回内容？

Answer 1

如果我是你，我只会做一个循环：

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();

而不是使用underscore.js。

或者，如果您真的想使用underscore.js，请将其更改为：

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

它会起作用。

更新（关于json中的HTML字符串）：

将它们存储在json中是可以的，因为这些HTML字符串将被简单地视为普通字符串数据（只是不要忘记转义像引号和正斜杠这样的字符）。当从这些字符串创建真正的HTML元素时（使用诸如.html(string)，append(string)之类的jquery函数），浏览器将需要呈现这些新内容，与离开所有页面相比，它可能会导致性能降低 - 在浏览器开始时，但差异将非常微妙。所以在性能方面，将它们放在json中总是可以的。但就安全性而言，当您的数据中存在HTML标记时应该小心，因为您使XSS更容易完成。（这是一个wikipedia article，它提供了有关XSS的更多详细信息，也称为跨站点脚本。）

Answer 2

_.find查看列表中的每个值，返回通过真值测试的第一个值，当您返回desc.content时，它被评估为true，因此desc对象是回归。所以你不能回到里面找到。但您只需访问content作为desc.content。这是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);
});

Answer 3

我认为你不需要这里的阵列。一种更简单，更有效的方法是使用名称作为属性。

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]);
 });

Answer 4

这是find运算符的预期行为，它返回整个找到的项目！，为什么不使用content.content

下划线查找对象数组的方法问题

4 个答案: