Lasiet JSON failu, izmantojot JavaScript
JSON apzīmē JavaScript objektu apzīmējums . Tas ir veids, kā kārtot datus skripta failā, izmantojot tekstu, atvieglojot datu glabāšanu un kopīgošanu.
Lasīšana JSON faili neatkarīgi no tā, vai tie tiek glabāti lokāli vai serverī, ir ļoti svarīgi tīmekļa lietojumprogrammām. Šajā apmācībā mēs apskatīsim trīs metodes JSON failu lasīšanai JavaScript, kas var būt ļoti noderīga tīmekļa izstrādātājiem.
Satura rādītājs
- Kā lasīt JSON failu JavaScript?
- Izmantojot fetch() API, lai lasītu JSON failu
- Nepieciešamā moduļa izmantošana JSON faila lasīšanai
- Importējot moduli, lai lasītu JSON failu
- Secinājums
PIEZĪME: JavaScript iekšēji atbalsta JSON, tāpēc tam nav nepieciešami papildu moduļi, lai importētu un parādītu JSON. Mums vienkārši ir jāimportē JSON fails, un mēs to varam viegli izmantot, lai ar to veiktu manipulācijas.
Kā lasīt JSON failu JavaScript?
Trīs metodes JSON failu lasīšanai JavaScript ir:
Piezīme: Datu izgūšanai tiks izmantots tālāk norādītais JSON fails.
sample.json
{ 'users':[ { 'site':'techcodeview.com', 'user': 'Shobhit' } ] } 1. Izmantojiet fetch() API, lai lasītu JSON failu
Metode fetch() tiek izmantota JSON failu (vietējo vai augšupielādēto failu) lasīšanai. Abiem failu tipiem tiek izmantota viena un tā pati sintakse.
Sintakse
fetch('JSONFilePath').then().then().catch(); Veiciet šīs darbības, lai lasītu JSON failu, izmantojot API metodi:
- Izveidojiet JSON failu un pievienojiet tam datus
- Atveriet JavaScript failu
- Ieneses metodē nododiet JSON faila ceļu
- Izmantojiet .json() metodi, lai parsētu datus JSON formātā.
- Parādiet saturu konsolē.
Piemērs JSON faila lasīšanai JavaScript:
Tālāk norādītais kods palīdzēs izprast metodes fetch() izmantošanu JSON failu lasīšanai.
HTML Izlasiet JSON faila nosaukumu> head> <body> <h1>techcodeview.comh1> <h3>Dodieties uz konsoli, lai redzētu ienestos datus!! h3> <script>function fetchJSONData() { fetch('./sample.json') .then((res) => { if (!res.ok) { throw new Error (`HTTP kļūda! Statuss: ${res.status} `); } return res.json( }) .then((data) => console.log(data)) .catch((error) => console.error('Nevar ielādēt datus:', kļūda)); } fetchJSONData(); skripts> body> html>>> </tag> <p dir='ltr'> <b> <strong>Izvade: </strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/javascript-questions/49/read-json-file-using-javascript.webp' alt='JSON datu konsoles skats pēc API ielādes'> </p> <h2 id='using-the-require-module-to-read-json-file'> <b> <strong>2. Require Module izmantošana JSON faila lasīšanai </strong> </b> </h2> <p dir='ltr'> <span>Nepieciešams modulis </span> <span>tiek izmantots, lai jūsu lietojumprogrammā iekļautu moduļus. To var izmantot, lai iekļautu failu tīmekļa lietojumprogrammā. </span> </p> <h3> <span>Sintakse: </span> </h3> <pre>require(JSONFilePath); </pre> </code> <p dir='ltr'> <span>Veiciet šīs darbības, lai lasītu JSON failus, izmantojot nepieciešamo JavaScript moduli. </span> </p> <ul> <li value='1'> <span>Izveidojiet JSON failu, kā norādīts iepriekšējā pieejā </span> </li> <li value='2'> <span>Izveidojiet script.js un izmantojiet vajadzīgo mezgla metodi, lai importētu JSON failu </span> </li> <li value='3'> <span>Izdrukājiet datus konsolē </span> </li> </ul> <p dir='ltr'> <b> <strong>PIEZĪME: </strong> </b> <span>Tā vietā, lai palaistu programmu pārlūkprogrammā, mēs to palaidīsim konsolē, izmantojot Node. Pārliecinieties, vai jums ir vismaz Node versija 17.0. </span> </p> <h3> <b> <strong>Piemērs </strong> </b> </h3> <p dir='ltr'> <span>Tālāk norādīto kodu var tieši ielīmēt skripta failā (jābūt instalētam mezglam), lai izpildītu un izgūtu JSON datus. </span> </p>Javascript <code> <pre>const sample = require('./sample.json'); console.log(sample); </pre> </code> <p dir='ltr'> <b> <strong>Izvade: </strong> </b> </p> <tag data-text-3='{ users: [ { site: 'GeeksForGeeks', user: 'Shobhit' } ] } </pre> <h2 id='by-importing-the-module-to-read-json-file'> <b> <strong>3. Importējot moduli JSON faila lasīšanai </strong> </b> </h2> <p dir='ltr'> <span>The </span> <span>importa paziņojums </span> <span>var izmantot, lai importētu un saglabātu JSON faila elementus JavaScript mainīgajā. </span> </p> <h3> <span>Sintakse: </span> </h3> <pre>import nameOfVariable from 'JSONFilePath' assert {type: 'json'}; </pre> <ul> <li value='1'> <span>Izveidojiet JSON failu, kā aprakstīts iepriekšējos piemēros. </span> </li> <li value='2'> <span>Izveidojiet failu script.js un importējiet JSON failu </span> </li> </ul> <h3> <b> <strong>Piemērs JSON faila lasīšanai JavaScript: </strong> </b> </h3> <p dir='ltr'> <span>Tālāk norādītais kods Nolasa JSON failu, importējot to, izmantojot importēšanas paziņojumu. </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>Izlasiet JSON faila nosaukumu> head> <body> <h1>techcodeview.comh1> <h3>Dodieties uz konsoli, lai redzētu ienestos datus!! h3> <script type='module' src='./script.js'>skripts> body> html>>> </tag>Javascript <tag data-text-1='// script.js import user from './sample.json' assert { type: 'json' }; console.log(user) </pre> </code> <p dir='ltr'> <b> <strong>Izvade: </strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/javascript-questions/49/read-json-file-using-javascript.webp' alt='JSON datu konsoles skats, izmantojot importēšanas moduli'> </p> <h2 id='conclusion'> <span>Secinājums </span> </h2> <p dir='ltr'> <span>JSON failu lasīšana JavaScript ir ļoti svarīgs tīmekļa izstrādātāja uzdevums, jo JSON faili tiek izmantoti lietotāja datu, konfigurācijas datu, statisko datu un citas svarīgas informācijas glabāšanai. </span> </p> <p dir='ltr'> <span>Šajā rokasgrāmatā ar piemēriem ir izskaidrotas trīs metodes JSON failu lasīšanai JavaScript. Izprotot šīs metodes, izstrādātāji var droši risināt ar JSON failiem saistītus uzdevumus, nodrošinot vienmērīgākus izstrādes procesus un uzlabotu lietotāju pieredzi. </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>
Kopīgot </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Lasiet JSON failu, izmantojot JavaScript&url=https://www.techcodeview.com/lv/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/lv/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/lv/read-json-file-using-javascript&title=Lasiet JSON failu, izmantojot 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">
Jums Varētu Patikt </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/lv/what-is-proxy-server" 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/cloud-computing/76/what-is-proxy-server.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kas ir starpniekserveris?" 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="/lv/what-is-proxy-server">Kas ir starpniekserveris? </a>
</h4>
</div> <div class="group">
<a href="/lv/download-install-python-3-latest-version" 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/python/38/download-install-python-3-latest-version.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Lejupielādējiet un instalējiet Python 3 jaunāko versiju" 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="/lv/download-install-python-3-latest-version">Lejupielādējiet un instalējiet Python 3 jaunāko versiju </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>
Top Raksti </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="/lv/what-is-dbq-document-based-question-explained-131146">
<img src="https://techcodeview.com/img/blog/14/what-is-dbq-document-based-question-explained.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kas ir DBQ? Paskaidrots uz dokumentiem balstīts jautājums" 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="/lv/what-is-dbq-document-based-question-explained-131146" class="hover:text-tech-500 transition-colors line-clamp-3">Kas ir DBQ? Paskaidrots uz dokumentiem balstīts jautājums </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="/lv/taurus-compatibility-131144">
<img src="https://techcodeview.com/img/blog/67/taurus-compatibility.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Saderība Vērsis: atrodiet savu labāko saderību" 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="/lv/taurus-compatibility-131144" class="hover:text-tech-500 transition-colors line-clamp-3">Saderība Vērsis: atrodiet savu labāko saderību </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="/lv/c-loops">
<img src="https://techcodeview.com/img/it-problems-solutions/80/c-loops.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="C – cilpas" 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="/lv/c-loops" class="hover:text-tech-500 transition-colors line-clamp-3">C – cilpas </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="/lv/why-you-shouldnt-trust-us-news-college-rankings-131950">
<img src="https://techcodeview.com/img/blog/88/why-you-shouldnt-trust-us-news-college-rankings.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kāpēc jums nevajadzētu uzticēties ASV ziņu koledžas reitingam" 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="/lv/why-you-shouldnt-trust-us-news-college-rankings-131950" class="hover:text-tech-500 transition-colors line-clamp-3">Kāpēc jums nevajadzētu uzticēties ASV ziņu koledžas reitingam </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="/lv/coefficient-static-friction-formula">
<img src="https://techcodeview.com/img/physics-calculators/15/coefficient-static-friction-formula.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Statiskās berzes koeficienta formula" 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="/lv/coefficient-static-friction-formula" class="hover:text-tech-500 transition-colors line-clamp-3">Statiskās berzes koeficienta formula </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="/lv/pandas-dataframe-mean-method">
<img src="https://techcodeview.com/img/python-pandas-dataframe/30/pandas-dataframe-mean-method.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Pandas DataFrame mean() metode" 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="/lv/pandas-dataframe-mean-method" class="hover:text-tech-500 transition-colors line-clamp-3">Pandas DataFrame mean() metode </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="/lv/typescript-switch-statement">
<img src="https://techcodeview.com/img/typescript-tutorial/79/typescript-switch-statement.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="TypeScript slēdža paziņojums" 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="/lv/typescript-switch-statement" class="hover:text-tech-500 transition-colors line-clamp-3">TypeScript slēdža paziņojums </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="/lv/substring-java">
<img src="https://techcodeview.com/img/java-functions/11/substring-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Apakšvirkne Java valodā" 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="/lv/substring-java" class="hover:text-tech-500 transition-colors line-clamp-3">Apakšvirkne Java valodā </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="/lv/calculate-sum-of-all-numbers-present-in-a-string">
<img src="https://techcodeview.com/img/strings/89/calculate-sum-of-all-numbers-present-in-a-string.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Aprēķiniet visu virknē esošo skaitļu summu" 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="/lv/calculate-sum-of-all-numbers-present-in-a-string" class="hover:text-tech-500 transition-colors line-clamp-3">Aprēķiniet visu virknē esošo skaitļu summu </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="/lv/looping-statements-shell-script">
<img src="https://techcodeview.com/img/shell/30/looping-statements-shell-script.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Atkārtoti paziņojumi | Shell skripts" 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="/lv/looping-statements-shell-script" class="hover:text-tech-500 transition-colors line-clamp-3">Atkārtoti paziņojumi | Shell skripts </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">Kategorija </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/lv/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">
Emuārs
</a> <a href="/lv/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">
Java Konvertēšana
</a> <a href="/lv/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ātika
</a> <a href="/lv/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">
Java Kolekcijas
</a> <a href="/lv/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">
Atšķirības
</a> <a href="/lv/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">
Java Virkne
</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">Interesanti Raksti </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/blog/72/maya-angelous-still-i-rise.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Maya Angelou joprojām es ceļos: dzejoļu analīze" 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="/lv/blog/">Emuārs </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/lv/maya-angelous-still-i-rise-131512">Maya Angelou joprojām es ceļos: dzejoļu analīze </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/mathematical/52/carol-number.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kerola numurs" 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="/lv/mathematical/">Matemātiskā </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/lv/carol-number">Kerola numurs </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/maths-class-12/06/inverse-3-3-matrix.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="3 × 3 matricas inverss" 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="/lv/maths-class-12-cat/">Matemātika-12. Klase </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/lv/inverse-3-3-matrix">3 × 3 matricas inverss </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/69/20-questions-game-147-great-questions-try.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="20 jautājumu spēle: 147 lieliski jautājumi, ko izmēģināt" 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="/lv/blog/">Emuārs </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/lv/20-questions-game-147-great-questions-try-131308">20 jautājumu spēle: 147 lieliski jautājumi, ko izmēģināt </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/92/loops-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cilpas Java valodā" 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="/lv/it-problems-solutions/">It Problēmas Un Risinājumi </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/lv/loops-java">Cilpas Java valodā </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/category/23/what-is-full-form-supw.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kas ir SUPW pilna forma" 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="/lv/category/">Kategorija </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/lv/what-is-full-form-supw">Kas ir SUPW pilna forma </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 Visas Tiesības Aizsargātas |
<a href="//www.techcodeview.com/ca/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atruna </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Par Mums </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privātuma Politika </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>