Display WordPress API XML Queried data on front end with AJAX
Channel: TechiePress
Date: 2022-12-30

Welcome to part 6 of our series on querying an XML API in WordPress! In this video, we'll be using JavaScript and AJAX to display the API data using a button click, and we'll also be fixing the array data from using the SimpleXmlElement function in PHP.

We'll start off by tackling the API challenge at the beginning of the video, and then we'll move on to loading our JavaScript. From there, we'll get form data with JavaScript and learn how to use AJAX in WordPress forms.

We'll also be using the wp_localize_script() function to pass PHP data to JavaScript, and then we'll use AJAX to actually query the API. After that, we'll refactor our PHP XML parser to make it more efficient.

Next, we'll use the each() function in jQuery to handle objects and then display the API results in the DOM. Finally, we'll wrap up the video by discussing what's next in the series.

Thanks for watching!

VIDEO CHAPTERS
00:00 API challenge 
00:56 Load JavaScript
03:33 Get form data with JavaScript
06:54 Using AJAX in WordPress Forms
09:20 Pass PHP data to JS using wp_localize_script()
15:30 Use AJAX to query API 
17:40 Refactor the PHP XML parser 
23:20 Use each() in jQuery to handle objects
24:38 Display API results in DOM
28:00 Next steps

Code sample: https://github.com/YTTechiePress/rest-ajax

HOW TO SUPPORT THE CHANNEL
=============================================
Do you like what I am doing?
- Buy me a coffee through https://www.buymeacoffee.com/techiepress 
- Give via PayPal: https://paypal.me/laurencebahiirwa
- Visit https://omukiguy.com/support-my-work/

I am social too:
Facebook: https://web.facebook.com/TechiePress-100149655032583/
Twitter: https://twitter.com/omukiguy
Blog & Newsletter: https://omukiguy.com
Github: https://github.com/yttechiepress
-------------------------------------------------------------------------------
LEARN MORE IN THE WELL CURATED PLAYLISTS BELOW
--------------------------------------------------------------------------------

Learn how to build a plugin from scratch: https://youtu.be/9LtXEMRNln8?t=145

WooCommerce E-Commerce customizations
== Build Free Custom E-commerce Online Shop using WooCommerce - https://www.youtube.com/playlist?list=PLNqG1qGUllk2qFmbexV2SikF8bXqvDW-H

== Build Free Custom Theme for E-commerce Online Shop using WooCommerce - 
https://www.youtube.com/playlist?list=PLNqG1qGUllk0uFqUvFFIJ67dSNBKapd7Y

====== Build Dynamic Websites with Elementor  ======

== Learn the Elementor basics  - https://www.youtube.com/playlist?list=PLNqG1qGUllk27BK71LBJDw4auOl-aVOqG

== Build a custom Elementor Widget from Scratch - https://www.youtube.com/playlist?list=PLNqG1qGUllk2pukgHP385ll0ENmRr9E_M

====== How to use WordPress Gutenberg Block Editor ======

WordPress 5.4 Gutenberg Blocks Updates 
== https://www.youtube.com/playlist?list=PLNqG1qGUllk0lI2Omhvp54Qn9-MIEhQzX 

WordPress Gutenberg blocks for Designers 
== https://www.youtube.com/playlist?list=PLNqG1qGUllk3DY91Bq_26L8meIXM_Uo4E 

Gutenberg WordPress Block Editor tutorials for beginners
== https://www.youtube.com/playlist?list=PLNqG1qGUllk2xOKt79aI12GgX2DX0aNx-

Custom WooCommerce Gateway Development from Scratch
== https://www.youtube.com/playlist?list=PLNqG1qGUllk21IES6ZJ2WkX1BcbPQF4-7

WordPress Custom REST API Namespaces, Endpoints and Examples from Scratch
== https://www.youtube.com/playlist?list=PLNqG1qGUllk0npc2ZGPU358Q6S1itFCYR

====== WordPress Plugin Development from Scratch ======

Build Most Popular & Most Commented Post Plugin
== https://www.youtube.com/playlist?list=PLNqG1qGUllk05gUz_VB5nCHEN9A3OpS94

Build SMS Plugin with External WordPress API Integration using custom WordPress Databases
== https://www.youtube.com/playlist?list=PLNqG1qGUllk0NSTrNF2xa1zHNzMi3M7su

WordPress External APIs Integration Plugin Development
== https://www.youtube.com/playlist?list=PLNqG1qGUllk0U2-5ZBNxSNxQrPO-4CqnR

Convert WordPress to mobile App in Headless WordPress
== Convert WordPress Sports Website into Mobile Application - https://www.youtube.com/playlist?list=PLNqG1qGUllk3qMrJcXUeP1Ge5U4fKtAR 

Make GraphQL API endpoints with WordPress Headless CMS WPGraphQL Plugin 
== https://www.youtube.com/playlist?list=PLNqG1qGUllk03llIgPYGVTwY14lAPDkBp

Customize Your WordPress & ClassicPress
== Build Custom REST API Endpoints with WordPress or ClassicPress - https://www.youtube.com/playlist?list=PLNqG1qGUllk06KZP9N1nRG-FpnTr_TD9u

Custom Dashboard Widgets
== https://www.youtube.com/playlist?list=PLNqG1qGUllk2h51557gV74x8p1RrlEmah

Build Custom Admin
== https://www.youtube.com/playlist?list=PLNqG1qGUllk1M5L8Xo-K1g6B3OrkliKDs

Learn Git
== Git tutorial for writers + software developers for beginners - https://www.youtube.com/playlist?list=PLNqG1qGUllk2PnSJiUw1SCjiS6pNhIR2f