Json列表在页面HTML中的数组离子返回

时间:2016-06-19 20:10:12

标签: javascript json ionic-framework ng-repeat

我是离子的新手,我希望能够扩展一个简单的json数据集以包含数组中的列表:我的json文件如下所示:

    .factory('Purchase_orders', function($filter) { 
  var orders = [
    {
      id: 1,
      OrderTypeCoded: 'Order',
      CurrencyCoded:'EUR',
      OrderNumber:'1600000018',
      OrderDate:'2016-04-23 16:04:00',
      Identifier:'0001011843', 
      Name:'MULTIPREVE Prevenção e Segurança, Lda',
      Street:'Rua 5 de Outubro, Lote 5',
      PostalCode:'4715-238 Braga',
      City:'Nogueira',
      CountryCode:'PT',
      TaxNumber:'PT505674629',
      OrderLine: [
            {
              LineNumber: '00010',
              StandardProductCode: '10000005',
              ProductDescription: 'VALV RANH BFV-N /114,3MM 59300F040N',
              QuantityValue:'7',
              UOMCoded:'UN',
              PriceValue:'10.000',
              AmountValue:'70.000',
              LineState:'Normal',
              price: 2
            },
            {
              LineNumber: '00020',
              StandardProductCode: '10000005',
              ProductDescription: 'PARAFUSO 15MM',
              QuantityValue:'7',
              UOMCoded:'UN',
              PriceValue:'10.000',
              AmountValue:'70.000',
              LineState:'Normal',
              price: 2
            },     
      ],
      items: [1, 2,3],
      discount: 10,
      total_items: 2,
      total: 250,
      payment: {
        card: 20,
        cash: 0,
        receipt_number: '312'
      },
      date: '2016-04-23 16:25:00'
    },
    {
      id: 2,
      OrderTypeCoded: 'Order',
      CurrencyCoded:'EUR',
      OrderNumber:'1600000025',
      OrderDate:'2016-04-29 16:04:00',
      Identifier:'0001014583', 
      Name:'Motorrow, Lda',
      Street:'Rua 5 de Outubro, Lote 5',
      PostalCode:'4715-238 Braga',
      City:'Nogueira',
      CountryCode:'PT',
      TaxNumber:'PT505674629',
      OrderLine: [
            {
              LineNumber: '00015',
              StandardProductCode: '100875005',
              ProductDescription: 'RODA DENTADA 4X4',
              QuantityValue:'7',
              UOMCoded:'UN',
              PriceValue:'10.000',
              AmountValue:'70.000',
              LineState:'Normal',
              price: 2
            },
            {
              LineNumber: '00025',
              StandardProductCode: '102354005',
              ProductDescription: 'BATERIA',
              QuantityValue:'7',
              UOMCoded:'UN',
              PriceValue:'10.000',
              AmountValue:'70.000',
              LineState:'Normal',
              price: 2
            },     
      ],
      items: [1, 2],
      discount: 10,
      total_items: 2,
      total: 20,
      payment: {
        card: 20,
        cash: 0,
        receipt_number: '312'
      },
      date: '2016-04-23 16:40:00'
    },
    {
      id: 3,
      OrderNumber:'1600235018',
      items: [3, 4],
      discount: 50,
      total_items: 2,
      total: 50,
      payment: {
        card: 20,
        cash: 0,
        receipt_number: '312'
      },
      date: '2016-04-22 16:04:00'
    },
    {
      id: 4,
      OrderNumber:'1600458018',
      items: [3, 4],
      discount: 10,
      total_items: 2,
      total: 40,
      payment: {
        card: 20,
        cash: 0,
        receipt_number: '312'
      },
      date: '2016-04-22 17:04:00'
    },
    {
      id: 5,
      OrderNumber:'1600458011',
      items: [3, 4],
      discount: 10,
      total_items: 2,
      total: 40,
      payment: {
        card: 20,
        cash: 0,
        receipt_number: '312'
      },
      date: '2016-04-20 09:34:00'
    },
    {
      id: 6,
      OrderNumber:'1600458009',
      items: [3, 4],
      discount: 10,
      total_items: 2,
      total: 40,
      payment: {
        card: 20,
        cash: 0,
        receipt_number: '312'
      },
      date: '2016-04-19 11:04:00'
    } 
  ];

  return {
    all: function() {
      return orders;
    },
    groupByDate: function() {
      var group = {};
      for (var i = 0; i < orders.length; i++) {
        var dateObj = new Date(orders[i].date);
        var date = $filter('date')(dateObj, 'dd-MM-yyyy');

        orders[i].time = $filter('date')(dateObj, 'HH:mm');

        if (angular.isDefined(group[date])) {

          group[date].push(orders[i]);
        } else {
          // add group
          group[date] = [
            orders[i]
          ]
        }
      }

      return group;
    },
    remove: function(orderId) {
      orders.splice(orders.indexOf(orderId), 1);
    },
    get: function(orderId) {
      for (var i = 0; i < orders.length; i++) {
        if (orders[i].id === parseInt(orderId)) {
          return orders[i];
        }
      }
      return null;
    }
  };
})

所以我已经能够使用重复返回乐队列表并传递乐队ID以显示各个乐队的详细信息。

此时我可以显示数据(标题),例如(OrderNumber,Identifier,Name等)。

我需要显示json(OrderLine)的详细信息,例如:(LineNumber,StandardProductCode等)。

要访问标题数据,请执行以下操作:

<h5 class="padding-left">FORNECEDOR</h5>
<ion-item class="item item-text-wrap">
    <p> {{ order.Identifier }}
        <br>{{ order.Name }}
        <br> {{ order.Street }} - {{ order.City }}
        <br> {{ order.PostalCode }}
    </p>
</ion-item>

但我无法显示详细数据(OrderLine.StandardProductCode)。我错过了一些功能吗?

image at app 我感谢请帮助,我是JS和IONIC的新手

谢谢

1 个答案:

答案 0 :(得分:0)

从它的外观来看。我认为你需要的是重复,因为如果你可以访问主键,你也可以访问订单键,但订单键有一个数组,其元素不能直接访问。尝试

<h5 class="padding-left">FORNECEDOR</h5>
<ion-item class="item item-text-wrap">
    <p> {{ order.Identifier }}
        <br>{{ order.Name }}
        <br> {{ order.Street }} - {{ order.City }}
        <br> {{ order.PostalCode }}
    </p>
    <p ng-repeat="item in order.OrderLine">
        LineNumber: {{item.LineNumber}}
        StandardProductCode: {{item.StandardProductCode}}
    </p>
</ion-item>

现在这个itemorder.OrderLine数组中的嵌套项。

希望这有帮助。