{"id":1796,"date":"2020-07-20T16:51:42","date_gmt":"2020-07-20T09:51:42","guid":{"rendered":"https:\/\/wptips.dev\/?p=1796"},"modified":"2020-07-21T20:37:30","modified_gmt":"2020-07-21T13:37:30","slug":"javascript-rest-api","status":"publish","type":"post","link":"https:\/\/pixelstudio.id\/blog\/javascript-rest-api\/","title":{"rendered":"How to use JavaScript for WordPress REST API (AJAX)"},"content":{"rendered":"\n

Have you seen a new section gets loaded without a page refresh?<\/p>\n\n\n\n

This is using a JavaScript technique called AJAX<\/strong> where the client can call API to retrieve data and append it to the current page.<\/p>\n\n\n\n

Let’s learn by creating a “LOAD MORE” button to show the next set of posts.<\/p>\n\n\n\n

Important<\/strong>: This tutorial is only intended to teach you about AJAX and not a good way to create a Load More button. It’s far better if you create a custom API endpoint<\/a> and re-use the existing template-parts<\/code> from your theme to render.<\/p>\n\n\n\n

Lesson #1: Choosing a Library<\/h2>\n\n\n\n

Although it’s possible to do without any library, it’s easier with one like React<\/a>, Handlebars<\/a>, or Template7<\/a>.<\/p>\n\n\n\n

React <\/strong>is the library used in Gutenberg editor. It is powerful yet hard to learn and definitely overkill for a Load More button.<\/p>\n\n\n\n

On the other hand, Handlebars <\/strong>and Template7 <\/strong>are very simple libraries. They have nearly identical syntaxes but the latter is 4x smaller in size (50KB vs 12KB).<\/p>\n\n\n\n

So we decided to use Template7 for this tutorial. Download it here<\/a> or use the CDN link at:<\/p>\n\n\n\n

https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/template7\/1.4.1\/template7.min.js<\/code><\/pre>\n\n\n\n
Lesson #2: Create & Render a Template<\/h2>\n\n\n\n
The template is written inside <template><\/strong><\/code> tag:<\/p>\n\n\n\n
<template id=\"template-name\">\n  <p> Hello, my name is {{ firstName }} {{ lastName }} <\/p>\n<\/template><\/code><\/pre>\n\n\n\n
If you’re wondering, that’s a legit HTML tag specifically used to hold content that will be rendered with JavaScript.<\/p>\n\n\n\n
You can render the template by passing in an object like this:<\/p>\n\n\n\n
let rawTemplate = document.querySelector('#template-name').innerHTML;\nlet template = Template7.compile( rawTemplate );\n\nlet html = template({\n  firstName: 'John',\n  lastName: 'Doe'\n});\n\n\/\/ the `html` variable contains the rendered template\n\/\/ you can use it to insert anywhere you want<\/code><\/pre>\n\n\n\n
Here’s a CodePen showcasing the snippets above: <\/p>\n\n\n\n
\n  See the Pen \n  Template 7 Basic Showcase<\/a> by hrsetyono (@hrsetyono<\/a>)\n  on CodePen<\/a>.<\/span>\n<\/p>\n