使用 jQuery 从 JSON 数组中获取唯一结果

IT技术 javascript jquery arrays json
2021-01-16 09:48:45

我有这段代码将数组中的“类别”显示到 JQuery 简单列表中。

它工作正常，但如果“篮球”类别中有 3 个项目，则该类别将出现 3 次。

我怎么能让它们只出现一次？谢谢你。

这是代码：

function loadCategories() {
    console.debug('About to refresh with sort type : ' + sortType);
    var items = [];

    $.each(catalog.products,
        function(index, value) {
            items.push('<li id="' + index + '">' +
                  '<a data-identity="productId"  href="./productList.page?category=' + value.category + '" >' +
                  '<p style="margin-bottom:0px;margin-top:0px;">' + value.category + '</p></a> </li>');
        }
    );

    categoryView.html(items.join(''));
    categoryView.listview('refresh');
}

这是我的数组的代码：

var catalog = {"products": [
{"id": "10001",
"name": "Mountain bike",   
"color": "Grey/Black",
"long-desc": "12-speed, carbon mountain bike.",
"description": "",
"size": "20 inches",
"category": "Outdoors/ Equipment rental",
"sport": "Cycling",
"brand": "DaVinci",
"top-seller": ""},

{"id": "10002",
"name": "Pro Multi Basketball",   
"color": "Rainbow",
"long-desc": "On sale this week only! This limited edition basketball is multi-coloured, and offers pro performance. Fun and games on the court!",
"description": "Limited edition basketball.",
"size": "N/A",
"category": "Team gear",
"sport": "Basketball",
"brand": "Nike",
"top-seller": "x"},
3个回答

我不知道您的products数组是如何构建的（因此我的示例可能需要根据您的需要进行一些修改），但是您可以编写一小段代码，首先将您的唯一类别收集到一个新数组中：

var categories = [];

$.each(catalog.products, function(index, value) {
    if ($.inArray(value.category, categories) === -1) {
        categories.push(value.category);
    }
});

jsFiddle 演示

categories将保存您需要的唯一类别，您可以使用它来构建您的 HTML（li不过请注意这些元素的 ID ，请记住 ID 不能重复，您可以给它们一个前缀）。

@Djeroen 是的，您只需要稍微更改代码即可。我建议你玩代码，理解它，然后你会发现它很容易。
2021-03-27 09:48:45
@JFFF 我将您的示例对象加载到我的代码中：jsFiddle Demo #2。似乎对我有用。随意调整我的小提琴以获得您期望的结果（也许您想向categories数组中添加其他值）。
2021-04-04 09:48:45
似乎不起作用.. 我会通知你的。如果您有时间研究它，我会使用我的数组中的代码编辑我的问题。再次感谢。
2021-04-05 09:48:45
你好，有没有办法让它对于任何其他领域都是独一无二的，所以让我们说（使用类别 json）你想要所有颜色没有任何重复。
2021-04-10 09:48:45

如何通过属性获取唯一值

function groupBy(items,propertyName)
{
    var result = [];
    $.each(items, function(index, item) {
       if ($.inArray(item[propertyName], result)==-1) {
          result.push(item[propertyName]);
       }
    });
    return result;
}

用法

var catalog = { products: [
   { category: "Food & Dining"},
   { category: "Techonology"},
   { category: "Retail & Apparel"},
   { category: "Retail & Apparel"}
]};

var categoryNames = groupBy(catalog.products, 'category');
console.log(categoryNames); 


var catalog={
    products : [
        { category: 'fos', name: 'retek' },
        { category: 'fos', name: 'item' },
        { category: 'nyedva', name: 'blabla' },
        { category: 'fos', name: 'gihi' },
    ]
};
console.log(_.uniq(_.map(catalog.products, 'category')));
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.js"></script>

使用_uniq

其它你可能感兴趣的问题
上一篇从浏览器检测确切的操作系统版本 下一篇在 JavaScript 中向日期添加月份