javascript - 当重复时显示 json 对象数组的值一次

Question

我正在尝试从 json 数据形成一个列表，请参阅 example我想要的是，当出现重复值时，它只会向我显示一次该值(2x Martini 玻璃，我希望它只返回列表中的一个)，但保留数组不变，即仍然希望能够保存所有数组中的值。

肯定有一个简单的方法来实现这一点，但我没有找到它......

var data = {
    "cocktails": [{
        "name": "Bloody Mary",
            "glass": "longdrink",
            "ingredients": {
            "main": "vodka",
                "secondary": "tomato juice",
                "addition": "tabasco"
        }
    }, {
        "name": "Daiquiri",
            "glass": "martini glass",
            "ingredients": {
            "main": "white rum",
                "secondary": "lime juice",
                "addition": "sugar syrup"
        }
    }, {
        "name": "Martini",
            "glass": "martini glass",
            "ingredients": {
            "main": "gin",
                "secondary": "vermout",
                "addition": "olive"
        }
    }]
}

$(data.cocktails).each(function () {
    var output = "<ul><li>" + this.glass + "</li></ul>";
    $('#placeholder').append(output);
});

Answer 1

创建一个空数组:

var glasses = [];

将所有眼镜推到它上面。

data.cocktails.forEach(function (el) {
  glasses.push(el.glass);
});

创建一个重复数据删除的眼镜阵列。这会使眼镜阵列完好无损，以便您可以再次使用它。

var dedupedGlasses = glasses.filter(function(elem, pos) {
  return glasses.indexOf(elem) == pos;
});

使用 join 创建 HTML 列表。

var html = '<ul><li>' + dedupedGlasses.join('</li><li>') + '</li></ul>';

并添加到页面。

$('#placeholder').append(html);

Demo

你可以使用一些东西like this获取每种眼镜类型的计数:

function getCount(arr) {
  return arr.reduce(function(m, e){
    m[e] = (+m[e]||0)+1; return m
  }, {});
}

console.log(getCount(glasses)); // { longdrink=1, martini glass=2 }