تكرار القيم في Angular من بيانات JSON

في سياق تطوير تطبيقات الويب باستخدام إطار Angular، يُعد استخدام وتحليل بيانات JSON من بين المهام الشائعة. في هذا السياق، يُظهر الكود JSON الخاص بك هيكلًا يحتوي على مفتاح “children” الذي يحتوي بدوره على مصفوفة من الكائنات، حيث يحمل كل كائن معلومات مثل “id” و “value1” و “value2”.

للاستفادة من قيم “value1” و “value2” في Angular، يمكنك استخدام ngFor directive للتكرار عبر العناصر داخل مصفوفة “children”. سأوضح لك كيفية تنفيذ ذلك:

typescriptCopy code
// في ملف الكود الخاص بالكمبوننت Angular الخاص بك
import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  template: `
    

      
Values for ID {{ child.id }}: {{ calculateSum(child.value1, child.value2) }}

		




		
	
    
  `,
})
export class YourComponent {
  jsonData = {
    "title": "my title",
    "children": [
      {
        "id": 1,
        "value1": 1,
        "value2": 2
      },
      {
        "id": 2,
        "value1": 3,
        "value2": 4
      }
    ]
  };

  calculateSum(value1: number, value2: number): number {
    return value1 + value2;
  }
}

في هذا الكود، يتم استخدام ngFor لتكرار عبر كل كائن داخل مصفوفة “children”. تظهر قيم “value1” و “value2” لكل عنصر، وتستخدم دالة calculateSum لجمع القيمتين. يمكنك تخصيص الكود حسب احتياجاتك، ويمكنك أيضًا إضافة مزيد من المنطق حسب متطلبات تطبيقك.

في عملية تحليل واسترجاع القيم من كائن JSON المقدم، يُظهر إطار Angular مرونة كبيرة في تحليل البيانات وعرضها. الكود المقدم يُظهر تكرارًا عبر مصفوفة الأطفال وعرض قيم “value1” و “value2” لكل كائن.

للتفصيل أكثر، يُفضل أن نلقي نظرة على بعض المفاهيم والأدوات التي يمكن استخدامها في هذا السياق:

1. Directive ngFor:

   • ngFor هو توجيه يستخدم لتكرار عبر عناصر في مصفوفة أو قائمة.
   • يُستخدم في
     لتكرار عبر كل عنصر في مصفوفة “children”.

2. Interpolation (تداخل):

   • يتم استخدام {{ }} لتداخل قيم في القالب.
   • يُظهر في

     Values for ID {{ child.id }}: {{ calculateSum(child.value1, child.value2) }}

     .

3. الكود TypeScript:

   • يتم استيراد Component من @angular/core لتعريف مكون Angular.
   • يُظهر الاستخدام العام لمكون Angular مع تعريف القالب والمتغيرات.

4. الدالة calculateSum:

   • تم إنشاء دالة calculateSum لجمع القيم “value1” و “value2″، مما يسمح بإظهار نتيجة الجمع في القالب.

5. بيانات الـ JSON:

   • يتم تحديد بيانات الـ JSON في متغير jsonData في الكمبوننت.
   • يمكنك تخصيص هذا المتغير بمزيد من البيانات أو تعديله حسب احتياجات تطبيقك.

هذا النهج يظهر كيف يمكنك استخدام Angular بطريقة فعالة لتحليل وعرض البيانات من JSON. يمكنك بسهولة توسيع هذا النهج لديك متطلبات محددة، مثل إضافة المزيد من المنطق أو تخصيص العرض بشكل أفضل.