ظاهر کلی برنامه بدین صورت است:

پروژه اولیه

پروژه اولیه را از این لینک دانلود کنید.

json-viewer
├── assets
│   ├── css
│   │   └── style.css
│   └── font
│       └── Vazir.ttf
├── cypress
│   ├── fixtures
│   │   └── example.json
│   ├── integration
│   │   └── sample.spec.js
│   ├── plugins
│   │   └── index.js
│   └── support
│       ├── commands.js
│       └── index.js
├── json-examples
│   ├── example-1.json
│   └── example-2.json
├── cypress.json
├── index.html
├── main.js
└── package.json

جزئیات

نیما که به تازگی با جیسون (JSON) آشنا شده، از نمایش معمولی آنها خوشش نمیاد و تصمیم گرفته که با جاوااسکریپت برنامه‌ای بنویسید تا جیسون‌های زشت را خوشگل کند. از آنجا که نیما خیلی کار کردن با جیسون‌ها را بلد نیست، به او در نوشتن این برنامه کمک کنید.

در این پروژه کاربر جیسون را در textarea سمت چپ صفحه وارد میکند و سپس روی دکمه «خوشگل سازی جیسون» کلیک می‌کند و جیسون خوشگل شده در باکس سمت راست صفحه نمایش داده می‌شود.

همانطور که احتمالاً می‌دانید هر جیسون از زوج‌های name/value تشکیل شده است. در صورتی که جیسون ورودی کاربر معتبر نبود باید کلاس has-error را به تگ با آیدی textarea بدهید. همچنین در صورت معتبر بودن جیسون ورودی باید این کلاس را حذف کنید. در ادامه باید ساختار HTML جیسون را بسازید و در نهایت آن را داخل تگ div با آیدی result رندر کنید.

نیما قواعد ساخت جیسون زیبا را اینگونه بیان می‌کند:

1- مقادیر جیسونی که باید خوشگل شود فقط می‌تواند از نوع string، number ، boolean و object باشد.

2- محتویات هر آبجکت باید داخل یک تگ ul باشد.

3- هر زوج name/value که داخل یک آبجکت است باید داخل تگ li باشد.

• اگر value از نوع آبجکت باشد، باید ۳ تگ زیر داخل li قرار بگیرد:
  • تگ span با کلاس json-viewer-object-start که شامل name و { باشد.
  • تگ ul که شامل زوج‌های name/value داخل آبجکت است.
  • تگ span با کلاس json-viewer-object-end که شامل } است.
• در صورتی که value از نوع آبجکت نباشد:
  • ‏ name باید داخل تگ span با کلاس key قرار بگیرد.
  • ‏ value نیز داخل یک تگ span دیگر قرار می‌گیرد نیما که می‌خواهد جیسون‌هایش به میزان بیشتری خوشگل شود، تصمیم گرفته که valueهایی که از نوع مختلفی هستند را با یک رنگ خاص نشان دهد. برای اعمال رنگ‌های مختلف باید به تگ span که value در آن قرار دارد، کلاس value-{type} را بدهید. برای مثال اگر value از جنس string باشد، کلاس value-string را باید بدهید.

از آنجایی که نیما طبق تجربه‌هایی که در گذشته کسب کرده، می‌داند که «فقط زیبایی و خوشگل بودن ملاک نیست» و به همین دلیل می‌خواهد نمایش‌دهنده‌ای که ساخته است را کاربردی‌تر کند. او از شما خواسته است تا امکان باز و بسته شدن آبجکت‌ها را بر اساس موارد زیر پیاده‌سازی کنید:

• تنها valueهایی که از نوع آبجکت هستند باید قابلیت باز و بسته شدن داشته باشند.
• با هر بار کلیک شدن روی تگ با کلاس json-viewer-object-start، کلاس json-viewer-object-close تاگل (toggle) شود (یعنی اگر این کلاس را دارد، حذف شود و اگر ندارد، اضافه شود).

مواردی که باید در این سوال رعایت کنید:

• ترتیب nameهای جیسون باید دقیقا بر اساس همان ترتیبی که در ورودی آمده‌اند باشد.
• تمامی nameها باید بین "" قرار بگیرند و پس از آنها کاراکتر : و یک فاصله باشد. برای مثال اگر name برابر age باشد باید به صورت "age": ‌ نمایش داده شود. اگر value مورد نظر از نوع آبجکت باشد، علاوه بر موارد بالا یک { نمایش داده می‌شود (برای مثال "age": {).

نکات

• دقت کنید که برنامه شما باید برای هر ورودی جیسون معتبر، کار کند. در واقع جیسون ورودی می‌تواند شامل آبجکت‌های تودرتو و پیچیده باشد.
• در پوشه json-examples دو نمونه مختلف از JSON گذاشته شده است. می‌توانید از آنها برای تست برنامه خود استفاده کنید.
• شما تنها مجاز به اعمال تغییرات در فایل main.js هستید.
• برای ارسال پاسخ میتوانید فقط فایل main.js را بدون zip کردن ارسال کنید یا کل پروژه را zip کرده و ارسال کنید.