{"id":2070,"date":"2024-10-05T20:33:15","date_gmt":"2024-10-05T18:33:15","guid":{"rendered":"https:\/\/upendo.com\/macros\/een-specifieke-variabele-ophalen-uit-een-array-van-objecten"},"modified":"2025-06-12T16:07:42","modified_gmt":"2025-06-12T14:07:42","slug":"een-specifieke-variabele-ophalen-uit-een-array-van-objecten","status":"publish","type":"macros_pt","link":"https:\/\/upendo.com\/nl\/macros\/een-specifieke-variabele-ophalen-uit-een-array-van-objecten","title":{"rendered":"Een specifieke variabele ophalen uit een array van objecten"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">De macro heeft een array van objecten nodig als invoer. Mijn suggestie is dat je array als een datalaagvariabele in je website krijgt. Het pakt de toegewezen variabele (in dit geval &#8216;id&#8217;) en voert deze weer uit als een array: [ &#8216;123&#8217;, &#8216;456&#8217; ].  <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"usecase\">Usecase<\/h2>\n\n<p class=\"wp-block-paragraph\">Dit wordt vaak gebruikt voor e-commerce websites. De informatie over meerdere producten wordt als een array in de datalayer geduwd. Je wilt deze filteren om bijvoorbeeld naar ViewContent of Purchase tags te sturen. Deze macro helpt je daarbij.   <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"instructions\">Instructies<\/h2>\n\n<ul class=\"wp-block-list\">\n<li>Vervang de {{var_products_array}} door een GTM-variabele die een array met informatie bevat.<\/li>\n\n\n\n<li>Vervang &#8216;id&#8217; in regel 28 door de variabelenaam die in de array staat.<\/li>\n<\/ul>\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#d8dee9ff;--cbp-line-number-width:calc(2 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(201, 218, 248, 0.2);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#39404f;color:#c8d0e0\">JavaScript<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>\/\/ Een specifieke variabele ophalen uit een array van objecten\n\/\/ Voorbeeld invoer:\n\/\/ [\n\/\/ {\n\/\/ id: \u201c123\u201d,\n\/\/ naam: \u201cZwemkleding blauw\u201d,\n\/\/ merk: \u201c006\u201d,\n\/\/ variant: \u201cM\u201d,\n\/\/ prijs: \u201c79\u201d,\n\/\/ hoeveelheid: \u201c1\u201d,\n\/\/ lijst: \u201c\/collecties\/zwemkleding\u201d,\n\/\/ },\n\/\/ {\n\/\/ id: \u201c456\u201d,\n\/\/ naam: \u201cKorte broek grijs\u201d,\n\/\/ merk: \u201c009\u201d,\n\/\/ variant: \u201cXL\u201d,\n\/\/ prijs: \u201c79.0\u201d,\n\/\/ hoeveelheid: \u201c1\u201d,\n\/\/ lijst: \u201c\/collecties\/shorts\u201d,\n\/\/ }\n\/\/ ]\n\/\/\n\/\/ Voorbeeld uitvoer: [ \u201c123\u201d, \u201c456\u201d ]\n\nfunctie() {\n var products = {{var_products_array}};\n return products.reduce(function(arr, prod) { return arr.concat(prod.id); }, []);\n}\n\n\/\/ Merk op dat \u201cid\u201d kan worden vervangen door bijvoorbeeld \u201cnaam\u201d. Het hangt af van de inhoud van je array die je wilt kiezen. <\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #616E88\">\/\/ Gets a specific variable from a array of objects<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/ Input example:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/ [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/   {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/     id: \"123\",<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/     name: \"Swimwear blue\",<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/     brand: \"006\",<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/     variant: \"M\",<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/     price: \"79\",<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/     quantity: \"1\",<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/     list: \"\/collections\/swimwear\",<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/   },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/   {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/     id: \"456\",<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/     name: \"Shorts grey\",<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/     brand: \"009\",<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/     variant: \"XL\",<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/     price: \"79.0\",<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/     quantity: \"1\",<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/     list: \"\/collections\/shorts\",<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/   }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/ ]<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/ Output example: [ '123', '456' ]<\/span><\/span>\n<span class=\"line\"\/>\n<span class=\"line cbp-line-highlight\"><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line cbp-line-highlight\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">products<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{{<\/span><span style=\"color: #D8DEE9\">var_products_array<\/span><span style=\"color: #ECEFF4\">}}<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line cbp-line-highlight\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">return<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">products<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">reduce<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">arr<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">prod<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">return<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">arr<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">concat<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">prod<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">id<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">},<\/span><span style=\"color: #D8DEE9FF\"> [])<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line cbp-line-highlight\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"\/>\n<span class=\"line\"><span style=\"color: #616E88\">\/\/ Notice that 'id' can be replaced with for example 'name'. It depends on the contents of your array you want to pick.<\/span><\/span><\/code><\/pre><\/div>\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<p class=\"wp-block-paragraph\"><em><em>Is dit niet de macro die je zocht? Bekijk hieronder verwante macro&#8217;s of <a href=\"https:\/\/upendo.com\/contact\">vraag er een aan<\/a>. <\/em><\/em><br\/><\/p>\n","protected":false},"author":1,"featured_media":0,"template":"","type_macros_pt":[47],"tag_macros_pt":[46],"level_macros_pt":[45],"class_list":["post-2070","macros_pt","type-macros_pt","status-publish","hentry","type_macros_pt-gegevensmanipulatie","tag_macros_pt-array-nl","level_macros_pt-intermediair"],"acf":[],"_links":{"self":[{"href":"https:\/\/upendo.com\/nl\/wp-json\/wp\/v2\/macros_pt\/2070","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/upendo.com\/nl\/wp-json\/wp\/v2\/macros_pt"}],"about":[{"href":"https:\/\/upendo.com\/nl\/wp-json\/wp\/v2\/types\/macros_pt"}],"author":[{"embeddable":true,"href":"https:\/\/upendo.com\/nl\/wp-json\/wp\/v2\/users\/1"}],"wp:attachment":[{"href":"https:\/\/upendo.com\/nl\/wp-json\/wp\/v2\/media?parent=2070"}],"wp:term":[{"taxonomy":"type_macros_pt","embeddable":true,"href":"https:\/\/upendo.com\/nl\/wp-json\/wp\/v2\/type_macros_pt?post=2070"},{"taxonomy":"tag_macros_pt","embeddable":true,"href":"https:\/\/upendo.com\/nl\/wp-json\/wp\/v2\/tag_macros_pt?post=2070"},{"taxonomy":"level_macros_pt","embeddable":true,"href":"https:\/\/upendo.com\/nl\/wp-json\/wp\/v2\/level_macros_pt?post=2070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}