JAVASCRIPT Console data array to display in page-CodePudding

I have an array of data in the console from a football API, and I want to view the results of this array on divs inserted into the page, how can I do this?

My code is:

Html-

<html lang="en">
<head>
</head>
<body>
  <div >
    <h1>Football API</h1>
  </div>
    <button type="button" onClick="getgames()">Check info</button>
<script src="js/main.js"></script>
</body>
</html>

Javascript-

async function getgames(){
    const settings = {
        "async": true,
        "crossDomain": true,
        "url": "https://football-prediction-api.p.rapidapi.com/api/v2/predictions?market=classic&iso_date=2018-12-01&federation=UEFA",
        "method": "GET",
        "headers": {
            "X-RapidAPI-Key": "$APIKEY",
            "X-RapidAPI-Host": "football-prediction-api.p.rapidapi.com"
        }
    };

    $.ajax(settings).done(function (response) {
        console.log(response);
    });
}

I was thinking something of this sort to give me the input as a list of information:

const games = response;
let  = games.length;

let text = "<ul>";
for (let i = 0; i < games.lenght; i  ) {
  text  = "<li>"   games[i]   "</li>";
}
text  = "</ul>";

How can I access this array in the console? Like, I said, each entry is i in array, then within i I want to get the information variables and display in divs...

CodePudding user response：

<html lang="en">
<head>
</head>
<body>
  <div >
    <h1>Football API</h1>
  </div>
  <div id="fetch"></div> // **fetched data will be added here**
    <button type="button" onClick="getgames()">Check info</button>
<script src="js/main.js"></script>
</body>
</html>

    async function getResponse() {
        const response = await fetch(
            'here use your API,
            {
                method: 'GET',
                headers: {
                    'x-rapidapi-host': 'Your host',
                    'x-rapidapi-key': 'your_api_key'
                }
            }
        );
        const data = await response.json(); // **Extracting data as a JSON Object from the response**
}

then loop through the resonsed data which is a object .

let fetched=document.getElementById("fetch")
for (const key in data){
  if(obj.hasOwnProperty(key)){
    let new=document.createElement("li")
    new.innerHTML=data[key]
    fetched.appendChild(new)
  }
}

CodePudding user response：

Does this work?

async function getgames(){
    const settings = {
        "async": true,
        "crossDomain": true,
        "url": "https://football-prediction-api.p.rapidapi.com/api/v2/predictions?market=classic&iso_date=2018-12-01&federation=UEFA",
        "method": "GET",
        "headers": {
            "X-RapidAPI-Key": "$APIKEY",
            "X-RapidAPI-Host": "football-prediction-api.p.rapidapi.com"
        }
        };
    const data = await response.json();
    
    let fetched=document.getElementById("fetch")
    for (const key in data){
      if(obj.hasOwnProperty(key)){
        let new=document.createElement("li")
        new.innerHTML=data[key]
        fetched.appendChild(new)
      }
    }
        
    $.ajax(settings).done(function (response) {
        console.log(response);
    });
}

or how should I lay the pieces?