超前嵌套json对象

Question

我对Ember和JSON很陌生。我希望解析一个JSON对象，该对象在下面带有，并通过搜索嵌套的对象值来访问它们的键。

我有一个Json格式：

return [
  {
    "id": 1,
    "category_name": "Supermarket",
    "category_description": "SUPER MARKET",
    "image_url": "",
    "merchants": [
    {
      "name": "CARREFOUR",
      "id": 12,
      "merchant_type_id": 1,
      "merchant_type_description": "Gold",
      "merchant_redeption_rate": 0.002500,
      "image_url": "https://jpg",
      "branches": [
      {
        "id": 123456,
        "latitude": 37.939483,
        "area": "ΑΓ. ΔΗΜΗΤΡΙΟΣ",
        "zip": "12345"
      },
      {
        "id": 4567890,
        "longitude": 23.650622,
        "area": "ΑΓ. ΙΩΑΝΝΗΣ ΡΕΝΤΗΣ",
        "zip": "12345"
      }
      ]
    },
    {
      "name": "CAFCO",
      "id": 13,
      "merchant_type_id": 3,
      "merchant_type_description": "None",
      "merchant_redeption_rate": 0.002500,
      "image_url": "https:.jpg",
      "branches": [
      {
        "id": 127890,
        "latitude": 38.027870,
        "area": "ΠΕΡΙΣΤΕΡΙ",
        "zip": "12345"
      }
      ]
    }
    ]
  },


{
  "id": 2,
  "category_name": "Πολυκαταστήματα",
  "category_description": "ΠΟΛΥΚΑΤΑΣΤΗΜΑ",
  "image_url": "",
  "merchants": [
  {
    "name": "AGGELOPOYLOS CHR.",
    "id": 15,
    "merchant_type_id": 2,
    "merchant_type_description": "Silver",
    "merchant_redeption_rate": 0.002500,
    "image_url": "https://www.nbg.gr/greek/retail/cards/reward-programmes/gonational/PublishingImages/aggelopoulos.jpg",
    "branches": [
    {
      "id": 234780,
      "latitude": 35.366118,
      "longitude": 24.479461,
      "address": "ΕΘΝ. ΜΑΚΑΡΙΟΥ 9 & ΕΛ. ΒΕΝΙΖΕΛΟΥ 1",
      "area": "Ν. ΦΑΛΗΡΟ",
      "zip": "12345"
    }
    ]
  }
  ]
}


];

--------------------------Updated

例如，我想使用“提前输入”搜索商户的名称，当我们为搜索所写的信件与商户的名称匹配时，它将出现相应的category_name和反向。

示例->当我输入s时，它将出现:类别:超市，名称:家乐福名称: CAFCO

而同样的输出在下拉式搜索时，我键盘的字母是c。

有什么帮助吗？

新的Jsbin示例

Answer 1

在我看来，最简单的方法就是创建一个包含纬度数组的计算属性。但我们怎样才能到达那里？

要达到latitude，您需要遍历merchants数组和branches数组。由于这将跨越多个元素，您将以“数组数组”类型的数据结构结束，这是很烦人的。因此，为了简化这一点，我们可以创建一个简单的flatten函数，如下所示：

  flatten: function(origArray){
    var newArr = [];
    origArray.forEach(function(el) {
      el.forEach(function(eachEl){
        newArr.push(eachEl);
      });
    });

    return newArr;
  },

除了上面的函数之外，Ember还为我们提供了许多其他有用的函数，可以在数组上使用(参见这里)。其中一个是mapBy(property)，它将数组转换为另一个数组，只保留我们指定的属性值。

因此，要创建一个lats (用于纬度)属性，我们可以这样做：

lats: function(){
  var merchantsArr = this.get('model').mapBy('merchants');
  merchantsArr = this.flatten(merchantsArr);
  var branchesArr = merchantsArr.mapBy('branches');
  branchesArr = this.flatten(branchesArr);

  return branchesArr.mapBy("latitude").compact();
}.property('model')

上面，我基本上使用的是mapBy，flatten (见上面)和compact

返回删除了所有空元素和未定义元素的数组的副本。

一旦您拥有了包含所有必要数据的lats属性，其余的就很容易了。

对组件的调用变成：

{{x-typeahead data=lats name='category_name' selection=myColor}}

注意lats，而不是最初传递到组件中的model。

现在，要访问组件中的data属性值，请执行以下操作

`this.get('data')`

您可以将其作为source传入，如下所示：

source: substringMatcher(self.get('data'))

工作溶液这里

更新

根据你最新的问题更新我的答案。

好吧，这有点复杂了。您现在需要的不仅仅是来自对象的一个属性(latitude)。你需要category_name和商人name。

除了只从数组中获取一个属性的mapBy之外，Ember还有一个map，它允许您将数组转换为您想要的几乎任何东西：

lats: function(){
  var merchantsArr = this.get('model').map(function(thing){
    var category_name = thing.category_name;
    return thing.merchants.map(function(merchant){
      return {
        "name": merchant.name,
        "category": category_name
      };
    });
  });

  merchantsArr = this.flatten(merchantsArr);

  return merchantsArr;
}.property('model')

上面的代码看起来很复杂，但它基本上只是返回一个顶级对象的商人数组，并伴随着category_name。因为这是一个数组，所以我们需要将其扁平化。

然后，在组件内部，我们需要记住，我们不仅仅是传递一个字符串数组，而是传递一个对象数组。因此，我们需要查看对象的属性(名称和类别)是否匹配。

$.each(strs, function(i, str) {
  if (substrRegex.test(str.name) || substrRegex.test(str.category)) {
    matches.push(str);
  }
});

最后，要实际同时显示类别和商家名称，您需要告诉“提前输入”如何做到这一点：

templates: {
  suggestion: Handlebars.compile('<p>{{name}} – {{category}}</p>')
}

工作溶液这里