KnockoutJS - 将observableArray与另一个observableArray进行比较

时间:2018-04-25 15:22:03

标签: javascript knockout.js knockout-mapping-plugin

我有一个像这样格式化的json数据

{
"ITEMS": [
    {
        "option": "one",
        "values": ["A","B","C","D"]
    },
    {
        "option": "two",
        "values": ["E","F","G"]]
    }
]
}

和像这样的脚本代码

function Item(data) {
    this.option = ko.observable(data.option);
    this.values = ko.observableArray(data.values);
}

var ProductIndexVM = (function() {
  function ProductIndexVM() {

    items = ko.observable();
    filtered_items = ko.observableArray([]);

    selectedItems = ko.computed(function() {

       return ko.utils.arrayFilter(items(), function(item) { 
        // return something using compare
     });
    });


    // after ajax success
    var mappedItems = $.map(result.ITEMS, function(item) { 
      return new Item(item) 
    });
    items(mappedItems);

  }

  return ProductIndexVM;

})();

成功后,ajax请求数据已映射到可观察的项目中。

问题是我需要将 filtered_items observableArray与项目函数 observableArray进行比较,以便在 filtered_items 内的项目时与任何一个项目功能匹配,它将返回或不返回。
简化整件事我想整理那些仅包含在 filtered_items 中的项目。

例如, filtered_items 的内容与以下内容相同

["A", "C", "E"]

输出将是

{
"ITEMS": [
    {
        "option": "one",
        "values": ["A","C"]
    },
    {
        "option": "two",
        "values": ["E"]]
    }
]
}


如何比较 selectedItems 内的内容?

1 个答案:

答案 0 :(得分:0)

这与击倒无关,这是一个简单的算法问题。给定一个对象数组和一个“选定值”数组,如何使用后者过滤前者:

var input = {
  "ITEMS": [
      {
          "option": "one",
          "values": ["A","B","C","D"]
      },
      {
          "option": "two",
          "values": ["E","F","G"]
      }
  ]
}

var filters = ["A","C","E"];

var result = input.ITEMS.map(item => {
   return {
      "option": item.option,
      "values": item.values.filter(value => filters.indexOf(value)>-1)
   }
});

console.log(result);

现在应用于您的淘汰赛,只需像往常一样阅读您的可观察数组,但使用与上述相同的算法。