JavaScript

Display Objects

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

التاريخ

09 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

1065

المواضيع

24
الشروحات chevron_left Display Objects chevron_left JavaScript

Display Objects

</> Display Objects

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

  • باستخدام الاسم 
  • باستخدام حلقات تكرارية 
  • بأستخدام دالة ( )values 
  • بأستخدام دالة ( )stringify
Example
const person = {
  name: "ahmed",
  age: 30,
  city: "New York"
};

document.getElementById("demo").innerHTML = person;

</> displayed as a string

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

Example
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
const person = {
  name: "ali",
  age: 30,
  city: "New York"
};

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

document.getElementById("demo").innerHTML = txt;

في المثال السابق اذا استبدلنا " [x]person " ب " person.x " فلن تعمل لأنه في هذه الحالة " X " هي عبارة عن متغير 

</> ( ) Using Object.values

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

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

const myArray = Object.values(person);

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

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 كما في المثال التالي

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

let myString = JSON.stringify(person);

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

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

let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString

</> Stringify Dates

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

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

let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

</> Stringify Functions

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

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

document.getElementById("demo").innerHTML = JSON.stringify(person);

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

<!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
const arr = ["Mohamed", "ahmed", "osama", "Hamdy"];
document.getElementById("demo").innerHTML = JSON.stringify(arr);
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.