Display WordPress API XML Queried data on front end with AJAX

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: github.com/YTTechiePress/rest...
HOW TO SUPPORT THE CHANNEL
=============================================
Do you like what I am doing?
- Buy me a coffee through www.buymeacoffee.com/techiepress
- Give via PayPal: paypal.me/laurencebahiirwa
- Visit omukiguy.com/support-my-work/
I am social too:
Facebook: / techiepress-1001496550...
Twitter: / omukiguy
Blog & Newsletter: omukiguy.com
Github: github.com/yttechiepress
-------------------------------------------------------------------------------
LEARN MORE IN THE WELL CURATED PLAYLISTS BELOW
--------------------------------------------------------------------------------
Learn how to build a plugin from scratch: • Plugins Vs Functions.p...
WooCommerce E-Commerce customizations
== Build Free Custom E-commerce Online Shop using WooCommerce - • WooCommerce customizat...
== Build Free Custom Theme for E-commerce Online Shop using WooCommerce -
• Woocommerce Restaurant...
====== Build Dynamic Websites with Elementor ======
== Learn the Elementor basics - • Elementor Beginner Tut...
== Build a custom Elementor Widget from Scratch - • Build Custom Elementor...
====== How to use WordPress Gutenberg Block Editor ======
WordPress 5.4 Gutenberg Blocks Updates
== • WordPress 5.4 Gutenber...
WordPress Gutenberg blocks for Designers
== • WordPress Basics Train...
Gutenberg WordPress Block Editor tutorials for beginners
== • WordPress Basics Train...
Custom WooCommerce Gateway Development from Scratch
== • Build Custom WooCommer...
WordPress Custom REST API Namespaces, Endpoints and Examples from Scratch
== • Create Custom WordPres...
====== WordPress Plugin Development from Scratch ======
Build Most Popular & Most Commented Post Plugin
== • Build WordPress Most P...
Build SMS Plugin with External WordPress API Integration using custom WordPress Databases
== • Build SMS Plugin - Ext...
WordPress External APIs Integration Plugin Development
== • WordPress External API...
Convert WordPress to mobile App in Headless WordPress
== Convert WordPress Sports Website into Mobile Application - kzbin.info?list...
Make GraphQL API endpoints with WordPress Headless CMS WPGraphQL Plugin
== • Make GraphQL API endpo...
Customize Your WordPress & ClassicPress
== Build Custom REST API Endpoints with WordPress or ClassicPress - • Build Custom REST API ...
Custom Dashboard Widgets
== • Custom Dashboard Widge...
Build Custom Admin
== • Custom Admin for WordP...
Learn Git
== Git tutorial for writers + software developers for beginners - • Git tutorial for begin...

[@theman7050]

Awesome. Eagerly waiting for the next vid

[@WonderRob]

Nice! you forgot to create the nonce and verify it for the form submission.

[@TechiePress]

Good catch! I didn’t want to make the video longer. I will do a video about security and encompass escaping strings and outputs as well.

[@felixagyei1369]

Great job brother. Thank you for taking the time to put together these excellent n educated videos 🙏🙏👍🏾

[@TechiePress]

I am glad you are enjoying them. What has been the one thing you have learnt or confirmed in your development from these videos?

[@sandropeggion9418]

Hi U make post request from front end, without CORS error?

[@user-mj4rh2on3t]

hi, is unclear if you for display form did use shortcode or custom html in sample page. Can you explain?

[@wayneshen5201]

Hey brother can you make a video about how to use drag and drop to reorder the categories on edit-tags.php? Thanks!

[@TechiePress]

Good question, How would drag and drop be usable?

[@wayneshen5201]

@@TechiePress use jquery ui drag and drop the category and use ajax to update the catagory order in the database.