كيفية الوصول الى البيانات القادمة من الخادم وطباعتها في console؟

تستطيع الوصول الى إسم المستخدم من خلال user.username ولعمل ذلك سنقوم بتعديل الكود الخاص بك وتحديداً showusername ليعمل بشكل صحيح كما يلي

// عدل هذه الدالة لتصبح بهذا الشكل
function showusername(){

    console.log(user.username);
}
	 
	

أخي جربت هذه الطريقة تعرض اسم مستخدم محدد وليس اسم المستخدم الذي أضغط عليه 

يمكنك فتح الملف في المتصفح والتأكد من ذلك

ولكن ربما تكون المشكلة أنني استخدم API من jsonplaceholder وليس API حقيقي

لأن هذه الـ API التي استخدمها هي مجرد محاكي وليست حقيقية ولا يمكنني حتى التعديل عليها

حتى عندما أستخدم دالة POST عليها ترجع لي أن العملية تمت وتم إضافة مستخدم جديد ولكن في الحقيقة لم يتم إضافة شيء فهي للمحاكاة فقط

المشكلة لديك في الكود هي أنك تقوم بإستدعاء الدالة showusername في حدث onClick ولكنك لا تقوم بتمرير أي شيء لها، حاول تعديل الكود الخاص بك ليبدو بالشكل التالي:
 

for (user of users) {
  let content = `
  <div id="user" onClick="userClicked(${user.id}, this); showusername('${user.name}')">
    <!--                                              ^^^             ^^^^^^^^^^^^^^^^^  -->
    <h3>${user.name}</h3>
    <h3>${user.email}</h3>
  </div>
  `
  document.getElementById("users").innerHTML += content
}

لاحظ وضع علامة الفاصلة المنقوطة semicolon ; بين إستدعاء الدالتين showusername و userClicked وكذلك وضع user.name داخل علامات إقتباس ' '

الآن تحتاج إلى تعديل الدالة showusername لتقوم بطباعة الاسم الممرر لها:

function showusername(name) {
  console.log(name);
}

بهذا الشكل عند الضغط على أي مستخدم، سيتم طباعة اسمه في الـ console

أما إن أردت تمرير كائن user بالكامل إلى الدالة showusername وليس مجرد الاسم، فستحتاج إلى تحويل user إلى نص من خلال التابع JSON.stringify، مثال:

for (user of users) {
  let content = `
  <div id="user" onClick="userClicked(${user.id}, this); showusername(${JSON.stringify(user).split('"').join("&quot;")})">
    <h3>${user.name}</h3>
    <h3>${user.email}</h3>
  </div>
`
  document.getElementById("users").innerHTML += content
}

function showusername(user) {
  console.log(user);
}

بهذه الطريقة سوف يتم طباعة كلئن user بالكامل عند الضغط على أحد المستخدمين.

أخي قمت بوضع Argument في الدالة وهي تعمل نوعا ما ولكن لا تقوم بالمطلوب فقد كتبتها هكذا 

// عدلت هذه الدالة لتصبح بهذا الشكل
function showusername(mong){

    alert(mong);
}

// والسطر 153 جعلته هكذا 
<div id="user" onClick="userClicked(${user.id}, this), showusername(${user.name})">

ولكن يظهر خطأ في الكونسول وعندما أضغط على رابط الخطأ الذي في نهاية الخطأ في الكونسول تظهر بدل نافذة الكونسول نافذة الريسورس وعندما أضغط على اسماء المستخدمين في الصفحة يظهر اسم المستخدم في نافذة الريسورس وتحته خط أحمر 

جرب رجاءا وحاول معرفة المشكلة

بتاريخ الآن قال محمد الحربي24:

أخي قمت بوضع Argument في الدالة وهي تعمل نوعا ما ولكن لا تقوم بالمطلوب فقد كتبتها هكذا 

// عدلت هذه الدالة لتصبح بهذا الشكل
function showusername(mong){

    alert(mong);
}

// والسطر 153 جعلته هكذا 
<div id="user" onClick="userClicked(${user.id}, this), showusername(${user.name})">

ولكن يظهر خطأ في الكونسول وعندما أضغط على رابط الخطأ الذي في نهاية الخطأ في الكونسول تظهر بدل نافذة الكونسول نافذة الريسورس وعندما أضغط على اسماء المستخدمين في الصفحة يظهر اسم المستخدم في نافذة الريسورس وتحته خط أحمر 

جرب رجاءا وحاول معرفة المشكلة

السبب هو أنك تفصل بين إستدعاء الدالة showusername وإستدعاء الدالة userClicked بفاصلة comma , وليس بفاصلة منقوطة semicolon ;

حاول تعديل السطر التالي:

<div id="user" onClick="userClicked(${user.id}, this); showusername(${user.name})">
<!--                                                ^^^^^ -->

شكرا لك ياغالي الله يجعلها في موازين حسناتك يارب

بتاريخ 5 ساعات قال سامح أشرف:

المشكلة لديك في الكود هي أنك تقوم بإستدعاء الدالة showusername في حدث onClick ولكنك لا تقوم بتمرير أي شيء لها، حاول تعديل الكود الخاص بك ليبدو بالشكل التالي:
 

for (user of users) {
  let content = `
  <div id="user" onClick="userClicked(${user.id}, this); showusername('${user.name}')">
    <!--                                              ^^^             ^^^^^^^^^^^^^^^^^  -->
    <h3>${user.name}</h3>
    <h3>${user.email}</h3>
  </div>
  `
  document.getElementById("users").innerHTML += content
}

لاحظ وضع علامة الفاصلة المنقوطة semicolon ; بين إستدعاء الدالتين showusername و userClicked وكذلك وضع user.name داخل علامات إقتباس ' '

الآن تحتاج إلى تعديل الدالة showusername لتقوم بطباعة الاسم الممرر لها:

function showusername(name) {
  console.log(name);
}

بهذا الشكل عند الضغط على أي مستخدم، سيتم طباعة اسمه في الـ console

أما إن أردت تمرير كائن user بالكامل إلى الدالة showusername وليس مجرد الاسم، فستحتاج إلى تحويل user إلى نص من خلال التابع JSON.stringify، مثال:

for (user of users) {
  let content = `
  <div id="user" onClick="userClicked(${user.id}, this); showusername(${JSON.stringify(user).split('"').join("&quot;")})">
    <h3>${user.name}</h3>
    <h3>${user.email}</h3>
  </div>
`
  document.getElementById("users").innerHTML += content
}

function showusername(user) {
  console.log(user);
}

بهذه الطريقة سوف يتم طباعة كلئن user بالكامل عند الضغط على أحد المستخدمين.

أخي كيف أقوم بإظهار اسم المستخدم في المنشورات المعروضة يعني عندما أضغط على المستخدم تظهر لي منشوراته واسمه يكون موجود في المنشورات؟

هل أقوم بهذا في دالة getPosts ؟