Question

我有一个ajax json响应，我已设法将值绑定到列中，但我需要将值绑定到行中。

我尝试使用oTable.bindRows（“/”），但这会将值绑定到列中。

作为一个示例数组，我有:(这是来自服务的响应）

Info [3]
[0] Object
name: "name",
surname: "surn"
[1] Object
address: "address",
phone: "22",
key: "val"
key2: "val2"
[2] Object
info: "information",
system: "sys",
data:"data here"

我需要一张桌子（或一张清单）：

Key      Value
name     name
surname  surn
phone    22
system   sys
info     information

Answer 1

你基本上必须转换你的数组。请查看下面的运行示例。

 oData.forEach(function(data){
     var keys = Object.keys(data);
     keys.forEach(function(key){
         oData_new.push({'key':key,'value':data[key]});
         });
     });

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_belize" data-sap-ui-libs="sap.m"></script>

<script>
  var oData = [{
      name: "name",
      surname: "surn"
    }, {
      address: "address",
      phone: "22",
      key: "val",
      key2: "val2"
    },
    {
      info: "information",
      system: "sys",
      data: "data here"
    }
  ];
  var oData_new = [];

  oData.forEach(function(data) {
    var keys = Object.keys(data);

    keys.forEach(function(key) {
      oData_new.push({
        'key': key,
        'value': data[key]
      });
    });
  });


  var oModel = new sap.ui.model.json.JSONModel();
  oModel.setData(oData_new);


  var aColumns = [
    new sap.m.Column({
      header: new sap.m.Label({
        text: "Key"
      })
    }),
    new sap.m.Column({
      header: new sap.m.Label({
        text: "Value"
      })
    })
  ];

  var oTable = new sap.m.Table({
    columns: aColumns
  });
  oTable.setModel(oModel);

  oTable.bindAggregation("items", {
    path: "/",
    template: new sap.m.ColumnListItem({
      cells: [
        new sap.m.Text({
          text: {
            path: 'key'
          }
        }),
        new sap.m.Text({
          text: {
            path: 'value',
          }
        })
      ]
    })
  });
  oTable.placeAt('content');
</script>

<body id="content" class="sapUiBody">
</body>

</html>

将数组绑定到行

1 个答案: