انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 94
دورة جافا سكريبت

Display Objects

في هذا الدرس سوف نتعرف علي كيفية طباعة القيم المخزنة بداخل ال objects بعدة طرق مختلفة

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
8
الأمثلة
11
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
3,220
محتوى الدرس
في هذا الدرس 8تصفّح المواضيع

Display Objects

الان سوف نتعرف علي كيفية طباعة القيم المخزنة بداخل ال objects بعدة طرق مختلفة وهي 

  • باستخدام الاسم 
  • باستخدام حلقات تكرارية 
  • بأستخدام دالة ( )values 
  • بأستخدام دالة ( )stringify

Example

HTML 
const person = {
  name: "ahmed",
  age: 30,
  city: "New York"
};

document.getElementById("demo").innerHTML = person;
جرّب بنفسك

displayed as a string

يمكننا طباعة القيم النصية بشكل طبيعي دون الحاجة الي تحويلها الي أي نوع اخر

Example

HTML 
const person = {
  name: "ahmed",
  age: 30,
  city: "New York"
};

document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;
جرّب بنفسك

Displaying the Object in a Loop

يمكننا طباعة ال Properties الخاصة ب object معين باستخدام الحلقات التكرارية كما في المثال التالي 

Example

HTML 
const person = {
  name: "ali",
  age: 30,
  city: "New York"
};

let txt = "";
for (let x in person) {
txt += person[x] + " ";
};

document.getElementById("demo").innerHTML = txt;
جرّب بنفسك

( ) Using Object.values

في لغة ال java script يمكننا تحويل اي عنصر الي array عن طريق استخدام الدالة التالية " ( )Object.values

HTML 
const person = {
  name: "Hossam",
  age: 30,
  city: "cairo"
};

const myArray = Object.values(person);

الان تم تحويل ال object الذي يسمي "myArray " الي array ويمكننا طباعته بسهولة

HTML 
const person = {
  name: "Hossam",
  age: 30,
  city: "cairo"
};

const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;
جرّب بنفسك

( )Using JSON.stringify

في لغة ال java script يمكننا تحويل اي object الي عنصر من النوع string عن طريق استخدام الدالة ( )JSON.stringify كما في المثال التالي

HTML 
const person = {
  name: "Adel",
  age: 30,
  city: "New York"
};

let myString = JSON.stringify(person);

الان تم تحويل ال object الذي يسمي "myString " الي النوع "string" وسوف نقوم بعد ذلك بطباعة البيانات الموجودة بداخله علي هيئة ملف JSON

HTML 
const person = {
  name: "Adel",
  age: 30,
  city: "New York"
};

let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString
جرّب بنفسك

Stringify Dates

الدالة "  ( )JSON.stringify " يمكنا ايضا استخدامها في تحويل التاريخ الي قيم نصية كما في المثال التالي

Example

HTML 
const person = {
  name: "ahmed",
  today: new Date()
};

let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
جرّب بنفسك

Stringify Functions

لا يمكننا استخدام الدالة ( )JSON.stringfiy مع ال fuctions

HTML 
const person = {
  name: "ahmed",
  age: function () {return 30;}
};

document.getElementById("demo").innerHTML = JSON.stringify(person);
جرّب بنفسك

نستطيع حل المشكلة السابقة عن طريق تحويل ال function الي string اولا ثم بعد ذلك نستخدم الدالة ( )JSON.stringfiy بشكل طبيعي

HTML 
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Display Objects</h2>
<p>JSON.stringify will not stringify functions.</p>
<p>You have to convert functions to strings first:</p>

<p id="demo"></p>

<script>
const person = {
  name: "ahmed",
  age: function () {return 30;}
};
person.age = person.age.toString();

let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
</script>

</body>
</html>
جرّب بنفسك

Stringify Arrays

من الممكن تحويل عناصر ال array الي قيم نصية عن طريق استخدام الدالة ( )JSON.stringfiy

Example

HTML 
const arr = ["Mohamed", "ahmed", "osama", "Hamdy"];
document.getElementById("demo").innerHTML = JSON.stringify(arr);
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…