كيفية تحويل بيانات json إلى صفيف في مشروع جافا سكريبت للواجهة الأمامية

سيعرض لك محرر Downcodes عدة طرق لتحويل بيانات JSON إلى صفائف في واجهة JavaScript الأمامية. في تطوير الواجهة الأمامية، غالبًا ما يكون من الضروري تحويل بيانات JSON التي تم الحصول عليها من الخادم إلى مصفوفة JavaScript للمعالجة. ستقدم هذه المقالة بالتفصيل ثلاث طرق شائعة الاستخدام: JSON.parse() وObject.keys() وObject.entries()، وتستخدم رمز المثال لشرح كيفية استخدام هذه الطرق لتحويل بيانات JSON بكفاءة إلى صفائف، وكيف لاستخدام طريقة المصفوفات لمعالجة البيانات اللاحقة. بالإضافة إلى ذلك، توفر المقالة أيضًا الأسئلة الشائعة ذات الصلة لمساعدتك على فهم هذه الأساليب وتطبيقها بشكل أفضل.

في مشاريع JavaScript للواجهة الأمامية، يعد تحويل بيانات JSON إلى مصفوفات عملية شائعة جدًا وقيمة. يمكن تحقيق ذلك باستخدام طريقة JSON.parse()، واستخدام طريقة Object.keys()، والاستفادة من طريقة ES6 Object.entries(). يمكن لهذه الطرق تحويل JSON بسهولة وكفاءة إلى نموذج مصفوفة لتسهيل معالجة البيانات والعمليات اللاحقة. يعد استخدام طريقة JSON.parse() الطريقة الأكثر مباشرة والأكثر استخدامًا التي يوضحها Meng Xuewu. من خلال JSON.parse()، يمكننا تحليل السلاسل بتنسيق JSON إلى كائنات أو مصفوفات JavaScript. إنها وسيلة مهمة لمعالجة البيانات التي يتم إرجاعها بواسطة الخادم وتحقيق تحويل هياكل البيانات المعقدة.

1. طريقة JSON.PARSE()

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

تتضمن الخطوات المحددة الحصول على سلسلة بتنسيق JSON من الخادم ثم تحليلها باستخدام JSON.parse(). على سبيل المثال، إذا كان لديك تمثيل سلسلة JSON لقائمة المستخدمين، فيمكنك تمرير هذه السلسلة إلى JSON.parse()، مما يؤدي إلى مصفوفة JavaScript حيث يكون كل عنصر مصفوفة عبارة عن كائن مستخدم.

const jsonString = '[{name: John Doe، age: 30}، {name: Jane Doe، age: 25}]';

const jsonArray = JSON.parse(jsonString);

console.log(jsonArray);

// الإخراج: [ { الاسم: "جون دو"، العمر: 30 }، { الاسم: "جين دو"، العمر: 25 } ]

2. طريقة OBJECT.KEYS()

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

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

const userObject = { 1: جون دو، 2: جين دو };

constkeysArray = Object.keys(userObject);

console.log(keysArray);

// الإخراج: ['1'، '2']

constvalueArray =keysArray.map(key => userObject[key]);

console.log(valuesArray);

// الإخراج: ['جون دو'، 'جين دو']

3. طريقة OBJECT.ENTRIES()

قدم ES6 طريقة Object.entries()، والتي توفر طريقة أخرى سهلة لتحويل كائنات JSON إلى صفائف. تقوم بإرجاع مصفوفة، كل عنصر في المصفوفة عبارة عن مصفوفة أخرى تحتوي على عنصرين، العنصر الأول هو مفتاح الكائن، والعنصر الثاني هو القيمة المقابلة.

يمكنك الحصول مباشرة على مصفوفة ثنائية الأبعاد باستخدام الأسلوب Object.entries()، وهو مناسب جدًا للسيناريوهات التي تتطلب معالجة متزامنة للمفاتيح والقيم.

const userObject = { 1: جون دو، 2: جين دو };

const inputsArray = Object.entries(userObject);

console.log(entriesArray);

// الإخراج: [ ['1', 'John Doe'], ['2', 'Jane Doe'] ]

4. استخدم أساليب الصفيف لمعالجة البيانات المحولة

بمجرد تحويل بيانات JSON إلى مصفوفة، يمكن معالجة البيانات بشكل أكبر باستخدام الأساليب الغنية التي توفرها مصفوفات JavaScript. على سبيل المثال، استخدم وظائف ذات ترتيب أعلى مثل Map() وfilter() وreduce() لاجتياز المصفوفات وتصفيتها وتجميعها.

يمكن لطرق تشغيل المصفوفات المختلفة تنفيذ منطق معالجة البيانات المعقد. يمكن استخدام طريقة الخريطة () لتحويل كل عنصر في المصفوفة، ويمكن لطريقة التصفية () تصفية العناصر الموجودة في المصفوفة التي تستوفي الشروط وفقًا للشروط، ويمكن لطريقة التخفيض () معالجة العناصر بشكل تراكمي في المصفوفة لتحقيق التحول من المصفوفة إلى تحويل معين للقيم الفردية.

const jsonArray = [{'id': 1, 'score': 90}, {'id': 2, 'score': 80}, {'id': 3, 'score': 85}];

// استخدم الخريطة () لزيادة النتيجة

const risesScores = jsonArray.map(user => ({ ...user, Score: user.score + 10 }));

console.log(increasedScores);

// الإخراج: [{المعرف: 1، النتيجة: 100}، {المعرف: 2، النتيجة: 90}، {المعرف: 3، النتيجة: 95}]

// استخدم عامل التصفية () لتصفية المستخدمين الذين تتجاوز درجاتهم 85

const HighScores = riseScores.filter(user => user.score > 85);

console.log(highScores);

// الإخراج: [{المعرف: 1، النتيجة: 100}، {المعرف: 3، النتيجة: 95}]

// استخدم تقليل () لحساب النتيجة الإجمالية

const TotalScore = riseScores.reduce((total, user) => Total + user.score, 0);

console.log(totalScore);

// الإخراج: 285

من خلال الطريقة المذكورة أعلاه، من JSON.parse() إلى معالجة طريقة المصفوفة، يمكنك تحقيق معالجة متعمقة من بيانات JSON إلى المصفوفات، ثم إلى المصفوفات، وبناء عملية معالجة بيانات قوية. هذه ليست مشكلة فنية لتطوير الواجهة الأمامية فحسب، ولكنها أيضًا حل يمكنه تحسين مرونة وكفاءة عمليات البيانات.

الأسئلة الشائعة ذات الصلة:

س: كيفية تحويل بيانات JSON في مشاريع JavaScript الأمامية إلى صفائف؟

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

const jsonStr = '[1, 2, 3, 4, 5]'; // سلسلة بيانات JSON const jsonArray = JSON.parse(jsonStr); // تحويل بيانات JSON إلى مصفوفة console.log(jsonArray); نتيجة الإخراج هي: [1، 2، 3، 4، 5]

س: كيفية الوصول إلى عناصر مصفوفة JSON المحولة في JavaScript؟

ج: في JavaScript، يمكن الوصول إلى عناصر مصفوفة JSON المحولة عن طريق الفهرس. يبدأ الفهرس من 0، والذي يمثل العنصر الأول في المصفوفة. على سبيل المثال، لنفترض أن لديك مصفوفة JSON محولة كما يلي:

const jsonArray = [1, 2, 3, 4, 5];

يمكنك الوصول إلى عنصر في موضع محدد في مصفوفة باستخدام بناء الجملة التالي:

console.log(jsonArray[0]); // نتيجة الإخراج هي: 1console.log(jsonArray[2]); // نتيجة الإخراج هي: 3console.log(jsonArray[4]); : 5

س: كيفية التعامل مع تحويل المصفوفة المتداخلة في JSON؟

ج: إذا كانت بيانات JSON تحتوي على صفائف متداخلة، فيمكن معالجتها بشكل متكرر. أولاً، تحتاج إلى تحليل بيانات JSON إلى كائنات JavaScript. بعد ذلك، استخدم دالة عودية للتكرار على الكائنات والعناصر الموجودة في المصفوفة، وتحويل المصفوفة المتداخلة إلى مصفوفة JavaScript عادية. هنا نموذج التعليمات البرمجية:

const jsonData = '{name: John, age: 30, Interests: [coding, read, music]}'; const jsonObject = JSON.parse(jsonData); // تحليل بيانات JSON إلى كائنات JavaScript function converterNestedArray(obj) { for (اسمح بالمفتاح في obj) { if (Array.isArray(obj[key])) { obj[key] = Array.from(obj[key]); تحويل المصفوفات المتداخلة إلى مصفوفات عادية} else if (typeof obj[key] === 'object') { converterNestedArray(obj[key]); // معالجة الكائنات المتداخلة بشكل متكرر} }}convertNestedArray(jsonObject); array console.log(jsonObject.interests); // نتيجة الإخراج هي: [الترميز والقراءة والموسيقى]

آمل أن تساعدك هذه المقالة على فهم هذه الأساليب وتطبيقها بشكل أفضل وتحسين كفاءة تطوير الواجهة الأمامية لديك! إذا كان لديك أي أسئلة، يرجى ترك رسالة في منطقة التعليق.