CssSY CssSY - 8 days ago 6
Ajax Question

Display json data to HTML file

Just start practicing ajax using this fake api service. JSONPlaceholder

But I'm confused with displaying data to html file. I just want to show data like this.

Blog title: unt aut facere repellat provident occaecati excepturi optio reprehenderit (comes with jason file)

Blog post: "quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto" (comes with jason file)

It has provided root

var root = 'https://jsonplaceholder.typicode.com';

$.ajax({
url: root + '/posts/1',
method: 'GET'
}).then(function(data) {
console.log(data);
});


How can I display data to html?

Answer

Supposing you have such json:

{
    title: 'My awesome title',
    description: 'My awesome description'
}

And such HTML code:

<h1 id="title"></h1>
<div id="description"></div>

You should do

$('#title').text(data.title);
$('#description').text(data.decription);

instead of

console.log(data);