2017-12-18 304 views
17

我目前正在使用API​​检索,更新和删除数据的项目。我使用的API是prestashop API。所以在能够检索数据和更新一些项目后,我偶然发现了一个问题。正如文档中所述,通过API发送和检索的所有数据都与jsonxml由于API的某些数据在json返回中具有不同的级别,例如@attributes和@associations级别,所以我提出了这个问题。JSON @attributes和@association级别与js和/或angularjs

事情是我想访问这些数据,并结合angularjs我想显示这些数据。因此,让我向您展示我想要实现的一个快速示例。

首先JSON返回将是这样的。

{"products":{"product":[{"id":"1","id_manufacturer":"1","id_supplier":"1","id_category_default":"5","new":{},"cache_default_attribute":"1","id_default_image":"1","id_default_combination":"1","id_tax_rules_group":"1","position_in_category":"0","manufacturer_name":"Fashion Manufacturer","quantity":"0","type":"simple","id_shop_default":"1","reference":"demo_1","supplier_reference":{},"location":{},"width":"0.000000","height":"0.000000","depth":"0.000000","weight":"0.000000","quantity_discount":"0","ean13":"333456789111","isbn":{},"upc":{},"cache_is_pack":"0","cache_has_attachments":"0","is_virtual":"0","state":"1","on_sale":"0","online_only":"0","ecotax":"0.000000","minimal_quantity":"1","price":"16.510000","wholesale_price":"4.950000","unity":{},"unit_price_ratio":"0.000000","additional_shipping_cost":"0.00","customizable":"0","text_fields":"0","uploadable_files":"0","active":"1","redirect_type":"404","id_type_redirected":"0","available_for_order":"1","available_date":"0000-00-00","show_condition":"0","condition":"new","show_price":"1","indexed":"1","visibility":"both","advanced_stock_management":"0","date_add":"2017-03-16 14:36:24","date_upd":"2017-12-01 13:01:13","pack_stock_type":"3","meta_description":{"language":{"@attributes":{"id":"1"}}},"meta_keywords":{"language":{"@attributes":{"id":"1"}}},"meta_title":{"language":{"@attributes":{"id":"1"}}},"link_rewrite":{"language":"gebleekte-T-shirts-met-korte-mouwen"},"name":{"language":"Gebleekte T-shirts met Korte Mouwen"},"description":{"language":" 
Fashion maakt goed ontworpen collecties sinds 2010. Het merk biedt vrouwelijke combineerbare kleding en statement dresses en heeft een pr\u00eat-\u00e0-porter collectie ontwikkeld met kledingstukken die niet in een garderobe mogen ontbreken. Het resultaat? Cool, gemakkelijk, easy, chique met jeugdige elegantie en een duidelijk herkenbare stijl. Alle prachtige kledingstukken worden met de grootste zorg gemaakt in Itali\u00eb. Fashion breidt zijn aanbod uit met accessoires zoals schoenen, hoeden, riemen!<\/p>"},"description_short":{"language":" 

Gebleekt T-shirt met korte mouwen en hoge halslijn. Zacht en elastisch materiaal zorgt voor een comfortabele pasvorm. Maak het af met een strooien hoed en u bent klaar voor de zomer!<\/p>"},"available_now":{"language":"Op voorraad"},"available_later":{"language":{"@attributes":{"id":"1"}}},"associations":{"categories":{"@attributes":{"nodeType":"category","api":"categories"},"category":[{"id":"2"},{"id":"3"},{"id":"4"},{"id":"5"}]},"images":{"@attributes":{"nodeType":"image","api":"images"},"image":[{"id":"1"},{"id":"2"},{"id":"3"},{"id":"4"}]},"combinations":{"@attributes":{"nodeType":"combination","api":"combinations"},"combination":[{"id":"1"},{"id":"2"},{"id":"3"},{"id":"4"},{"id":"5"},{"id":"6"}]},"product_option_values":{"@attributes":{"nodeType":"product_option_value","api":"product_option_values"},"product_option_value":[{"id":"1"},{"id":"13"},{"id":"14"},{"id":"2"},{"id":"3"}]},"product_features":{"@attributes":{"nodeType":"product_feature","api":"product_features"},"product_feature":[{"id":"5","id_feature_value":"5"},{"id":"6","id_feature_value":"11"},{"id":"7","id_feature_value":"17"}]},"tags":{"@attributes":{"nodeType":"tag","api":"tags"}},"stock_availables":{"@attributes":{"nodeType":"stock_available","api":"stock_availables"},"stock_available":[{"id":"1","id_product_attribute":"0"},{"id":"11","id_product_attribute":"1"},{"id":"12","id_product_attribute":"2"},{"id":"13","id_product_attribute":"3"},{"id":"22","id_product_attribute":"4"},{"id":"23","id_product_attribute":"5"},{"id":"24","id_product_attribute":"6"}]},"accessories":{"@attributes":{"nodeType":"product","api":"products"}},"product_bundle":{"@attributes":{"nodeType":"product","api":"products"}}}}, 

结构简化

products { 
product { 
     id: 
     name: 
     category: 
     ... 
     @attributes { 
      id: 
      language: 
      ... 
     } 
     @attributes { 
      {"nodeType":"product_option_value","api":"product_option_values"},"product_option_value":[ 
       {"id":"1"}, 
       {"id":"11"}, 
       {"id":"8"}, 
       {"id":"2"}, 
       {"id":"3"} 
       ] 
      }, 
     } 
    } 
} 

使用$http.get()功能Angularjs我能够检索数据并使用NG重复和绑定组合,以显示product_names。现在我想访问@attribute值等等。但是,我将如何能够访问它们?有没有特定的方法来做到这一点?还是仅仅通过访问JSON对象的深度级来完成?

的产品AngularJS功能:

$http.get('config/get/getProducts.php', {cache: true}).then(function (response) { 
     $scope.products = response.data.products.product 
    }); 

然后在<html>我可以简单地使用:

<div ng-if="product.active == 1" class="productimg col-4" ng-repeat="product in products | filter : {id_category_default: catFilter.id}: true | filter:productSearch | filter:product.name | orderBy: 'name'"> 
    <p ng-bind="product.name.language"></p> 
</div> 

更新:2018年1月2日 所以阅读和测试后,一些我提出了一个合理的解决方案。我能够访问@属性和关联值,但我偶然发现了一个新问题。我为每个过滤器获得的回报是多个“id”值。看看下面的例子。

<div class="col-lg-3" ng-repeat="value in products"> 
    <p ng-bind="value.associations.categories.category"></p> 
</div> 

返回:

[{"id":"2"},{"id":"3"},{"id":"4"},{"id":"5"}] 

[{"id":"2"},{"id":"3"},{"id":"4"},{"id":"5"}] 

[{"id":"2"},{"id":"3"},{"id":"4"},{"id":"7"}] 

其中的每一行[..]代表不同的产品。现在我需要将这些值作为唯一的数字,以便我可以将它们与来自不同表格的相应ID值进行比较。一个好的结果是:

2, 3, 4, 5 

问题是我将如何能够得到这个解决方案?

如果有人对为什么和如何感兴趣。我试图从prestashop安装的产品中检索option_values的id和category的id,以及所有通过prestashop webservice的产品。

我在这个问题上增加了另一个赏金。

如果有任何问题,请在评论中提问。 在此先感谢!

+0

我在这里没有看到任何其他选项。您将不得不按深度级别访问。如果你知道JSON结构,你可以解析并转换成更方便的结构。这样你就只需要做一次,随处可以访问。 – Ashish

+0

@Ashish你觉得我一直在试图做什么? – Deathstorm

回答

9

据我所知,你想用嵌套的JSON对象ng-repeat。您需要使用多个中继器,因为一个重复的项目可以包含您想要显示的多个项目。

所以只要我能看到这样的事情应该工作:

<div ng-if="product.active == 1" class="productimg col-4" ng-repeat="product in products | filter : {id_category_default: catFilter.id}: true | filter:productSearch | filter:product.name | orderBy: 'name'"> 
    <p ng-bind="product.name.language"></p> 
    <table ng-repeat="cat in product.associations.categories"> 
     <tr ng-repeat="attr in [email protected]"> 
      <td >{{attr.nodeType}}</td> 
      <td >{{attr.api}}</td> 
     </tr> 
    </table> 
</div> 

看一看这里:https://www.aspsnippets.com/Articles/AngularJS-Using-ng-repeat-with-Complex-Nested-JSON-objects.aspx

+0

这是一个不错的尝试,但可悲的是这不适合我。首先你不能在ng-repeat中使用'@'符号。我会用其他一些方法来尝试这个例子,所以无论如何谢谢你! – Deathstorm

5

从你的问题我的理解,这个问题正在访问内部ng-repeat@attribute性能,请在下面的示例中使用ng-repeat显示@attribute值,我们还可以使用bracket notation而不是dot notation访问对象属性,更多地阅读here

请让我知道这个答案是否有助于解决您的问题,或者如果我在我的答案中遗漏了某些东西。

var app = angular.module('myapp', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.products = [{ 
 
    "id": "1", 
 
    "id_manufacturer": "1", 
 
    "id_supplier": "1", 
 
    "id_category_default": "5", 
 
    "new": { 
 

 
    }, 
 
    "cache_default_attribute": "1", 
 
    "id_default_image": "1", 
 
    "id_default_combination": "1", 
 
    "id_tax_rules_group": "1", 
 
    "position_in_category": "0", 
 
    "manufacturer_name": "Fashion Manufacturer", 
 
    "quantity": "0", 
 
    "type": "simple", 
 
    "id_shop_default": "1", 
 
    "reference": "demo_1", 
 
    "supplier_reference": { 
 

 
    }, 
 
    "location": { 
 

 
    }, 
 
    "width": "0.000000", 
 
    "height": "0.000000", 
 
    "depth": "0.000000", 
 
    "weight": "0.000000", 
 
    "quantity_discount": "0", 
 
    "ean13": "333456789111", 
 
    "isbn": { 
 

 
    }, 
 
    "upc": { 
 

 
    }, 
 
    "cache_is_pack": "0", 
 
    "cache_has_attachments": "0", 
 
    "is_virtual": "0", 
 
    "state": "1", 
 
    "on_sale": "0", 
 
    "online_only": "0", 
 
    "ecotax": "0.000000", 
 
    "minimal_quantity": "1", 
 
    "price": "16.510000", 
 
    "wholesale_price": "4.950000", 
 
    "unity": { 
 

 
    }, 
 
    "unit_price_ratio": "0.000000", 
 
    "additional_shipping_cost": "0.00", 
 
    "customizable": "0", 
 
    "text_fields": "0", 
 
    "uploadable_files": "0", 
 
    "active": "1", 
 
    "redirect_type": "404", 
 
    "id_type_redirected": "0", 
 
    "available_for_order": "1", 
 
    "available_date": "0000-00-00", 
 
    "show_condition": "0", 
 
    "condition": "new", 
 
    "show_price": "1", 
 
    "indexed": "1", 
 
    "visibility": "both", 
 
    "advanced_stock_management": "0", 
 
    "date_add": "2017-03-16 14:36:24", 
 
    "date_upd": "2017-12-01 13:01:13", 
 
    "pack_stock_type": "3", 
 
    "meta_description": { 
 
     "language": { 
 
     "@attributes": { 
 
      "id": "1" 
 
     } 
 
     } 
 
    }, 
 
    "meta_keywords": { 
 
     "language": { 
 
     "@attributes": { 
 
      "id": "1" 
 
     } 
 
     } 
 
    }, 
 
    "meta_title": { 
 
     "language": { 
 
     "@attributes": { 
 
      "id": "1" 
 
     } 
 
     } 
 
    }, 
 
    "link_rewrite": { 
 
     "language": "gebleekte-T-shirts-met-korte-mouwen" 
 
    }, 
 
    "name": { 
 
     "language": "Gebleekte T-shirts met Korte Mouwen" 
 
    }, 
 
    "description": { 
 
     "language": "Fashion maakt goed ontworpen collecties sinds 2010. Het merk biedt vrouwelijke combineerbare kleding en statement dresses en heeft een pr\u00eat-\u00e0-porter collectie ontwikkeld met kledingstukken die niet in een garderobe mogen ontbreken. Het resultaat? Cool, gemakkelijk, easy, chique met jeugdige elegantie en een duidelijk herkenbare stijl. Alle prachtige kledingstukken worden met de grootste zorg gemaakt in Itali\u00eb. Fashion breidt zijn aanbod uit met accessoires zoals schoenen, hoeden, riemen!<\/p>" 
 
    }, 
 
    "description_short": { 
 
     "language": "Gebleekt T-shirt met korte mouwen en hoge halslijn. Zacht en elastisch materiaal zorgt voor een comfortabele pasvorm. Maak het af met een strooien hoed en u bent klaar voor de zomer!<\/p>" 
 
    }, 
 
    "available_now": { 
 
     "language": "Op voorraad" 
 
    }, 
 
    "available_later": { 
 
     "language": { 
 
     "@attributes": { 
 
      "id": "1" 
 
     } 
 
     } 
 
    }, 
 
    "associations": { 
 
     "categories": { 
 
     "@attributes": { 
 
      "nodeType": "category", 
 
      "api": "categories" 
 
     }, 
 
     "category": [{ 
 
      "id": "2" 
 
      }, 
 
      { 
 
      "id": "3" 
 
      }, 
 
      { 
 
      "id": "4" 
 
      }, 
 
      { 
 
      "id": "5" 
 
      } 
 
     ] 
 
     }, 
 
     "images": { 
 
     "@attributes": { 
 
      "nodeType": "image", 
 
      "api": "images" 
 
     }, 
 
     "image": [{ 
 
      "id": "1" 
 
      }, 
 
      { 
 
      "id": "2" 
 
      }, 
 
      { 
 
      "id": "3" 
 
      }, 
 
      { 
 
      "id": "4" 
 
      } 
 
     ] 
 
     }, 
 
     "combinations": { 
 
     "@attributes": { 
 
      "nodeType": "combination", 
 
      "api": "combinations" 
 
     }, 
 
     "combination": [{ 
 
      "id": "1" 
 
      }, 
 
      { 
 
      "id": "2" 
 
      }, 
 
      { 
 
      "id": "3" 
 
      }, 
 
      { 
 
      "id": "4" 
 
      }, 
 
      { 
 
      "id": "5" 
 
      }, 
 
      { 
 
      "id": "6" 
 
      } 
 
     ] 
 
     }, 
 
     "product_option_values": { 
 
     "@attributes": { 
 
      "nodeType": "product_option_value", 
 
      "api": "product_option_values" 
 
     }, 
 
     "product_option_value": [{ 
 
      "id": "1" 
 
      }, 
 
      { 
 
      "id": "13" 
 
      }, 
 
      { 
 
      "id": "14" 
 
      }, 
 
      { 
 
      "id": "2" 
 
      }, 
 
      { 
 
      "id": "3" 
 
      } 
 
     ] 
 
     }, 
 
     "product_features": { 
 
     "@attributes": { 
 
      "nodeType": "product_feature", 
 
      "api": "product_features" 
 
     }, 
 
     "product_feature": [{ 
 
      "id": "5", 
 
      "id_feature_value": "5" 
 
      }, 
 
      { 
 
      "id": "6", 
 
      "id_feature_value": "11" 
 
      }, 
 
      { 
 
      "id": "7", 
 
      "id_feature_value": "17" 
 
      } 
 
     ] 
 
     }, 
 
     "tags": { 
 
     "@attributes": { 
 
      "nodeType": "tag", 
 
      "api": "tags" 
 
     } 
 
     }, 
 
     "stock_availables": { 
 
     "@attributes": { 
 
      "nodeType": "stock_available", 
 
      "api": "stock_availables" 
 
     }, 
 
     "stock_available": [{ 
 
      "id": "1", 
 
      "id_product_attribute": "0" 
 
      }, 
 
      { 
 
      "id": "11", 
 
      "id_product_attribute": "1" 
 
      }, 
 
      { 
 
      "id": "12", 
 
      "id_product_attribute": "2" 
 
      }, 
 
      { 
 
      "id": "13", 
 
      "id_product_attribute": "3" 
 
      }, 
 
      { 
 
      "id": "22", 
 
      "id_product_attribute": "4" 
 
      }, 
 
      { 
 
      "id": "23", 
 
      "id_product_attribute": "5" 
 
      }, 
 
      { 
 
      "id": "24", 
 
      "id_product_attribute": "6" 
 
      } 
 
     ] 
 
     }, 
 
     "accessories": { 
 
     "@attributes": { 
 
      "nodeType": "product", 
 
      "api": "products" 
 
     } 
 
     }, 
 
     "product_bundle": { 
 
     "@attributes": { 
 
      "nodeType": "product", 
 
      "api": "products" 
 
     } 
 
     } 
 
    } 
 
    }]; 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-controller="MainCtrl" ng-app="myapp"> 
 
    <div ng-if="product.active == 1" class="productimg col-4" ng-repeat="product in products | filter : {id_category_default: catFilter.id}: true | filter:productSearch | filter:product.name | orderBy: 'name'"> 
 
    <p ng-bind="product.name.language"></p> 
 
    <div ng-repeat="(key,value) in product['meta_title']['language']['@attributes']"> 
 
     Key: {{key}} , Value: {{value}} 
 
    </div> 
 
    </div> 
 
</div>

7

我认为你唯一的问题是用点号访问@属性,像这样 [email protected]

这不是有效的JavaScript,所以不是你应该使用的括号标记这个属性。

像这样:

product.associations.categories['@attributes']

2

你解决你的这个问题显然两种选择:

  1. 的预格式化的响应对象,以便在JSON所有的按键都是JS接受标识符。但在你的情况下这将是徒劳的。
  2. 其次是使用Object[fieldName]符号而不是Object.fieldName,因为json中的键也可以是数字。介绍一下JS中的数组是索引对象。