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: 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