How to proper bind async. loaded data from a news API to a view and display the data as content? - sapui5

Question

I want to fetch data from News API (https://newsapi.org/) in my SAPUI5 application like done here (https://www.nathanhand.co.uk/blog/post/creating-a-news-app-using-ui5), but without express and Node.js. The fetching process itself works and I got the data from the API in JSON. The Problem seems to be the lifecycle of UI5 especially the asynchronous loading of the API data. I cannot display the data at the moment in my view, since it arrives to late it seems to be initialized with the view.
I have tried to work with the "attachRequestCompleted" event handler, to make sure the data is there and further actions are only taken when the data has arrived. But that did not solve the problem, the data gets properly bound to the view, but too late it seems.
return Controller.extend("newsapitest.newsapitest.controller.View1", {
onInit: function () {
var thisContext = this;
var articleModel = new JSONModel("https://newsapi.org/v2/top-headlines?country=DE&category=business&apiKey=*********");
articleModel.attachRequestCompleted(function(oEvt) {
var model = oEvt.getSource();
thisContext.getView().setModel(model, "articles");
});
}
});
<content>
<GenericTile backgroundImage="{articles>/1/urlToImage}"
frameType="TwoByOne" press="onArticlePress">
<TileContent footer="{articles>/1/publishedAt}">
<NewsContent contentText="{articles>/1/title}"
subheader="{articles>/1/description}" />
</TileContent>
</GenericTile>
</content>
So I was expecting that the tiles in my view will display the information for each article that is stored in the model. But at the moment there is just an empty tile and no data is shown there.
Solution
I did a mistake with the binding of the model to my control. That was one mistake. The other thing I changed is how the data gets loaded into my model.
return Controller.extend("newsapitest.newsapitest.controller.View1", {
onInit: function () {
var articleModel = new JSONModel();
articleModel.loadData("https://newsapi.org/v2/top-headlines?country=DE&category=business&apiKey=37a02aae93684d58810e0b996954f534");
this.getView().setModel(articleModel);
},
});
<content>
<GenericTile
backgroundImage="{/articles/0/urlToImage}"
frameType="TwoByOne" press="onArticlePress">
<TileContent footer="{/articles/0/publishedAt}">
<NewsContent
contentText="{/articles/0/title}"
subheader="{/articles/0/description}" />
</TileContent>
</GenericTile>
</content>

Answer 1

Did you check that your binding paths are correct? Anyway, the way you did the bindings will only create one tile with the information stored on the second position (position 1) of your array of articles.
If you want to create create a number of tiles dynamically depending on the number of positions of an array, I think you can't use the "Generic Tile" component, instead you could use the "Tile Container" as follows (It's a deprecated component but I think there's no other way to do so, at least on the view):
<TileContainer
tiles="{articles>/}">
<StandardTile
title="{articles>title}"
info="{articles>publishedAt}"
infoState="{articles>description}" />
</TileContainer>
It would be nice if someone else knows a way to do that without using a deprecated component :).