Question

我有一个选择框，我使用下面的代码填充json文件中的数据：

function getType(str) {
    $.ajax({
        url: 'xxx',
        type: 'GET',
        format: 'json',
        data: {
            take: 100,
            skip: 0
        },
    }).done(function (data) {
        $.each(data, function (i, item) {
            var option = $('<option>').text(item.type.name)
            option.appendTo("#choose");
        })
    })
};
getType();

问题是返回的值type.name中有重复的重载，我想过滤掉这些重复项，只显示一次每个唯一值。我有点卡在哪里开始这个虽然所以帮助将不胜感激：）

Answer 1

只有使用选择器#choose [text="someText"]选项中不存在具有相同文字的选项时，才能编写附加选项的条件。

function getType(str) {
    $.ajax({
        url: 'xxx',
        type: 'GET',
        format: 'json',
        data: {
            take: 100,
            skip: 0
        },
    }).done(function (data) {
        $.each(data, function (i, item) {
            if($("#choose").children('option[text="' + item.type.name + '"]').length == 0){
                var option = $('<option>').text(item.type.name)
                option.appendTo("#choose");
            }
        })
    })
};
getType();

Answer 2

试试此代码段。

.done(function(data) {
var records=[];
$.each(data, function (i, el) {
    if ($.inArray(el, records) === -1) records.push(el); //filters the duplicate elements
     });
$.each(records, function(i, item) {
    var option = $('<option>').text(item.type.name)
    option.appendTo("#choose");
    });
});

<强>更新如果要从json name变量中过滤掉data，请尝试使用此代码段。

.done(function(data) {
var records=[], nameList = [];
$.each(data, function (i, elem) {
    nameList.push(elem.type.name);
     });
$.each(nameList, function (i, el) {
    if ($.inArray(el, records) === -1) records.push(el);
     });
$.each(records, function(i, item) {
    var option = $('<option>').text(item)
    option.appendTo("#choose");
    });
});

Answer 3

您可以使用以下过滤器：

dist

Answer 4

您需要做的就是过滤掉已找到的值。请在线查找评论以获取更多信息。

＆＃13;

//Sample data
var data = [
    {
        "type": { "id": 1, "name": "sample string 2" }, 
    },
    {
        "type": { "id": 1, "name": "sample string 2" }, 
    },
    {
        "type": { "id": 1, "name": "sample string 1" }, 
    },
    {
        "type": { "id": 1, "name": "sample string 2" }, 
    },
    {
        "type": { "id": 1, "name": "sample string 2" }, 
    },
    {
        "type": { "id": 1, "name": "sample string 4" }, 
    },
    {
        "type": { "id": 1, "name": "sample string 2" }, 
    },
    {
        "type": { "id": 1, "name": "sample string 3" }, 
    }
]

//Create an empty object
var $items = $();
$.each(data, function(i, item) {
    //Construct the option
    var $option = $('<option/>', {text: item.type["name"]});
    //Add it to the bucket only if it's not already added!
    if (!$items.filter(":contains(" + item.type["name"] + ")").length) {
        $items = $items.add($option);
    }
});
//Always append outside the loop!
$("#choose").append($items);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="choose"></select>

＆＃13;

Answer 5

使用Array.prototype.filter并创建一个数组来跟踪唯一名称，您可以构建一个过滤后的数据数组，然后迭代以显示您的唯一数据集。

function getType(str) {
  $.ajax({
    url: 'xxx',
    type: 'GET',
    format: 'json',
    data: { take: 100, skip: 0 },
  })
  .done(function(data) {
      var filteredData = [];
      var uniqueNames  = [];
      data.filter(function (data) {
        if (uniqueNames.indexOf(data.type.name) < 0) {
          uniqueNames.push(data.type.name);
          filteredData.push(data);
        }
      });

      $.each(filteredData, function(i, item) {
        var option = $('<option>').text(item.type.name)
        option.appendTo("#choose");
      })
   })
};
getType();

使用jquery在json填充的选择框中过滤掉重复数据

5 个答案: