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

Adam Ebrahim · 20 مارس 2021

لدي 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 إلخ؟

عبد الله محمد5 · 20 مارس 2021

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

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

Waleed Alfakiat · 20 مارس 2021

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

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

Salah Eddin Beriani2 · 21 مارس 2021

جرب تعديل ال 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();

  });
}