从 JSON 数据填充列表

Question

我在 sapui5 中使用 javascript。我有 JSON 数据为 {0:"A",1:"B",2:"C"}。我想用数据填充一个列表。我该怎么做？

Answer 1

如果列表如下所示：

<List id="listId" items="{/}">
    <StandardListItem title="{0}"/>
</List>

和

var oYourData = {
    0: "A",
    1: "B",
    2: "C"
};
var oModel = new sap.ui.model.json.JSONModel(oYourData);
this.getView().byId("listId").setModel(oModel);

输出：

假设您的列表是这样的：

<mvc:View
  controllerName="sap.m.sample.ListCounter.List"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m">
  <List
    headerText="Products"
    items="{
      path: '/ProductCollection'
    }" >
    <StandardListItem
      title="{Name}"
      counter="{Quantity}"/>
  </List>
</mvc:View>

示例 oData 应如下所示：

var oData = {
    "ProductCollection": [
        {
            "ProductId": "1239102",
            "Name": "Power Projector 4713",
            "Quantity": 3,
        },
        {
            "ProductId": "2212-121-828",
            "Name": "Gladiator MX",
            "Quantity": 10,
        },
        {
            "ProductId": "K47322.1",
            "Name": "Hurricane GX",
            "Quantity": 25,
        },
        {
            "ProductId": "22134T",
            "Name": "Webcam",
            "Category": "Accessory",
            "Quantity": 22,
        },
        {
            "ProductId": "P1239823",
            "Name": "Monitor Locking Cable",
            "Category": "Accessory",
            "Quantity": 30,
        }
    ]
}

阅读有关模型和绑定的更多信息here

Answer 2

由于您没有显示您的列表定义，我只能专注于您问题中的数据，并且为了这个问题假设您正在谈论列表控件，例如 sap.m 库，例如。

您将面临的问题是您的数据结构与绑定到聚合（例如列表控件的项聚合）时使用的预期结构不符。你需要一个数组，而不是一个对象。

所以这变成了一个 JavaScript 数据问题。要将您的结构（我们假设它位于一个名为 mData 的变量中）转换为更适合聚合绑定的结构，您可以这样做：

Object.keys(mData).map(function(k, i) { return { key: k, value: mData[k] }; })

这会给你一个像这样的数组：

[ { key: '0', value: 'A' }, { key: '1', value: 'B' }, { key: '2', value: 'C' } ]

然后就可以绑定了。

如果您需要进一步的帮助来完成实际的绑定，您需要在您的问题上付出更多的努力并提供您正在使用的控件定义。给我们看代码，帮助我们帮助你。

从 JSON 数据填充列表

Populate a list from JSON data

json

list

sapui5