{"id":1188,"date":"2012-09-18T02:55:46","date_gmt":"2012-09-18T02:55:46","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=1188"},"modified":"2012-09-18T02:55:46","modified_gmt":"2012-09-18T02:55:46","slug":"jquery-alert-array-values-get-all-values-in-array-using-jquery","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-alert-array-values-get-all-values-in-array-using-jquery\/","title":{"rendered":"jQuery Alert Array Values Examples"},"content":{"rendered":"<p>Processing an array to retrieve its indices and values are different from processing values of other variables in jQuery. In this article, I am going to discuss how to alert array values using jQuery. We will <strong>alert array values along with <strong>\u00a0keys\/indices\u00a0<\/strong>for each of these values using jQuery<\/strong>. This neat way will be immensely useful when you need to debug your jQuery code to see\/read\/get contents of an array along with keys in jQuery. So read on to find out more how this article can help you.<!--more--><\/p>\n<h2>How to Get \/ Alert \/ Print all values in array using jQuery<\/h2>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=1188\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p>Let&#8217;s take an example. Assume that we have an array in our jQuery code. Now we want to be able to click a button and alert each of the array values along with it&#8217;s key so that we can see alert array value.<\/p>\n<h3>Example: Here is the full source code to print \/ alert array values using jQuery<\/h3>\n<pre class=\"lang:xhtml decode:true\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;jQuery Declare Array | Declare array with values using jQuery Example&lt;\/title&gt;\n&lt;script type=\"text\/javascript\" src=\"js\/jquery_1.7.1_min.js\"&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;input type=\"submit\" name=\"btn_alert\" id=\"btn_alert\" value=\"Alert array values \/ keys\" \/&gt;\n\n&lt;script type=\"text\/javascript\"&gt;\n\n$(document).ready(function() {\n\n\/\/Declare an array\nvar fruits_array = ['mango', 'apple', 'grapes'];\n\n$('#btn_alert').click(function(){\n\n$.each(fruits_array, function(key, value) {\nalert('Array Key is: '+ key + ' \\n Array Key value is: ' + value);\n});\n\nreturn false;\n\n});\n\n});\n\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>When you run the above code, you won&#8217;t see anything on the screen except a button. This is because we have declared our array in jQuery. This array is not an element on the webpage, rather it is an array declaration in the code. So when when you click the button, the array key \/ indices are alerted along with the key value on next line, in a loop.<\/p>\n<p>I have found this trick to be immensely useful when I need to <strong>check all values of array and\/or to debug them<\/strong>. And since this also gets array keys, it&#8217;s even more useful.<\/p>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=1188\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<h5>Simple, isn&#8217;t it?<\/h5>\n<p>Do you know of any other ways to use <em><strong>jQuery to\u00a0<\/strong><strong>alert array values<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Processing an array to retrieve its indices and values are different from processing values of other variables in jQuery. In this article, I am going to discuss how to alert array values using jQuery. We will alert array values along with \u00a0keys\/indices\u00a0for each of these values using jQuery. This neat way will be immensely useful [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[40,41],"class_list":["post-1188","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-2","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-ja","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1188","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=1188"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1188\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=1188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=1188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=1188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}