لعرض محتوى JSON في صفحة HTML بدون استخدام jQuery، يمكنك استخدام العناصر الأساسية في JavaScript للوصول إلى العنصر الذي تريد عرضه وتحديث المحتوى في الصفحة. يمكنك القيام بذلك عن طريق تحديد العنصر الذي تريد عرض المحتوى فيه باستخدام document.getElementById
أو document.querySelector
ثم تحديث محتواه باستخدام innerHTML
.
في هذه الحالة، يمكنك عرض محتوى JSON الذي لديك كما يلي:
-
حل مشكلة JSON في الاتصال بين PHP وJavascript28/02/2024
-
تفادي أخطاء العمليات الرياضية في JavaScript22/02/2024
-
تأثيرات الرسوم المتحركة لعرض البيانات07/03/2024
htmlhtml>
<html>
<head>
<title>عرض JSON في صفحة HTMLtitle>
head>
<body>
<div id="musicInfo">div>
<script>
var data = {
"music": [
{
"id": 1,
"artist": "Oasis",
"album": "Definitely Maybe",
"year": "1997"
}
]
};
var musicDiv = document.getElementById('musicInfo');
musicDiv.innerHTML = JSON.stringify(data, null, 2);
script>
body>
html>
هذا الكود يقوم بعرض JSON الذي لديك في العنصر
بالمعرف musicInfo
، حيث يتم تحويل الكائن إلى سلسلة نصية باستخدام JSON.stringify
وإظهارها في الصفحة.المزيد من المعلومات
بالطبع! بمجرد عرض JSON في الصفحة، يمكنك تحسين طريقة العرض بتنسيق المحتوى ليكون أكثر قراءةً وجاذبية. يمكنك استخدام العناصر HTML مثل
لعرض البيانات بشكل منظم، ويمكنك أيضًا تكوين تخصيصات CSS لتحسين المظهر العام للعرض.
هناك بعض الأفكار التي يمكنك تنفيذها:
-
استخدام القوائم: قم بعرض العناصر داخل قوائم
لتكون أكثر تنظيمًا.
-
تنسيق النصوص: استخدم CSS لتحسين تنسيق النصوص وجعلها أكثر قراءةً.
-
التبديل بين العناصر: قم بتنسيق CSS لتبديل الألوان أو الخلفيات عندما يتم تحويل الفأرة فوق العنصر.
-
استخدام الصور: إذا كان لديك روابط للصور في JSON، فيمكنك استخدامها لعرض الصور بجانب البيانات.
-
استخدام القوالب: يمكنك استخدام قوالب JavaScript مثل Mustache أو Handlebars لعرض JSON بشكل ديناميكي وتحكم في تنسيق العرض.
-
الاستجابة للحجم: استخدم وحدات CSS مثل Flexbox أو Grid لتجعل عرض البيانات أكثر استجابة لأحجام الشاشات المختلفة.
-
التخصيص بناءً على البيانات: استخدم JavaScript لتنسيق البيانات بناءً على القيم، على سبيل المثال، تغيير لون النص بناءً على قيمة معينة.
و
إليك مثال مبسط يوضح كيفية تنسيق وعرض JSON باستخدام قائمة
:
htmlhtml> <html> <head> <title>عرض JSON في صفحة HTMLtitle> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px; } #musicInfo { background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } ul { list-style-type: none; padding: 0; } li { margin-bottom: 10px; } .label { font-weight: bold; } style> head> <body> <div id="musicInfo">div> <script> var data = { "music": [ { "id": 1, "artist": "Oasis", "album": "Definitely Maybe", "year": "1997" } ] }; var musicDiv = document.getElementById('musicInfo'); var ul = document.createElement('ul'); for (var i = 0; i < data.music.length; i++) { var music = data.music[i]; var li = document.createElement('li'); li.innerHTML = 'Artist: ' + music.artist + '
' + 'Album: ' + music.album + '
' + 'Year: ' + music.year; ul.appendChild(li); } musicDiv.appendChild(ul); script> body> html>هذا المثال يقوم بعرض البيانات في قائمة
مع تنسيق نصي بسيط باستخدام CSS. تعتمد التنسيقات والأفكار على تصميم الصفحة ومتطلبات المشروع الخاص بك، لذا يمكنك تعديلها حسب الحاجة.
-
و