Llegiu el fitxer JSON mitjançant JavaScript
JSON significa Notació d'objectes JavaScript . És una manera d'organitzar les dades en un fitxer de script mitjançant text, de manera que és fàcil emmagatzemar i compartir dades.
Lectura JSON Els fitxers, tant si s'emmagatzemen localment com en un servidor, són crucials per a les aplicacions web. En aquest tutorial, tractarem tres mètodes per llegir fitxers JSON en JavaScript, que poden ser molt útils per als desenvolupadors web.
Taula de contingut
- Com llegir el fitxer JSON a JavaScript?
- Utilitzant l'API fetch() per llegir el fitxer JSON
- Utilitzant el mòdul Require per llegir el fitxer JSON
- En importar el mòdul per llegir el fitxer JSON
- Conclusió
NOTA: JavaScript admet JSON internament, de manera que no requereix mòduls addicionals per importar i mostrar el JSON. Només hem d'importar el fitxer JSON i el podem utilitzar directament directament per realitzar manipulacions sobre ell.
Com llegir el fitxer JSON a JavaScript?
Tres mètodes per llegir fitxers JSON en JavaScript són:
Nota: El fitxer JSON següent s'utilitzarà per obtenir les dades.
sample.json
{ 'users':[ { 'site':'techcodeview.com', 'user': 'Shobhit' } ] } 1. Ús de l'API fetch() per llegir el fitxer JSON
El mètode fetch() s'utilitza per llegir fitxers JSON (fitxers locals o carregats). Utilitza la mateixa sintaxi per als dos tipus de fitxer.
Sintaxi
fetch('JSONFilePath').then().then().catch(); Seguiu aquests passos per llegir el fitxer JSON mitjançant el mètode fetch API:
- Creeu un fitxer JSON i afegiu-hi dades
- Obriu el fitxer JavaScript
- En el mètode fetch, passeu la ruta del fitxer JSON
- Utilitzeu el mètode .json() per analitzar les dades en format JSON.
- Mostra el contingut a la consola.
Exemple de lectura del fitxer JSON en JavaScript:
El codi següent us ajudarà a entendre l'ús del mètode fetch() per llegir fitxers JSON.
HTML Llegiu Títol del fitxer JSON> cap> <body> <h1>techcodeview.comh1> <h3>Aneu a la consola per veure les dades obtingudes!! h3> <script>funció fetchJSONData() { fetch('./sample.json') .then((res) => { if (!res.ok) { throw new Error (`error HTTP! Estat: ${res.status} `); } retorna res.json(); error)); } fetchJSONData(); script> body> html>> </pre> </code> <p dir='ltr'> <b> <strong>Sortida: </strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/javascript-questions/49/read-json-file-using-javascript.webp' alt='visualització de la consola de les dades JSON després d'obtenir l'API'> </p> <h2 id='using-the-require-module-to-read-json-file'> <b> <strong>2. Utilitzant el mòdul Require per llegir el fitxer JSON </strong> </b> </h2> <p dir='ltr'> <span>Requereix mòdul </span> <span>s'utilitza per incloure mòduls a la vostra aplicació. Es pot utilitzar per incloure un fitxer en una aplicació web. </span> </p> <h3> <span>Sintaxi: </span> </h3> <pre>require(JSONFilePath); </pre> <p dir='ltr'> <span>Seguiu aquests passos per llegir fitxers JSON mitjançant el mòdul necessari a JavaScript. </span> </p> <ul> <li value='1'> <span>Creeu el fitxer JSON tal com s'especifica a l'enfocament anterior </span> </li> <li value='2'> <span>Creeu un script.js i utilitzeu el mètode necessari del node per importar el fitxer JSON </span> </li> <li value='3'> <span>Imprimeix les dades a la consola </span> </li> </ul> <p dir='ltr'> <b> <strong>NOTA: </strong> </b> <span>En lloc d'executar el programa al navegador, l'executarem a la consola mitjançant Node. Assegureu-vos que teniu almenys la versió 17.0 de Node. </span> </p> <h3> <b> <strong>Exemple </strong> </b> </h3> <p dir='ltr'> <span>El codi següent es pot enganxar directament en un fitxer d'script (el node s'ha d'instal·lar) per executar i obtenir les dades JSON. </span> </p>Javascript <code> <pre>const sample = require('./sample.json'); console.log(sample); </pre> </code> <p dir='ltr'> <b> <strong>Sortida: </strong> </b> </p> <pre>{ users: [ { site: 'GeeksForGeeks', user: 'Shobhit' } ] } </pre> <h2 id='by-importing-the-module-to-read-json-file'> <b> <strong>3. En importar el mòdul per llegir el fitxer JSON </strong> </b> </h2> <p dir='ltr'> <span>El </span> <span>declaració d'importació </span> <span>es pot utilitzar per importar i emmagatzemar elements del fitxer JSON en una variable en JavaScript. </span> </p> <h3> <span>Sintaxi: </span> </h3> <pre>import nameOfVariable from 'JSONFilePath' assert {type: 'json'}; </pre> <ul> <li value='1'> <span>Creeu el fitxer JSON tal com es descriu als exemples anteriors. </span> </li> <li value='2'> <span>Creeu un fitxer script.js i importeu el fitxer JSON </span> </li> </ul> <h3> <b> <strong>Exemple de lectura de fitxers JSON en JavaScript: </strong> </b> </h3> <p dir='ltr'> <span>El codi següent Llegeix el fitxer JSON important-lo mitjançant la instrucció d'importació. </span> </p>HTML <code> <pre> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content= 'width=device-width, initial-scale=1.0'> <title>Llegiu Títol del fitxer JSON> cap> <body> <h1>techcodeview.comh1> <h3>Aneu a la consola per veure les dades obtingudes!! h3> <script type='module' src='./script.js'>script> body> html>> </pre> </code>Javascript <code> <pre>// script.js import user from './sample.json' assert { type: 'json' }; console.log(user) </pre> </code> <p dir='ltr'> <b> <strong>Sortida: </strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/javascript-questions/49/read-json-file-using-javascript.webp' alt='vista de la consola de dades JSON mitjançant el mòdul d'importació'> </p> <h2 id='conclusion'> <span>Conclusió </span> </h2> <p dir='ltr'> <span>La lectura de fitxers JSON a JavaScript és una tasca molt important per a un desenvolupador web, ja que els fitxers JSON s'utilitzen per emmagatzemar dades d'usuari, dades de configuració, dades estàtiques i altra informació vital. </span> </p> <p dir='ltr'> <span>Aquesta guia va explicar tres mètodes per llegir fitxers JSON en JavaScript amb exemples. En entendre aquestes tècniques, els desenvolupadors poden abordar amb confiança les tasques relacionades amb fitxers JSON, garantint processos de desenvolupament més fluids i experiències d'usuari millorades. </span> </p> <br> <br>
</div>
<!-- Article Footer with Prominent Share Buttons -->
<div class="px-6 md:px-8 py-8 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700/50">
<div class="flex flex-col sm:flex-row items-center justify-between gap-6">
<h4 class="text-base font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wide flex items-center gap-2">
<i class="fa fa-share-alt text-tech-500"> </i>
Comparteix </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Llegiu el fitxer JSON mitjançant JavaScript&url=https://www.techcodeview.com/ca/read-json-file-using-javascript"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-twitter text-lg"> </i>
<span class="hidden sm:inline">Twitter </span>
</a>
<!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.techcodeview.com/ca/read-json-file-using-javascript"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#4267B2]/10 text-[#4267B2] hover:bg-[#4267B2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-facebook text-lg"> </i>
<span class="hidden sm:inline">Facebook </span>
</a>
<!-- LinkedIn -->
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.techcodeview.com/ca/read-json-file-using-javascript&title=Llegiu el fitxer JSON mitjançant JavaScript"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#0077b5]/10 text-[#0077b5] hover:bg-[#0077b5] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-linkedin text-lg"> </i>
<span class="hidden sm:inline">LinkedIn </span>
</a>
</div>
</div>
</div>
</article>
<!-- Comments Placeholder / Random Articles -->
<div class="mt-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 md:p-8 shadow-sm">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 uppercase tracking-wide border-b border-slate-200 dark:border-slate-700 pb-2">
Potser T'Agradarà </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/ca/how-do-you-know-if-someone-blocked-your-number-android" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/android-tutorial/05/how-do-you-know-if-someone-blocked-your-number-android.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Com saps si algú ha bloquejat el teu número a Android?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/ca/how-do-you-know-if-someone-blocked-your-number-android">Com saps si algú ha bloquejat el teu número a Android? </a>
</h4>
</div> <div class="group">
<a href="/ca/private-ip-addresses-networking" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/picked/01/private-ip-addresses-networking.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Adreces IP privades en xarxes" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/ca/private-ip-addresses-networking">Adreces IP privades en xarxes </a>
</h4>
</div>
</div>
</div>
</div>
<!-- SECONDARY COLUMN (SIDEBAR) -->
<!-- Aside Column -->
<div class="lg:col-span-4 space-y-8">
<!-- Best Articles Widget -->
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 shadow-sm">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide flex items-center">
<span class="mr-2 h-2 w-2 rounded-full bg-tech-500"> </span>
Articles Més Populars </h2>
</div>
<!-- Owl Carousel Preserved Container -->
<div id="owl-carousel-3" class="owl-carousel owl-theme center-owl-nav">
<!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ca/stream-java">
<img src="https://techcodeview.com/img/java-util-package/43/stream-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Transmissió en Java" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ca/stream-java" class="hover:text-tech-500 transition-colors line-clamp-3">Transmissió en Java </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ca/c-templates">
<img src="https://techcodeview.com/img/c-tutorial/98/c-templates.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Plantilles C++" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ca/c-templates" class="hover:text-tech-500 transition-colors line-clamp-3">Plantilles C++ </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ca/how-recover-deleted-videos-from-android">
<img src="https://techcodeview.com/img/android-tutorial/15/how-recover-deleted-videos-from-android.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Com recuperar vídeos esborrats d'Android" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ca/how-recover-deleted-videos-from-android" class="hover:text-tech-500 transition-colors line-clamp-3">Com recuperar vídeos esborrats d'Android </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ca/linux-unix-chroot-command">
<img src="https://techcodeview.com/img/linux-tutorial/84/linux-unix-chroot-command.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Linux/Unix: comanda chroot" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ca/linux-unix-chroot-command" class="hover:text-tech-500 transition-colors line-clamp-3">Linux/Unix: comanda chroot </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ca/smart-famous-people-1311366">
<img src="https://techcodeview.com/img/blog/30/smart-famous-people.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Persones famoses intel·ligents i les seves puntuacions SAT" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ca/smart-famous-people-1311366" class="hover:text-tech-500 transition-colors line-clamp-3">Persones famoses intel·ligents i les seves puntuacions SAT </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ca/4-top-tips-ace-ase-certification-tests-131742">
<img src="https://techcodeview.com/img/blog/81/4-top-tips-ace-ase-certification-tests.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="4 millors consells per superar les proves de certificació ASE" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ca/4-top-tips-ace-ase-certification-tests-131742" class="hover:text-tech-500 transition-colors line-clamp-3">4 millors consells per superar les proves de certificació ASE </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ca/is-196-perfect-square">
<img src="https://techcodeview.com/img/maths-formulas/77/is-196-perfect-square.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="El 196 és un quadrat perfecte?" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ca/is-196-perfect-square" class="hover:text-tech-500 transition-colors line-clamp-3">El 196 és un quadrat perfecte? </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ca/how-git-undo-last-commit">
<img src="https://techcodeview.com/img/blog/57/how-git-undo-last-commit.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Com git desfer l'últim commit" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ca/how-git-undo-last-commit" class="hover:text-tech-500 transition-colors line-clamp-3">Com git desfer l'últim commit </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ca/eulerian-path-circuit">
<img src="https://techcodeview.com/img/euler-circuit/32/eulerian-path-circuit.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Camí i circuit eulerià per a gràfics no dirigits" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ca/eulerian-path-circuit" class="hover:text-tech-500 transition-colors line-clamp-3">Camí i circuit eulerià per a gràfics no dirigits </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ca/how-search-words-word-document">
<img src="https://techcodeview.com/img/ms-word-tutorial/58/how-search-words-word-document.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Com cercar paraules en un document de Word" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ca/how-search-words-word-document" class="hover:text-tech-500 transition-colors line-clamp-3">Com cercar paraules en un document de Word </a>
</h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
<!-- Categories -->
<div class="mt-8 mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Categoria </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/ca/blog/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Bloc
</a> <a href="/ca/java-conversion/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Conversió De Java
</a> <a href="/ca/maths/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Matemàtiques
</a> <a href="/ca/java-collections/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Col·leccions Java
</a> <a href="/ca/differences/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Diferències
</a> <a href="/ca/java-string/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Cadena De Java
</a>
</div>
<!-- Interesting Articles Widget -->
<div class="mt-8">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Articles D'Interès </h2>
</div>
<div id="owl-carousel-4" class="owl-carousel owl-theme">
<!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/operating-system/04/difference-between-ubuntu.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Diferència entre Ubuntu i Ubuntu" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/ca/operating-system/">Sistema Operatiu </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/difference-between-ubuntu">Diferència entre Ubuntu i Ubuntu </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/accolite/27/deletion-binary-search-tree.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Supressió a l'arbre de cerca binari (BST)" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/ca/accolite/">Acòlit </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/deletion-binary-search-tree">Supressió a l'arbre de cerca binari (BST) </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/java-util-package/87/arrays-aslist-method-java-with-examples.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Mètode Arrays asList() a Java amb exemples" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/ca/java-util-package/">Java - Paquet D'utilitat </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/arrays-aslist-method-java-with-examples">Mètode Arrays asList() a Java amb exemples </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/blog/71/12-best-fashion-schools-us.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Les 12 millors escoles de moda dels EUA" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/ca/blog/">Bloc </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/12-best-fashion-schools-us-1311438">Les 12 millors escoles de moda dels EUA </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/hash/84/print-all-subarrays-with-0-sum.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Imprimiu tots els subarrays amb 0 suma" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/ca/hash/">Hash </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/print-all-subarrays-with-0-sum">Imprimiu tots els subarrays amb 0 suma </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/blog/82/143-most-important-quotes-great-gatsby.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Les 143 cites més importants d'El gran Gatsby, analitzades" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/ca/blog/">Bloc </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/143-most-important-quotes-great-gatsby-131710">Les 143 cites més importants d'El gran Gatsby, analitzades </a> </h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
</div>
</div>
</div>
<!-- /Aside Column --> </div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<span class="footer-links">
Copyright ©2026 Tots Els Drets Reservats |
<a href="//www.techcodeview.com/ar/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Exempció De Responsabilitat </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Sobre Nosaltres </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privadesa </a>
</span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"> </script>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed; bottom: 25px; right: 25px; z-index: 9999; opacity: 0; visibility: hidden; background-color: #0ea5e9; color: white; border: none; border-radius: 8px; width: 50px; height: 50px; font-size: 24px; cursor: pointer; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover { background-color: #0284c7; }
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>