Display Objects
في هذا الدرس سوف نتعرف علي كيفية طباعة القيم المخزنة بداخل ال objects بعدة طرق مختلفة
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات 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);
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
