UI5 data binding question

[trmt]

Hello ��

I started learning UI5 and I'm having a bit of trouble with data binding.

Let's say I have a list of directors:

directors.json
[
   {
      "directorID":1,
      "name":"Christopher Nolan",
      "age":52,
      "location":"London",
      "oscars":5
   },
   {
      "directorID":2,
      "name":"Quentin Tarantino",
      "age":59,
      "location":"United States",
      "oscars":8
   }
]

That I will display in a list.

On clicking a certain director I would like to take the user to another page, basically another list that will show the movies of this director. These movies will be taken from another .json file that has a few entries with the directorID as the common key between the two:

<strong>movies.json</strong>

<strong>[
   {
      "directorID":1,
      "movieID":1,
      "name":"Inception",
      "year":2010,
      "mainCharacter":"Leonardo Di Caprio"
   },
   {
      "directorID":1,
      "movieID":2,
      "name":"Interstellar",
      "year":2014,
      "mainCharacter":"Matthew McConaughey"
   },
   {
      "directorID":1,
      "movieID":3,
      "name":"Tenet",
      "year":2020,
      "mainCharacter":"John David Washington"
   },
   {
      "directorID":2,
      "movieID":4,
      "name":"Pulp Fiction",
      "year":1994,
      "mainCharacter":"John Travolta"
   },
   {
      "directorID":2,
      "movieID":5,
      "name":"Inglourious Basterds",
      "year":2009,
      "mainCharacter":"Brad Pitt"
   },
   {
      "directorID":2,
      "movieID":6,
      "name":"Django",
      "year":2012,
      "mainCharacter":"Jamie Foxx"
   }
]</strong><br>

What would be the best to way to filter the results on the second list based on the argument passed in the route: .../directors/{directorID}?

As of now, I could send from navTo and capture the directorID in _onRouteMatched via the getParameter method, but after this I'm a bit stuck.

I also searched for a sample to see this technique in action but I couldn't find any, some recommendation on this would also be appreciated.

Thanks

edit: The code that I'm asking about is found here: https://plnkr.co/edit/0WI2yiG56Nzspk0l

[xucong_zhan]

I guess one thing you need to be aware of is that the "default" model of the app is of type ODataModel (v2), so you either filter directly against this mock OData service (using OData methods) or convert your ODataModel to a local JSONModel. You can find a demo solution based on your code here on my Github, but essentially you can do the following in your Movies.controller.js:

sap.ui.define(
  ["directors/movies/controller/BaseController", "sap/ui/model/json/JSONModel"],
  function (BaseController, JSONModel) {
    "use strict";

    return BaseController.extend("directors.movies.controller.Movies", {
      onInit: function () {
        const oRouter = this.getRouter();
        oRouter
          .getRoute("moviesList")
          .attachMatched(this._onRouteMatched, this);
      },

      _onRouteMatched: function (oEvent) {
        // save the current query state
        let oArgs, oView;
        oArgs = oEvent.getParameter("arguments");
        oView = this.getView();

        oView.getModel().read("/Movies", {
          method: "GET",
          success: function (oData) {
            console.log("Read success!");
            console.log("oData.results:", oData.results);
            const oJsonModel = new JSONModel();
            const movies = oData.results.filter(
              (m) => m.DirectorID == oArgs.DirectorID
            );
            console.log("movies: ", movies);
            oJsonModel.setData({ movies });
            oView.setModel(oJsonModel, "viewModel");
          },
        });
      },
    });
  }
);

[trmt]

Thank you for your reply and the github demo solution. I will try it out and come back with an answer.