SAPUI5 : How to find the item from sap.m.list if I only have the object?

Question

Let's say I only have information about the object but not it List item information

Example :

    //The list 
    var odragableListServices = that.byId("dragableListServices");
    var oBinding= odragableListServices.getBinding("items");
    //This will return the first Object in JSON format 
     var oListObj =  oBinding.getModel("NoneAssignedTaskModel").getProperty("/data/1");

Now, my question is : how to do it backward? (the opposite way ) Let's say I only have the json object : oListObj

I want to return something like : __xmlview8-dragableListServices-drgListObjItem-__item1

How to find the item from the list if I only have the object ?

Answer 1

As I explained in my comment, it is generally better to adapt the view based on your model data.

In the below example, upon clicking a date in the calendar the model is updated with an isSelected property, which is set to true for any matching dates in the model:

handleCalendarSelect : function(oEvent) {
    // get the selected date
    const selectedDate = oEvent.getSource().getSelectedDates()[0].getStartDate().getTime();
    const oModel = this.getView().getModel();

    // get the listitems node from your model 
    const aListItems = oModel.getData().listitems;

    // where the magic happens:
    aListItems.map((obj) => {
        obj.isSelected = obj.date === selectedDate;
    });

    // update the model
    oModel.setProperty("/listitems", aListItems);
},

The list is then updated accordingly.

See the following runnable example:

sap.ui.controller("view1.initial", {
    onInit : function() {
        const oModel = new sap.ui.model.json.JSONModel({
            listitems: [
                {
                    "fname": "Tyetha",
                    "lname": "Puglisi",
                    "date": 1574031600000
                },
                {
                    "fname": "Tasheis",
                    "lname": "Monuteaux",
                    "date": 1574118000000
                },
                {
                    "fname": "Quincy",
                    "lname": "Landau",
                    "date": 1574204400000
                },
                {
                    "fname": "Danyell",
                    "lname": "Strange",
                    "date": 1574290800000
                },
                {
                    "fname": "Winston",
                    "lname": "Cook",
                    "date": 1574377200000
                },
                {
                    "fname": "Lilia",
                    "lname": "Willms",
                    "date": 1574463600000
                },
                {
                    "fname": "Sharful",
                    "lname": "Platt",
                    "date": 1574550000000
                },
                {
                    "fname": "Stan",
                    "lname": "Herrick",
                    "date": 1574636400000
                },
                {
                    "fname": "Denise",
                    "lname": "Tang",
                    "date": 1574722800000
                },
                {
                    "fname": "Samuel",
                    "lname": "Gilbertson",
                    "date": 1574809200000
                }
            ]
        });

        this.getView().setModel(oModel);
    },

    handleCalendarSelect : function(oEvent) {
        const selectedDate = oEvent.getSource().getSelectedDates()[0].getStartDate().getTime();
        const oModel = this.getView().getModel();
        const aListItems = oModel.getData().listitems;

        aListItems.map((obj) => {
            obj.isSelected = obj.date === selectedDate;
        });

        oModel.setProperty("/listitems", aListItems);
    },

    formatDate : function(fValue) {
        jQuery.sap.require("sap.ui.core.format.DateFormat");
        const oTimeFormat = sap.ui.core.format.DateFormat.getTimeInstance({pattern : "YYYY/MM/dd" });
        
        if (fValue) {
            return oTimeFormat.format(new Date(fValue));
        }
        return null;
    }
});

sap.ui.xmlview("main", {
    viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");

<script id="sap-ui-bootstrap"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-xx-bindingSyntax="complex"
    data-sap-ui-libs="sap.m"></script>

<div id="uiArea"></div>

<script id="view1" type="ui5/xmlview">
    <mvc:View 
      controllerName="view1.initial"
      xmlns="sap.m"
      xmlns:u="sap.ui.unified"
      xmlns:core="sap.ui.core"
      xmlns:mvc="sap.ui.core.mvc">
        <App>
            <Page title="SAPUI5 demo">
                <content>
                    <HBox>
                        <u:Calendar select="handleCalendarSelect" />
                        <List mode="SingleSelect" items="{
                            path: '/listitems',
                            sorter: {
                                path: 'date'
                            }
                        }">
                            <items>
                                <StandardListItem selected="{isSelected}" title="{path : 'date', formatter : '.formatDate'}" description="{fname} {lname}" />
                            </items>
                        </List>
                    </HBox>
                </content>
            </Page>
        </App>
    </mvc:View>
</script>

Answer 2

You can loop over the listItems and compare it with you object.

var oYourListItem = {Id: 'someID', ...};

var aItems = this._oList.getItems();
aItems.forEach(function(oItem) {
    if (oItem.Id === oYourListItem.Id) {
        // oItem is the listItem of interrest, do stuff...
    }
})