js @attributes和@association级别与js和/或angularjs

时间：2017-12-18 10:58:44

标签： javascript angularjs json web-services prestashop

我目前正在开发一个使用API​​来检索，更新和删除数据的项目。我使用的API是prestashop API。因此，在能够检索数据并更新某些项目之后，我偶然发现了一个问题。正如文档中所述，通过API发送和检索的所有数据都是json和xml，因为API的某些数据在json返回中具有不同的级别，如@attributes和@associations级别，我出现了有了这个问题。

我想访问这些数据，并结合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"}
                ]
            },
        }
    }
}

使用Angularjs中的$http.get()函数，我能够检索数据并使用ng-repeat和bind组合来显示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>

更新日期：01/02/2018 因此，在阅读并测试了一些评论之后，我提出了一个合理的解决方案。我能够访问@attributes和association值，但我偶然发现了一个新问题。我为每个过滤器获得的回报是多个＆＃34; id＆＃34;值。看一下下面的例子。

<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检索所有内容。

4 个答案:

答案 0 :(得分：8)

据我了解，您希望将ng-repeat与嵌套的JSON对象一起使用。您将需要使用多个转发器，因为一个重复的项目可以包含您想要显示的多个项目。

据我所知，这样的事情应该有效：

<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 cat.@attributes">
            <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

答案 1 :(得分：6)

我认为您唯一的问题是使用点符号访问@attributes，如product.associations.categories.@attributes

这不是有效的javascript，因此您应该对此属性使用括号表示法。

像这样：product.associations.categories['@attributes']

答案 2 :(得分：5)

根据您的问题，我了解问题是访问@attribute内的ng-repeat个属性，请在下面找到一个示例，其中显示使用@attribute的{​​{1}}值，我们也可以访问使用ng-repeat代替bracket notation的对象属性，请阅读更多here。

如果这个答案有助于解决您的问题，或者我在答案中遗漏了错误，请告诉我。

dot notation
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"
        }
      }
    }
  }];
});

答案 3 :(得分：3)

你有两个选择来解决你的问题：

  1. 预格式化响应对象，以便JSON中的所有键都是JS接受的标识符。但在你的情景中，这将是徒劳的工作。
  2. 其次是使用Object[fieldName]表示法而不是Object.fieldName，因为json中的键也可以是数字。请注意，JS中的数组是索引对象。
相关问题
最新问题