Question

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

确实有一种简单的方法可以达到这个目的，但我找不到它......

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 }

Answer 2

与@Andy基本相同，但略有不同。

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"
        }
    }]
}

$('#placeholder').append('<ul><li>' + data.cocktails.map(function (cocktail) {
    return cocktail.glass;
}).filter(function (glass, index, array) {
    return array.indexOf(glass) === index;
}).join('</li><li>') + '</li></ul>');

在jsFiddle

上

Answer 3

我可以指出一个需要定义新数组的解决方案

var cleanArr = []
$(data.cocktails).each(function () {
   if($.inArray(this.glass, cleanArr) === -1) cleanArr.push(this.glass);
   var output = "<ul><li>" + this.glass + "</li></ul>";
   $('#placeholder').append(output);

});
console.log(cleanArr)

我喜欢数组的创建方式，这就是我发布此解决方案的原因，但这不是我的想法 - ＆gt;取自： Remove Duplicates from JavaScript Array

Answer 4

这是一个适合你的jsFiddle。 http://jsfiddle.net/Q74pj/1/

这就是我所做的：

我使用了一个调用uniqueArray的新函数来创建一个新的关联数组（迭代和填充最快）。您需要创建一个唯一的数组，或者通过饮料对其进行排序并跳过重复项。

function uniqueValues (arr) {
    //if (arr.length < 2) return arr;
    var retVal = {};
    for (var i = 0; i < arr.length; i++) {
        retVal[arr[i].glass] = arr[i];
    }

    return retVal;
}

然后只使用另一种方式迭代关联数组：

var uniqueArrayValues = uniqueValues(data.cocktails);
for (key in uniqueArrayValues) {
    var output = "<ul><li>" + uniqueArrayValues[key].glass + "</li></ul>";
    $('#placeholder').append(output);
}

重复时，从json对象显示一次数组的值

4 个答案: