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/git-push" 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/git-tutorial/66/git-push.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Git Push" 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/git-push">Git Push </a>
</h4>
</div> <div class="group">
<a href="/ca/what-is-period" 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/computer/10/what-is-period.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Què és un període?" 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/what-is-period">Què és un període? </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/how-make-your-number-private-android">
<img src="https://techcodeview.com/img/android-tutorial/90/how-make-your-number-private-android.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Com fer que el vostre número sigui privat a 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-make-your-number-private-android" class="hover:text-tech-500 transition-colors line-clamp-3">Com fer que el vostre número sigui privat a 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/nand-gate">
<img src="https://techcodeview.com/img/digital-electronics-logic-gate/81/nand-gate.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Porta NAND" 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/nand-gate" class="hover:text-tech-500 transition-colors line-clamp-3">Porta NAND </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/html-script-tag">
<img src="https://techcodeview.com/img/html-tutorial/76/html-script-tag.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Etiqueta d'script HTML" 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/html-script-tag" class="hover:text-tech-500 transition-colors line-clamp-3">Etiqueta d'script HTML </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/whats-better-you-131540">
<img src="https://techcodeview.com/img/blog/55/whats-better-you.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Què és millor per a tu: IB o AP? Guia d'experts universitaris" 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/whats-better-you-131540" class="hover:text-tech-500 transition-colors line-clamp-3">Què és millor per a tu: IB o AP? Guia d'experts universitaris </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-add-checkbox-word">
<img src="https://techcodeview.com/img/ms-word-tutorial/76/how-add-checkbox-word.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Com afegir una casella de selecció a 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-add-checkbox-word" class="hover:text-tech-500 transition-colors line-clamp-3">Com afegir una casella de selecció a Word </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/array-copy-java">
<img src="https://techcodeview.com/img/java-arrays/56/array-copy-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Còpia de matriu 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/array-copy-java" class="hover:text-tech-500 transition-colors line-clamp-3">Còpia de matriu 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/deletion-avl-tree">
<img src="https://techcodeview.com/img/ds-tutorial/61/deletion-avl-tree.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Supressió a l'arbre AVL" 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/deletion-avl-tree" class="hover:text-tech-500 transition-colors line-clamp-3">Supressió a l'arbre AVL </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/sys-path-python">
<img src="https://techcodeview.com/img/python-sys/77/sys-path-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="sys.path en Python" 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/sys-path-python" class="hover:text-tech-500 transition-colors line-clamp-3">sys.path en Python </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/what-is-bash">
<img src="https://techcodeview.com/img/bash-tutorial/40/what-is-bash.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Què és Bash?" 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/what-is-bash" class="hover:text-tech-500 transition-colors line-clamp-3">Què és Bash? </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/concept-convolution">
<img src="https://techcodeview.com/img/dip-tutorial/82/concept-convolution.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Concepte de convolució" 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/concept-convolution" class="hover:text-tech-500 transition-colors line-clamp-3">Concepte de convolució </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/alternatives/03/mylivecricket-alternatives.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Alternatives a MyLiveCricket" 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/alternatives/">Alternatives </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/mylivecricket-alternatives">Alternatives a MyLiveCricket </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/daa-tutorial/72/linear-time-sorting.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ordenació lineal del temps" 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/daa-tutorial/">Tutorial Daa </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/linear-time-sorting">Ordenació lineal del temps </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/ds-tutorial/57/tree-data-structure.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Estructura de dades de l'arbre" 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/ds-tutorial/">Tutorial Ds </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/tree-data-structure">Estructura de dades de l'arbre </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/it-problems-solutions/30/types-graphs-with-examples.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Tipus de gràfics 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/it-problems-solutions/">Problemes Informàtics I Solucions </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/types-graphs-with-examples">Tipus de gràfics 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/linux-tutorial/80/tar-command-linux-unix-with-examples.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ordre Tar a Linux/Unix 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/linux-tutorial/">Tutorial De Linux </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/tar-command-linux-unix-with-examples">Ordre Tar a Linux/Unix 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/rxjs-tutorial/49/rxjs-observables.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="RxJS Observables" 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/rxjs-tutorial/">Tutorial Rxjs </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/rxjs-observables">RxJS Observables </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/">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>