javascript - Json 列表在数组中 ionic 返回页面 HTML

Question

我是 ionic 新手，我希望能够扩展一个简单的 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 等..)

要访问 header 数据，请执行以下操作:

<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 的新手

谢谢

Answer 1

从外观上看。我认为您需要重复，因为如果您可以访问主键，您也可以访问顺序键，但顺序键有一个数组，并且无法直接访问其元素。尝试一下

<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>

现在这个item是order.OrderLine数组中的嵌套项目。

希望这有帮助。