Javascript / SAPUI5 : Binding a JSONArray to a ListItem

2
votes

i've a SAPUI5-App to view data from a DBMS: DMBS <-> Java <-> jsp -> ajax -> JSONModel <-> SAPUI5 I've a problem with a model with this structure:

[
  {
    "key1": "value_a",
    "key2": "value_b",
    "key3": "value_c",
  },
  {
    "key1": "value_d",
    "key2": "value_e",
    "key3": "value_f",
  },
...
]

This data are stored in a model defined in my manifest.json. Now i want to show this data in a list. In my view i define a list in the createContent function and add it to my page. In the controller i try to bind the data to a listitem:

var oItemTemplate = new sap.m.InputListItem({
   label : "{Model>}"
}),
oList.bindItems("Model>/", oItemTemplate);

In this try there are the correct count of listitems corresponding the number of objects in my model. But in the list are only "Objects"

List

My plan ist to show a merged text from one object in one listitem:

  • Item 1 : "value_a value_b value_c"
  • Item 2 : "value_d value_e value_d"
  • ...

Now i use a formatter for the label. 

label : {
    path : "Model>/",
    formatter : function(data) {

        return data;
    }
}

According to this code new the list shown still the correct number of items and each item contains all ojects

List with formatter

But how i can access my object data key1, key2 and key3? All my trys are unsuccessful

console.log(data.key1) -> undefined

console.log(data/key1) -> ReferenceError: key1 is not defined

Can anyone help me please?

Regards

MacLeod

PS: If i use

var oItemTemplate = new sap.m.InputListItem({
    label : "{Model>key1}"
});
oList.bindItems("Model>/", oItemTemplate);

then value_a / value_d will be shown on the listitems. But i can't use this with the formatter

In the formatter 

formatter : function(data) {

   return data;
}

the data-object contains the complete JSON data. But there is no automatic iteration like using normal binding 

label : "{Model>key1}"
2
javascriptjsondata-bindingsapui5listitem

2 Answers

0
votes

In your picture of your list, you can see, that every line is a list of objects. In this objects you can access the keys. So in the first, you have to access the objects, which is like data[0] or data[1] and so on. I think you miss one step in the hierarchy.

0
votes

Problem solved! 

var oItemTemplate = new sap.m.InputListItem({
    label : {
    parts : [
        { path : "Model>key1" },
        { path : "Model>key2"}
    ],
    formatter : function(key1, key2) {
        return key1 + " " + key2;
    }
}
oList.bindItems("Model>/", oItemTemplate);

https://archive.sap.com/discussions/thread/3517535