CODEWITHSUNDEEP
javascriptjqueryhtmljson
tengxuanp
tengxuanp

Reputation: 179

Get data from JSON API (from one server) and display it on HTML (to another server)

I have two different projects and somehow I have to pass data from Project1 to Project2. So I decided to make the Project1 data from database as JSON API and use Project2's HTML page to call it. However the data is not shown successfully.

Here is how the JSON file looks like:

{
    "data": [
        {
            "title": "Corporate Finance",
            "responsibilities": "Responsible for financial accounting and reporting, internal controls, budgetary control, variance analysis.",
            "requirements": "Candidate must possess at least a Degree in Accountancy or Professional Degree or equivalent.",
            "status": "1"
        },
        {
            "title": "Group Reporting Accountant",
            "responsibilities": "We are seeking a Group accountant to take full financial responsibility for the Group Consolidation and Reporting. Reporting to the Regional Financial Controller, you will be responsible for formulati",
            "requirements": "Prepare monthly financial statements for the business and to consolidate the group accounts.",
            "status": "1"
        }
    ]
}

And I tried to use AJAX under Project2 HTML page to make request:

$.ajax({
        url: 'http://localhost/dbpass/api/post/read.php',
        dataType: "text",
        success: function(data) {
            // Parse JSON file
            var json = $.parseJSON(data);
            //Store data into a variable
            // Display 
            $('#results').html(json.data);
        }
      });

And show it on HTML:

<span id="results"></span>

I'm rather new to this, please pardon me if this is some dumb mistake, thank you!

Upvotes: 1

Views: 251

Answers (1)

Jeni
Jeni

Reputation: 430

Print content of object you can use JSON.stringify.

$('#results').html(JSON.stringify(json.data, null, 4));

Upvotes: 2

Related Questions