• 0

كود json يحتوي على رموز غريبة عند إستخدام fetch في مكون react

لدي REST API في Backend يعمل بـ Laravel وأريد أن أقوم بجلب البيانات في شكل JSON من خلال Fetch call في React، وكل شيء يعمل بشكل سليم إلا أن هناك خطب ما في النتيجة. هنا كود دالة fetch 

function getFriends() {
  fetch('http://localhost:8000/friends', {
      method: 'POST',
      mode: 'no-cors',
      credentials: 'same-origin',
      headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
      })
  }).then(function (response) {
      console.log(response);
      // يبدو أن هناك خطأ هنا
      return response.json();

  });
}

لكن النتيجة تظهر بهذا الشكل:

[
  {
    "0x1": {
      "users": [],
      "owner": "0x2",
      "title": "Ahmed Ali",
      "description": "",
      "id": "id_00001"
    },
    "0x2": {
      "username": "ahmed232",
      "solutions": [],
      "exercises": [],
      "roles": [
        "0x3",
        "0x4",
        "0x5"
      ],
      "id": "user_00001"
    },
    "0x3": {
      "roleName": "ROLE_ADMIN",
      "objectClass": "role",
      "id": "role_00001"
    }
  }
]

فحصت الكود السابق بأستخدام jsonlint ويبدو أنه كود json صحيح، لكن لا أعرف لماذا تظهر رموز مثل 0x1 و 0x2 إلخ؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

الرموز التي تظهر امامك هي عبارة عن hexadecimal numbers يبدو ان لديك مشكلة في الترميز بالنسبة للبيانات يجب عليك التأكد من ان الcharset = utf-8 جرب إٍرجاع الresponse هكذا:

return response()->json($res,200,['Content-type'=>'application/json;charset=utf-8'],JSON_UNESCAPED_UNICODE);

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

قم بإضافة charset = utf-8 في الـ Header كالآتي:

function getFriends() {
	fetch('http://localhost:8000/friends', {
		...
		headers: {
			...
			'Content-Type': 'application/json; charset=utf-8',
		})
...
}

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

جرب تعديل ال response في ال سيرفر وغير اعدادت ال content type بهذه الطريقة 

return response()->json($data, $code,
        ['Content-Type' => 'application/json;charset=UTF-8', 'Charset' => 'utf-8'], JSON_UNESCAPED_UNICODE);

وقم بتغيير ال content type في ال fetch أيضا 

function getFriends() {
  fetch('http://localhost:8000/friends', {
      method: 'POST',
      mode: 'no-cors',
      credentials: 'same-origin',
      headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json; charset=utf-8',
      })
  }).then(function (response) {
      console.log(response);
      // يبدو أن هناك خطأ هنا
      return response.json();

  });
}

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن