كيفية الوصول إلى كائن JSON باستخدام AngularJS

للوصول إلى كائن واحد فقط من مصفوفة JSON، يمكنك استخدام لغة البرمجة AngularJS للقيام بذلك بسهولة. هناك عدة طرق للقيام بذلك، ولكن أحد الأساليب الشائعة هي استخدام دالة مثل Array.find() للبحث عن الكائن الذي تريد الوصول إليه. سنقوم بتوضيح كيفية القيام بذلك باستخدام AngularJS.

أولاً، يجب عليك تحويل النص الذي قدمته إلى كائن JSON في AngularJS. يمكنك القيام بذلك باستخدام دالة JSON.parse() لتحويل النص إلى كائن JavaScript. ثم، يمكنك استخدام Array.find() للبحث عن الكائن المطلوب.

في AngularJS، يمكنك القيام بذلك في كنترولر خاص بك مثل هذا:

javascriptCopy code
angular.module('myApp', [])
  .controller('myController', function($scope) {
    // النص المقدم
    var jsonData = '{ "Concepts":[ {"Concept":"1","Description":"siopao"},{"Concept":"4","Description":"gulaman"},{"Concept":"9","Description":"sisig"},{"Concept":"12","Description":"noodle"},{"Concept":"15","Description":"sisigan"},{"Concept":"16","Description":"buko shake"},{"Concept":"17","Description":"mango shake"},{"Concept":"19","Description":"burger"},{"Concept":"20","Description":"sample"},{"Concept":"21","Description":"shit"} ]}';
    
    // تحويل النص إلى كائن JSON
    var data = JSON.parse(jsonData);
    
    // البحث عن الكائن المطلوب
    var targetObject = data.Concepts.find(function(item) {
      return item.Description === 'siopao';
    });
    
    // عرض الكائن المطلوب
    console.log(targetObject);
    
    // يمكنك تعيين الكائن إلى نطاق AngularJS إذا كنت ترغب في استخدامه في قوالب HTML
    $scope.targetObject = targetObject;
  });

ثم يمكنك استخدام الكائن targetObject في قوالب HTML الخاصة بك في AngularJS. على سبيل المثال، يمكنك عرض الوصف في القالب HTML كما يلي:

htmlCopy code
<div ng-app="myApp" ng-controller="myController">
  <p>Description: {{ targetObject.Description }}p>
div>

باستخدام هذا الكود، ستتمكن من الوصول إلى الوصف “siopao” وعرضه في التطبيق الخاص بك الذي يستخدم AngularJS.

بالطبع، دعني أواصل توسيع المقال لتوضيح المفاهيم بشكل أكبر.

بعد أن قمت بتحويل النص إلى كائن JSON واستخراج الكائن المطلوب، يمكنك القيام بما تشاء بهذه البيانات. في بيئة AngularJS، يمكنك استخدام الكائن targetObject في الوحدات النمطية لتعزيز تفاعل المستخدم أو عرض المعلومات بطرق مختلفة.

على سبيل المثال، يمكنك استخدام ng-repeat لعرض قائمة بجميع الكائنات في المصفوفة JSON:

htmlCopy code
<div ng-app="myApp" ng-controller="myController">
  <ul>
    <li ng-repeat="item in data.Concepts">{{ item.Description }}li>
  ul>
div>

هذا الكود يقوم بعرض قائمة من الأصناف مع وصف كل منها. وبالطبع، يمكنك تنسيق العرض باستخدام CSS لجعله يبدو أكثر جاذبية.

إذا كنت ترغب في تمكين المستخدم من التفاعل مع البيانات، مثلاً البحث عن عناصر معينة أو فرزها، يمكنك استخدام مكتبات JavaScript مثل Lodash أو UnderscoreJS للقيام بذلك بسهولة.

هذه الخطوات توضح كيف يمكن الوصول إلى كائن واحد من مصفوفة JSON واستخدامه في تطبيق AngularJS الخاص بك. يجب أن تكون قادراً الآن على القيام بذلك بسهولة وبناء تطبيقات متكاملة ومفيدة باستخدام هذا المفهوم.