When I use AJAX to load a PHP file, the function's content returns as [object HTMLDivElement]

Question

When I use AJAX to load a PHP file, the function's content returns as [object HTMLDivElement]

Hello there,

When I use AJAX to load a PHP file, the content of my function returns [object HTMLDivElement], but if I load my function without loading the PHP file, it displays normally.

index.php

    <h1>API Football</h1>
    <nav>
      <ul>
        <li>INDEX</li>
        <li onclick="loadComponents()">Live fixtures</li>
      </ul>
    </nav>

    <h2>Live fixtures</h2>
    <div id="content">
    </div>

    <script src="javascript.js"></script>

javascript.js

var data = null;

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
    if (this.readyState === this.DONE) {

        let liveFixtures = this.responseText;
        let fixtures = liveFixtures.api.fixtures;
        let content = "";

        for (fixture of fixtures) {
            content += "<tr>";
            content += "<td>"+fixture.fixture_id+"</td>";
            content += "<td>"+fixture.homeTeam.team_name+" - "+fixture.awayTeam.team_name+"</td>";
            content += "</tr>";
        }

    }
});

xhr.open("GET", "https://api-football-v1.p.rapidapi.com/fixtures/live?timezone=Europe%2FLondon");
xhr.setRequestHeader("x-rapidapi-host", "api-football-v1.p.rapidapi.com");
xhr.setRequestHeader("x-rapidapi-key", "e8118d13f1msh0edd004389b2d85p1b89c2jsn0cd40324ddec");

xhr.send(data);

//Load content.php
function loadComponents() {
  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {

    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("content").innerHTML = this.responseText;
      document.getElementById("myDiv").innerHTML = content;
    }
  };
  xhttp.open("GET", "content.php", true);
  xhttp.send();
}

content.php

<div id="myDiv">
</div>
<p><strong>I loaded the content.php</strong></p>

Also available on .

Output from API Football

//let liveFixtures = {"api":{"results":18,"fixtures":[{"fixture_id":95187,"league_id":358,"league":{"name":"Serie B","country":"Brazil","logo":"https:\/\/media.api-football.com\/leagues\/358.PNG","flag":"https:\/\/media.api-football.com\/flags\/br.svg"},"event_date":"2019-11-08T22:15:00+00:00","event_timestamp":1573251300,"firstHalfStart":1573251300,"secondHalfStart":1573254900,"round":"Regular Season - 34","status":"Second Half","statusShort":"2H","elapsed":90,"venue":"Durival Britto e Silva, Curitiba","referee":null,"homeTeam":{"team_id":122,"team_name":"Parana","logo":"https:\/\/media.api-football.com\/teams\/122.png"},"awayTeam...

javascript arrays ajax api

Answer 1

Answer №1

When using the

document.getElementById("myDiv").innerHTML = content;

function, it's important to note that you must define the content variable within the same function scope. If not, the JavaScript engine will search for a matching variable in the global scope. In this case, the global variable created implicitly by the existence of <div id="content"> is treated as an HTML element object rather than a string.

As content is an object, it will be converted to a string using the element's toString() method, which defaults to "[object HTMLDivElement]".

If you want a different value for content, make sure to define it properly in your code.

It's worth noting that you may have defined a content variable with let in another function scope, particularly if that function is asynchronous. For more information on handling asynchronous calls, check out this helpful resource: How do I return the response from an asynchronous call?

Answer 2

When using the

document.getElementById("myDiv").innerHTML = content;

function, it's important to note that you must define the content variable within the same function scope. If not, the JavaScript engine will search for a matching variable in the global scope. In this case, the global variable created implicitly by the existence of <div id="content"> is treated as an HTML element object rather than a string.

As content is an object, it will be converted to a string using the element's toString() method, which defaults to "[object HTMLDivElement]".

If you want a different value for content, make sure to define it properly in your code.

It's worth noting that you may have defined a content variable with let in another function scope, particularly if that function is asynchronous. For more information on handling asynchronous calls, check out this helpful resource: How do I return the response from an asynchronous call?

Answer 3

Answer №2

Directly loading data into Div using getAjax

function fetchData() {
let information = null;
let request = new XMLHttpRequest();
request.withCredentials = true;
request.addEventListener("readystatechange", function () {
    if (this.readyState === this.DONE) {
        console.log(this.responseText);
        let content = this.responseText;
        document.getElementById("getAjax").innerHTML = content;
    }
});
request.open("GET", "https://api-football-v1.p.rapidapi.com/v2/fixtures/live?timezone=Europe%2FLondon");
request.setRequestHeader("x-rapidapi-host", "api-football-v1.p.rapidapi.com");
request.setRequestHeader("x-rapidapi-key", "e8118d13f1msh0edd004389b2d85p1b89c2jsn0cd40324ddec");
request.send(information);
};

Answer 4

Directly loading data into Div using getAjax

function fetchData() {
let information = null;
let request = new XMLHttpRequest();
request.withCredentials = true;
request.addEventListener("readystatechange", function () {
    if (this.readyState === this.DONE) {
        console.log(this.responseText);
        let content = this.responseText;
        document.getElementById("getAjax").innerHTML = content;
    }
});
request.open("GET", "https://api-football-v1.p.rapidapi.com/v2/fixtures/live?timezone=Europe%2FLondon");
request.setRequestHeader("x-rapidapi-host", "api-football-v1.p.rapidapi.com");
request.setRequestHeader("x-rapidapi-key", "e8118d13f1msh0edd004389b2d85p1b89c2jsn0cd40324ddec");
request.send(information);
};

When I use AJAX to load a PHP file, the function's content returns as [object HTMLDivElement]

Answer №1

Answer №2

Similar questions

Looping through nested arrays in an array of objects with Angular's ng-repeat

AngularJS - ng-repeat not updating when property array changes

Can you share a method in javascript that extracts href= and title values, similar to PHP's preg_match_all() function?

Easy jQuery Mobile and AJAX login solution

Developing a personalized logging service in NestJs: capturing logs without directly outputting them

Using Node.js to implement GET, POST, and DELETE functionalities

Unclear reference to subscript by utilizing [indexPath.section][indexPath.row]

Running several AJAX requests concurrently

Navigate to specific element from bootstrap navigation bar

Executing a function following the removal of an element

RadScheduler refresh rate

What is the reason behind my inability to console log the listening on port 3005?

Knockout JS: Choosing specific dropdown elements

Positives and negatives images for accordion menu

submitting a form including a file through ajax communication

Keep a vigilant eye on the peak utilization of memory within the Node.js process

Exclude certain packages from being processed in webpack

Tips for incorporating your personal touch while utilizing Snipcart

The importance of utilizing local variables to securely store values passed from an Ajax call to a WCF method

Context Provider executing SetInterval twice