JavaScript Display Objects

🖥️ JavaScript Display Objects

یعنی چطور Objectها را نمایش بدهیم (در صفحه، کنسول، یا به کاربر)

در JavaScript اگر یک Object را مستقیم نمایش بدهیم، معمولاً نتیجه دلخواه نیست.

❌ روش نادرست (رایج)

const user = { name: “Ali”, age: 25 };

document.getElementById(“demo”).innerHTML = user;

🔴 خروجی:

[object Object]

✅ روش‌های درست نمایش Object

1️⃣ استفاده از `JSON.stringify()` (بهترین و رایج‌ترین)

const user = {
name: “Ali”,
age: 25,
city: “Tehran”
};

document.getElementById(“demo”).innerHTML =
JSON.stringify(user);

🔹 خروجی:

{“name”:“Ali”,“age”:25,“city”:“Tehran”}

خواناتر:

JSON.stringify(user, null, 2);

2️⃣ نمایش Property به‌صورت تکی

document.getElementById(“demo”).innerHTML =
user.name + ” – “ + user.age;

✔ مناسب برای UI

3️⃣ Loop روی Object (نمایش حرفه‌ای)

let text = “”;

for (let key in user) {
text += key + “: “ + user[key] + “<br>”;
}

document.getElementById(“demo”).innerHTML = text;

4️⃣ استفاده از `Object.values()`

document.getElementById(“demo”).innerHTML =
Object.values(user);

🔹 خروجی:

Ali,25,Tehran

5️⃣ استفاده از `Object.entries()`

let result = “”;

Object.entries(user).forEach(([key, value]) => {
result += `${key}: ${value}<br>`;
});

document.getElementById(“demo”).innerHTML = result;

6️⃣ نمایش در Console (برای Debug)

console.log(user);
console.table(user);

✔ console.table() بسیار خواناست 👌

7️⃣ Nested Object (شیء تو در تو)

const student = {
name: “Reza”,
address: {
city: “Tehran”,
zip: 12345
}
};

document.getElementById(“demo”).innerHTML =
student.address.city;

🧠 نکات مهم

✔ Object مستقیم قابل نمایش نیست
✔ برای UI ➜ Property به Property
✔ برای Debug ➜ console.log / console.table
✔ برای ارسال یا ذخیره ➜ JSON.stringify

🔥 خلاصه سریع

روش	کاربرد
`JSON.stringify()`	نمایش کامل
Loop	نمایش سفارشی
`Object.values()`	مقادیر
`console.table()`	دیباگ
Dot Notation	UI