{"id":5626,"date":"2024-08-29T00:36:14","date_gmt":"2024-08-29T00:36:14","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/afficher-tableau-avec-concat-en-javascript\/"},"modified":"2024-08-29T00:36:18","modified_gmt":"2024-08-29T00:36:18","slug":"afficher-tableau-avec-concat-en-javascript","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/afficher-tableau-avec-concat-en-javascript\/","title":{"rendered":"8.9 Afficher Tableau avec concat en JavaScript"},"content":{"rendered":"\n<p><strong>Afficher Tableau avec `concat` en JavaScript<\/strong> est un aspect essentiel pour manipuler et visualiser des donn\u00e9es de mani\u00e8re efficace. Ma\u00eetriser l&rsquo;utilisation de `concat` pour afficher des tableaux peut consid\u00e9rablement am\u00e9liorer la gestion des donn\u00e9es dans vos applications web. Apprenons comment utiliser cette m\u00e9thode avec des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;affichage de Tableau avec `concat` en JavaScript<\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/658886547?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre guide complet pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Guide complet \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \n    }\n});\n<\/script>\n\n\n\n<p>La m\u00e9thode <code>concat<\/code> en JavaScript est utilis\u00e9e pour fusionner deux ou plusieurs tableaux en un seul. Elle ne modifie pas les tableaux existants, mais renvoie un nouveau tableau. Apprenons comment utiliser cette m\u00e9thode pour afficher des tableaux dynamiquement.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er et Concat\u00e9ner des Tableaux en JavaScript<\/h3>\n\n\n\n<p>Pour commencer, cr\u00e9ons quelques tableaux et utilisons <code>concat<\/code> pour les fusionner. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Cr\u00e9er des tableaux de donn\u00e9es\nlet fruits = [\"Apple\", \"Banana\"];\nlet vegetables = [\"Carrot\", \"Pea\"];\nlet proteins = [\"Chicken\", \"Tofu\"];\n\n\/\/ Utiliser concat pour fusionner les tableaux\nlet groceries = fruits.concat(vegetables, proteins);\n\nconsole.log(groceries); \/\/ [\"Apple\", \"Banana\", \"Carrot\", \"Pea\", \"Chicken\", \"Tofu\"]\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Afficher le Tableau Fusionn\u00e9 dans le DOM<\/h3>\n\n\n\n<p>Apr\u00e8s avoir fusionn\u00e9 les tableaux, nous pouvons les afficher dans le Document Object Model (DOM). Voici comment vous pouvez proc\u00e9der :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Cr\u00e9er une fonction pour afficher le tableau dans le DOM\nfunction displayArray(array, elementId) {\n    const element = document.getElementById(elementId);\n    element.innerHTML = \"\"; \/\/ Vider le contenu pr\u00e9c\u00e9dent\n    array.forEach(item => {\n        const li = document.createElement('li');\n        li.textContent = item;\n        element.appendChild(li);\n    });\n}\n\n\/\/ Afficher le tableau fusionn\u00e9\ndisplayArray(groceries, \"groceryList\");\n<\/code><\/pre>\n\n\n\n<ul id=\"groceryList\"><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Mise \u00e0 Jour Dynamique du Tableau Fusionn\u00e9<\/h3>\n\n\n\n<p>Nous allons cr\u00e9er une fonctionnalit\u00e9 qui permet de mettre \u00e0 jour le tableau fusionn\u00e9 en ajoutant de nouveaux \u00e9l\u00e9ments aux tableaux originaux et de r\u00e9afficher le tableau mis \u00e0 jour.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Fonction de mise \u00e0 jour et d'affichage du tableau fusionn\u00e9\nfunction updateAndDisplayArray(newItem, array, elementId) {\n    array.push(newItem);\n    let updatedGroceries = fruits.concat(vegetables, proteins);\n    displayArray(updatedGroceries, elementId);\n}\n\n\/\/ Exemple d'utilisation\nupdateAndDisplayArray(\"Mango\", fruits, \"groceryList\");\n<\/code><\/pre>\n\n\n\n<p>Ces techniques permettent de maintenir une interface utilisateur r\u00e9active o\u00f9 les donn\u00e9es sont affich\u00e9es et mises \u00e0 jour dynamiquement, garantissant ainsi une meilleure exp\u00e9rience utilisateur.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Applications Pratiques de `concat` dans des Projets R\u00e9els<\/h3>\n\n\n\n<p>Dans des projets r\u00e9els, l&rsquo;utilisation de <code>concat<\/code> peut \u00eatre appliqu\u00e9e \u00e0 diverses t\u00e2ches telles que la gestion de listes d&rsquo;inventaire, l&rsquo;agr\u00e9gation de donn\u00e9es de diff\u00e9rentes sources, ou la fusion de r\u00e9ponses API avant de les pr\u00e9senter \u00e0 l&rsquo;utilisateur. Consid\u00e9rons quelques exemples avanc\u00e9s pour illustrer cela.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Gestion de l&rsquo;Inventaire<\/h4>\n\n\n\n<p>Dans une application de gestion d&rsquo;inventaire, vous pouvez utiliser <code>concat<\/code> pour combiner diff\u00e9rentes cat\u00e9gories de produits et afficher une liste compl\u00e8te de l&rsquo;inventaire.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Cat\u00e9gories de produits\nlet electronics = [\"Laptop\", \"Smartphone\"];\nlet furniture = [\"Table\", \"Chair\"];\nlet groceries = fruits.concat(vegetables, proteins);\n\n\/\/ Fusionner toutes les cat\u00e9gories\nlet inventory = electronics.concat(furniture, groceries);\n\nconsole.log(inventory); \/\/ [\"Laptop\", \"Smartphone\", \"Table\", \"Chair\", \"Apple\", \"Banana\", \"Carrot\", \"Pea\", \"Chicken\", \"Tofu\"]\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Agr\u00e9gation de Donn\u00e9es API<\/h4>\n\n\n\n<p>Lorsque vous travaillez avec plusieurs API, vous devrez souvent fusionner les donn\u00e9es re\u00e7ues avant de les afficher. Voici un exemple de l&rsquo;agr\u00e9gation des donn\u00e9es API :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Supposons que nous obtenons des donn\u00e9es de deux API diff\u00e9rentes\nlet apiResponse1 = [\"Data1\", \"Data2\"];\nlet apiResponse2 = [\"Data3\", \"Data4\"];\n\n\/\/ Fusionner les donn\u00e9es des deux r\u00e9ponses\nlet combinedData = apiResponse1.concat(apiResponse2);\n\nconsole.log(combinedData); \/\/ [\"Data1\", \"Data2\", \"Data3\", \"Data4\"]\n\n\/\/ Afficher les donn\u00e9es fusionn\u00e9es\ndisplayArray(combinedData, \"apiDataList\");\n<\/code><\/pre>\n\n\n\n<ul id=\"apiDataList\"><\/ul>\n\n\n\n<p>La flexibilit\u00e9 de <code>concat<\/code> et sa capacit\u00e9 \u00e0 manipuler les tableaux en font un outil indispensable pour les d\u00e9veloppeurs JavaScript travaillant sur des projets complexes et dynamiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>L&rsquo;utilisation de <strong>concat<\/strong> en JavaScript pour afficher des tableaux est une comp\u00e9tence pr\u00e9cieuse qui peut faciliter la manipulation des donn\u00e9es et am\u00e9liorer l&rsquo;interactivit\u00e9 de vos applications web. Gr\u00e2ce \u00e0 cette m\u00e9thode, vous pouvez facilement fusionner plusieurs tableaux, mettre \u00e0 jour dynamiquement le contenu affich\u00e9, et int\u00e9grer des donn\u00e9es de diverses sources. Continuez \u00e0 explorer les possibilit\u00e9s offertes par <code>concat<\/code> et d&rsquo;autres m\u00e9thodes de tableau pour renforcer vos comp\u00e9tences en d\u00e9veloppement web. Pour en apprendre davantage sur JavaScript et ses fonctionnalit\u00e9s avanc\u00e9es, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">cours sur les fondamentaux de JavaScript<\/a>. Pour approfondir vos connaissances, explorez des ressources comme <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/concat\" target=\"_blank\" rel=\"noopener\">MDN Web Docs<\/a> et <a href=\"https:\/\/www.coursera.org\/\" target=\"_blank\" rel=\"noopener\">Coursera<\/a> pour des cours structur\u00e9s.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-JAVASCRIPT-offre-50.gif\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-JAVASCRIPT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>Afficher Tableau avec `concat` en JavaScript est un aspect essentiel pour manipuler et visualiser des donn\u00e9es de mani\u00e8re efficace. Ma\u00eetriser l&rsquo;utilisation de `concat` pour afficher&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2840,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5626","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-4-javascript","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5626","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5626"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5626\/revisions"}],"predecessor-version":[{"id":5627,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5626\/revisions\/5627"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2840"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5626"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5626"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}