How to call REST API and set to SAPUI5 model - sapui5

Question

I am a beginner in developing SAPUI5 applications and am trying to make a drill down application with a flexible column layout. For my first page I am trying to grab country data from this api (https://www.api-basketball.com/documentation#section/Introduction). I have an API KEY through RapidAPI.
How would I go about grabbing the data and setting it to a model? I was able to print out the response in the console which gave me the data but I'm not sure how I can set this to the model and access the data so I can bind it to my controls in the XML view.
[screengrab of my console with response from the data]: https://i.stack.imgur.com/p1bnq.jpg
onInit: function() {
var myHeaders = new Headers();
// I hid my actual API key with the x's
myHeaders.append("x-rapidapi-key", "XxXxXxXxXxXxXxXxXxXxXxXx");
var requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
//set bball model
var bBallModel = new JSONModel(
fetch("https://api-basketball.p.rapidapi.com/countries", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error)));
this.getView().setModel(bBallModel, "bball")
This is the code in my component.js file. Any help I would really appreciate thank you!

Answer 1

One way would be to update the data after the call succeeds:
onInit: function() {
var myHeaders = new Headers();
// I hid my actual API key with the x's
myHeaders.append("x-rapidapi-key", "XxXxXxXxXxXxXxXxXxXxXxXx");
var requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
var model = new JSONModel();
this.getView().setModel(model, "bball")
//set bball model
fetch("https://api-basketball.p.rapidapi.com/countries", requestOptions)
.then(response => response.text())
.then(result => model.setData(result))
.catch(error => console.log('error', error));
}
Alternatively you can use the loadData method on the JSON model:
onInit: function() {
var uri = "https://api-basketball.p.rapidapi.com/countries";
var model = new JSONModel();
var oHeaders = {
"x-rapidapi-key": "XxXxXxXxXxXxXxXxXxXxXxXx"
};
this.getView().setModel(model, "bball")
model.loadData(uri, null, true, "GET", null, false, oHeaders);
}