عرض JSON في HTML

لعرض محتوى JSON في صفحة HTML بدون استخدام jQuery، يمكنك استخدام العناصر الأساسية في JavaScript للوصول إلى العنصر الذي تريد عرضه وتحديث المحتوى في الصفحة. يمكنك القيام بذلك عن طريق تحديد العنصر الذي تريد عرض المحتوى فيه باستخدام document.getElementById أو document.querySelector ثم تحديث محتواه باستخدام innerHTML.

في هذه الحالة، يمكنك عرض محتوى JSON الذي لديك كما يلي:

html
html>
<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 باستخدام قائمة

html
html>
<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>

هذا المثال يقوم بعرض البيانات في قائمة

الوسوم

المزيد من المعلومات

كيفية طباعة النصوص في أعمدة باستخدام Python 3

حل مشكلة ClassNotFoundException في Java

مقالات ذات صلة

تحسين تحقق حقول النص في جافا سكريبت وجيكويري

تنفيذ مصادقة Active Directory في ASP.NET 5 باستخدام ASP.NET Identity و Novell.Directory.Ldap.NETStandard

استخدام Jackson لتحويل كائن من عقدة محددة في شجرة JSON

تجميع ملفات الـ Views في ASP.NET MVC

أنت تستخدم إضافة Adblock