JSON ডেটা হ্যান্ডলিং এবং Display করা

Ionic অ্যাপে JSON ডেটা হ্যান্ডলিং এবং ডিসপ্লে করার জন্য আপনাকে প্রথমে JSON ডেটা প্রাপ্তি, পার্সিং, এবং HTML টেমপ্লেটে উপস্থাপন করতে হবে। JSON ডেটা সাধারণত API থেকে পাওয়া যায় অথবা লোকাল ফাইল থেকে লোড করা হতে পারে।

এখানে JSON ডেটা হ্যান্ডলিং এবং Display করার প্রক্রিয়া দেয়া হলো:

১. JSON ডেটা লোড করা (API থেকে)

ধরা যাক, আপনি একটি REST API থেকে JSON ডেটা লোড করতে চান। Angular এর HttpClient ব্যবহার করে এটি করা যায়।

১.১ HttpClient সেটআপ করা

প্রথমে, HttpClientModule ইম্পোর্ট করতে হবে। app.module.ts ফাইলে এটি অন্তর্ভুক্ত করুন:

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [...],
  imports: [
    ...,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

১.২ JSON ডেটা ফেচ করা

এখন, একটি Service তৈরি করে API থেকে JSON ডেটা ফেচ করতে পারেন:

ionic generate service data

এরপর data.service.ts ফাইলে HTTP রিকুয়েস্ট কোড লিখুন:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) {}

  // API থেকে JSON ডেটা ফেচ করা
  getData(): Observable<any> {
    return this.http.get('https://api.example.com/data');
  }
}

১.৩ কম্পোনেন্টে JSON ডেটা প্রাপ্তি

এখন, data.service.ts থেকে JSON ডেটা কম্পোনেন্টে ইঞ্জেক্ট করুন এবং সেটি ফেচ করুন:

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
  jsonData: any;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getData().subscribe(data => {
      this.jsonData = data;
      console.log(this.jsonData); // ডেটা দেখতে
    });
  }
}

এখানে, ngOnInit() এর মধ্যে API থেকে ডেটা ফেচ করা হচ্ছে।

২. JSON ডেটা ডিসপ্লে করা (HTML টেমপ্লেটে)

এখন, jsonData ভ্যারিয়েবলটি HTML টেমপ্লেটে ডিসপ্লে করার জন্য, আপনি এটি ব্যবহার করতে পারেন।

২.১ JSON ডেটা Display করা

home.page.html ফাইলে নিচের মতো কোড লিখুন:

<ion-header>
  <ion-toolbar>
    <ion-title>JSON Data</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <!-- JSON ডেটা লুপের মাধ্যমে ডিসপ্লে -->
    <ion-item *ngFor="let item of jsonData">
      <ion-label>
        <h2>{{ item.name }}</h2> <!-- item.name হতে হবে আপনার JSON ডেটার key -->
        <p>{{ item.description }}</p> <!-- item.description হতে হবে আপনার JSON ডেটার key -->
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

এখানে:

• *ngFor="let item of jsonData" এর মাধ্যমে JSON ডেটার প্রতিটি আইটেম লুপ করা হচ্ছে।
• {{ item.name }} এবং {{ item.description }} দিয়ে প্রতিটি আইটেমের উপাদানগুলো টেমপ্লেটে প্রদর্শিত হচ্ছে।

২.২ JSON ডেটার শেপ (Structure)

ধরা যাক, আপনার JSON ডেটা নিচের মতো:

[
  {
    "name": "Item 1",
    "description": "This is the first item"
  },
  {
    "name": "Item 2",
    "description": "This is the second item"
  }
]

এটি উপরে প্রদর্শিত HTML কোডের মাধ্যমে লিস্ট আকারে প্রদর্শিত হবে।

৩. JSON ডেটা Local Storage এ সেভ এবং রিট্রিভ করা

Ionic অ্যাপে আপনি JSON ডেটা লোকাল স্টোরেজেও সংরক্ষণ করতে পারেন। এর জন্য Ionic এর Storage প্লাগইন ব্যবহার করতে পারেন।

৩.১ Storage প্লাগইন ইনস্টল করা

প্রথমে, Ionic Storage প্লাগইন ইনস্টল করুন:

ionic install @ionic/storage-angular

৩.২ Storage সেটআপ

app.module.ts ফাইলে Storage মডিউলটি ইম্পোর্ট করুন:

import { IonicStorageModule } from '@ionic/storage-angular';

@NgModule({
  imports: [
    IonicStorageModule.forRoot()
  ],
})
export class AppModule { }

৩.৩ Storage সেবা ব্যবহার করা

এখন, JSON ডেটা Storage এ সেভ এবং রিট্রিভ করতে Storage সেবা ব্যবহার করা যাবে:

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage-angular';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private storage: Storage) {}

  // JSON ডেটা লোকাল স্টোরেজে সেভ করা
  saveData(data: any) {
    this.storage.set('jsonData', data);
  }

  // JSON ডেটা লোকাল স্টোরেজ থেকে রিট্রিভ করা
  getData(): Promise<any> {
    return this.storage.get('jsonData');
  }
}

৩.৪ Storage থেকে ডেটা রিট্রিভ করা

এখন আপনি getData() ফাংশন ব্যবহার করে স্টোরেজ থেকে JSON ডেটা রিট্রিভ করতে পারবেন:

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
  jsonData: any;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    // স্টোরেজ থেকে JSON ডেটা রিট্রিভ করা
    this.dataService.getData().then(data => {
      this.jsonData = data;
      console.log(this.jsonData);
    });
  }
}

এখানে, Storage ব্যবহার করে JSON ডেটা সেভ এবং রিট্রিভ করা হচ্ছে।

সারাংশ

• JSON ডেটা ফেচ করা: API থেকে HttpClient ব্যবহার করে JSON ডেটা ফেচ করা হয়।
• JSON ডেটা ডিসপ্লে করা: Angular এর *ngFor ডিরেকটিভ দিয়ে JSON ডেটা HTML টেমপ্লেটে প্রদর্শিত হয়।
• Local Storage: Ionic Storage প্লাগইন ব্যবহার করে JSON ডেটা লোকাল স্টোরেজে সেভ এবং রিট্রিভ করা যায়।

এগুলি ছিল Ionic অ্যাপে JSON ডেটা হ্যান্ডলিং এবং Display করার একটি মৌলিক গাইড।