SAPUI5_JSON Data binding issue

Question

I'm trying to bind a local JSON data(in file) to a <SELECT>/<ComboBox> element, I could see the data being pulled by the server. However, the data is not getting bound to element. Please help.

--- Controller

sap.ui.define([
        'jquery.sap.global',
        'sap/ui/core/mvc/Controller',
        'sap/ui/model/json/JSONModel'
    ], function(jQuery, Controller, JSONModel) {
    "use strict";

    var PageController = Controller.extend("survey.App", {

        onInit: function () {
            var oModel = new JSONModel(jQuery.sap.getModulePath("sap", "/products.json"));
            this.getView().setModel(oModel);
            console.log(oModel);
        }
    });
    return PageController;

   });

-- XML VIEW

<mvc:View
height="100%"
controllerName="survey.App"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Page showHeader="true">
    <content>
        <ComboBox id="prodlist"
                items="{
                    path: '/ProductCollection',
                    sorter: { path: 'Name' }
                }">
                <core:Item key="{ProductId}" text="{Name}" />
        </ComboBox>
        <!-- <Select
                items="{
                    path: '/ProductCollection',
                    sorter: { path: 'Name' }
                }">
                <core:Item key="{ProductId}" text="{Name}" />
            </Select> -->    
    </content>
</Page>

Nabi · Accepted Answer · 2015-11-26 19:32:26Z

1

You should check your console an see if there is a 404 for the json file that you try to load via

jQuery.sap.getModulePath("sap", "/products.json")

The issue might be related to wrong resource-roots settings in the bootstrapping, which you have not posted...

This here is a working example. As you can see I'm not using jQuery.sap.getModulePath(...), instead I use the URL directly. I works just fine for me. Maybe there is also CORS issue in your case, which my example does not have because I just use cors-anywere. Again, nobody can tell you more before you post the complete code including the bootstrap!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>SAPUI5 single file template | nabisoft</title>
        <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
            id="sap-ui-bootstrap"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.m"
            data-sap-ui-bindingSyntax="complex"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-preload="async"></script>
            <!-- use "sync" or change the code below if you have issues -->
    
        <!-- XMLView -->
        <script id="myXmlView" type="ui5/xmlview">
            <mvc:View
                controllerName="MyController"
                xmlns="sap.m"
                xmlns:core="sap.ui.core"
                xmlns:mvc="sap.ui.core.mvc">
    
                <ComboBox 
                    id="prodlist"
                    items="{
                        path: '/ProductCollection',
                        sorter: { path: 'Name' }
                    }">
                    <core:Item key="{ProductId}" text="{Name}" />
                </ComboBox>
    
            </mvc:View>
        </script>
    
        <script>
            sap.ui.getCore().attachInit(function () {
                "use strict";
    
                //### Controller ###
                sap.ui.controller("MyController", {
                    onInit : function () {
    
                        // set explored app's demo model on this sample
                        var oModel = new sap.ui.model.json.JSONModel("https://cors-anywhere.herokuapp.com/openui5.hana.ondemand.com/test-resources/sap/ui/demokit/explored/products.json");
                        this.getView().setModel(oModel);
    
                    }
                });
    
                //### THE APP: place the XMLView somewhere into DOM ###
                sap.ui.xmlview({
                    viewContent : jQuery("#myXmlView").html()
                }).placeAt("content");
    
            });
        </script>
    
    </head>
    
    <body class="sapUiBody">
        <div id="content"></div>
    </body>
</html>

edited Nov 26, 2015 at 19:32

answered Nov 24, 2015 at 21:51

Nabi

2,5661 gold badge19 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Venkat Over a year ago

Thanks for your comment, The Code i've posted is a working one, however the problem is with the verison of SAPUI5 library. I was referring to 1.32.5 where below code doesnt work i.e., path & sorter attributes aren't supported. 'items="{ path: '/ProductCollection', sorter: { path: 'Name' } }'

Nabi Over a year ago

@venkat that's not true, it should also work with 1.32.5. You should have posted the complete code that does not work, including the bootstrap.

Venkat Over a year ago

Yes dear friend, you're right...:) I missed the binding type declaration in Index.html "data-sap-ui-xx-bindingSyntax="complex"". Well, i'm picking up sapui5 concepts day by day, realized about that recently. Thank you.

Nabi Over a year ago

@Venkat It's great to see you make progress day by day - keep on coding with UI5!

Collectives™ on Stack Overflow

SAPUI5_JSON Data binding issue

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related