درک JSON در جاوا اسکریپت: از اصول اولیه تا کاربرد عملی

چند روز پیش، عمیقاً در این مورد کاوش کردم JSON (نشان‌گذاری شی جاوا اسکریپت)و نحوه مدیریت داده ها در پروژه های جاوا اسکریپت خود را تغییر داده است. چه در JSON تازه کار باشید و چه بخواهید، این پست اصول اولیه را توضیح می دهد، تبدیل بین اشیاء جاوا اسکریپت و JSON را طی می کند و به شما نشان می دهد که چگونه از آن برای ساختن یک مینی پروژه جالب استفاده کردم!

بیایید شروع کنیم! 🚀

JSON چیست؟

JSON مخفف جیآوا*اسکریپت **Oموضوع **ناوشن این یک قالب داده سبک وزن است که خواندن، نوشتن و تجزیه آن آسان است. JSON معمولا برای ذخیره سازی استفاده می شود* و حمل و نقل داده ها، به ویژه در API ها.

در اینجا یک شی معمولی JSON به نظر می رسد:

{
  "user": {
    "id": 1,
    "name": "John Doe",
    "email": "john.doe@example.com",
    "address": {
      "street": "123 Main St",
      "city": "Anytown",
      "zipcode": "12345",
      "geo": {
        "lat": "40.7128",
        "lng": "-74.0060"
      }
    },
    "phone": "123-456-7890",
    "website": "johndoe.com",
    "company": {
      "name": "Doe Enterprises",
      "catchPhrase": "Innovation and Excellence",
      "bs": "business solutions"
    }
  }
}

JSON دقیقاً مانند یک شی جاوا اسکریپت به نظر می رسد – به همین دلیل است که هنگام کار در جاوا اسکریپت بسیار مفید است! این یک فرمت رایج است که در API ها استفاده می شود تبادل داده بین سرورها و برنامه های کاربردی وب.

برای اطلاعات بیشتر در مورد JSON، در اینجا یک منبع عالی وجود دارد: w3schools مقدمه JSON

تبدیل بین اشیاء جاوا اسکریپت و JSON

دو کار معمولی وجود دارد که با JSON انجام خواهید داد:

1. یک شی جاوا اسکریپت را به یک رشته JSON تبدیل کنید.
2. یک رشته JSON را دوباره به یک شی جاوا اسکریپت تبدیل کنید.

1. شی جاوا اسکریپت به JSON

هنگامی که می خواهید داده ارسال کنید (مانند درخواست API)، اغلب نیاز دارید رشته کردن یک شی جاوا اسکریپت در JSON:

const jsonData = JSON.stringify(data);

این شی جاوا اسکریپت شما را تبدیل می کند (data) به یک رشته JSON که می تواند از طریق وب منتقل شود.

2. JSON به آبجکت جاوا اسکریپت

وقتی داده‌های JSON را دریافت می‌کنید (مانند پاسخ API)، می‌خواهید تجزیه رشته JSON در یک شی جاوا اسکریپت تا بتوانید با آن کار کنید:

const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);

هنگامی که JSON تجزیه شد، می‌توانید مانند هر شی جاوا اسکریپت دیگر به داده‌ها دسترسی داشته باشید!

دسترسی به داده ها از یک شی JSON

هنگامی که رشته JSON را به یک شی جاوا اسکریپت تبدیل کردید، می توانید به راحتی با استفاده از آن به داده ها دسترسی داشته باشید نماد نقطه یا نماد براکت.

فرض کنید رشته JSON زیر را داریم:

const jsonString = `
{
  "user": {
    "id": 1,
    "name": "John Doe",
    "email": "john.doe@example.com",
    "address": {
      "street": "123 Main St",
      "city": "Anytown",
      "zipcode": "12345",
      "geo": {
        "lat": "40.7128",
        "lng": "-74.0060"
      }
    },
    "phone": "123-456-7890",
    "website": "johndoe.com",
    "company": {
      "name": "Doe Enterprises",
      "catchPhrase": "Innovation and Excellence",
      "bs": "business solutions"
    }
  }
}
`;

const data = JSON.parse(jsonString); // Parsing the JSON string into an object

با استفاده از علامت گذاری نقطه

با استفاده از علامت نقطه می توانید به داده ها به روشی ساده دسترسی داشته باشید:

console.log(data.user.name);        // "John Doe"
console.log(data.user.address.city); // "Anytown"
console.log(data.user.company.name); // "Doe Enterprises"

با استفاده از علامت گذاری براکت

علامت گذاری براکت به همان اندازه خوب کار می کند، به خصوص وقتی با ویژگی های دینامیکی سروکار داریم:

console.log(data['user']['email']);     // "john.doe@example.com"
console.log(data['user']['address']['zipcode']); // "12345"
console.log(data['user']['company']['catchPhrase']); // "Innovation and Excellence"

هر دو نماد به شما امکان می دهند به مقادیر عمیق تو در تو در شی JSON دسترسی داشته باشید. خیلی تمیز، درسته؟

چالش: ساختن سایت دستور پخت تاکو با JSON

برای آزمایش دانش JSON خود، یک پروژه کوچک ساختم: a سایت دستور پخت تاکو! ایده ساده بود – بر اساس نوع تاکوی که کاربر انتخاب می‌کند (ماهی یا مرغ)، دستور غذا را از یک فایل JSON دریافت می‌کند و با استفاده از الگوهای EJS در سایت نمایش می‌دهد.

در اینجا یک نمای کلی از پروژه آمده است:

مراحلی که دنبال کردم:

1. ایجاد یک فایل JSON حاوی دستور العمل های مختلف تاکو
2. یک را تنظیم کنید Express.js سرور
3. استفاده می شود EJS برای قالب بندی و ارائه پویا دستور العمل های تاکو بر اساس انتخاب کاربر.
4. فایل JSON را برای بازیابی دستور العمل مناسب تجزیه کرد.

نمونه داده های JSON:

در اینجا قطعه ای از داده های JSON استفاده شده برای دستور العمل ها آمده است:

{
  "tacos": [
    {
      "type": "fish",
      "ingredients": ["fish", "lettuce", "salsa", "tortilla"],
      "steps": ["Grill the fish", "Prepare the salsa", "Wrap it all in a tortilla"]
    },
    {
      "type": "chicken",
      "ingredients": ["chicken", "cheese", "lettuce", "tortilla"],
      "steps": ["Grill the chicken", "Add cheese and lettuce", "Wrap in a tortilla"]
    }
  ]
}

سپس از این داده های JSON در کد سرورم استفاده کردم تا دستور العمل مناسب را بر اساس انتخاب کاربر نمایش دهم.

مثال کد:

app.get('/taco', (req, res) => {
  const tacoType = req.query.type; // Get taco type (fish or chicken) from the request
  const taco = data.tacos.find(t => t.type === tacoType); // Find the matching recipe
  res.render('recipe', { taco }); // Render the recipe using EJS
});

می توانید کد کامل پروژه را در اینجا بررسی کنید: Taco Recipe Project.

منابعی که به من در یادگیری JSON کمک کرد

در اینجا چند منبع عالی وجود دارد که به من در مسیر تسلط بر JSON کمک کرد:

1. W3Schools JSON مقدمه – مقدمه ای برای مبتدیان برای JSON.
2. اسناد وب MDN – JSON – راهنمای دقیق از شبکه توسعه دهندگان موزیلا.
3. YouTube: JSON Basics – یک ویدیوی YouTube عالی که مفهوم JSON را ساده می کند.

به طور خلاصه 🥜

JSON یکی از مهم ترین فرمت ها برای کار با داده ها در توسعه وب است و یادگیری نحوه کار موثر با آن، مدیریت داده ها را برای من بسیار آسان کرده است. چه در حال ساخت API باشید، چه واکشی داده از منابع خارجی، یا کار با فایل های پیکربندی، JSON ابزاری است که اغلب از آن استفاده خواهید کرد.

نکات کلیدی:

• JSON فرمتی سبک و خوانا برای داده ها است.
• تبدیل بین اشیاء جاوا اسکریپت و رشته های JSON بسیار ساده است JSON.stringify() و JSON.parse().
• پس از تجزیه به یک شی، دسترسی به داده های JSON به آسانی کار با اشیاء جاوا اسکریپت با استفاده از علامت نقطه یا براکت است.

امیدوارم این پست به رفع هر گونه سوالی که ممکن است در مورد JSON داشته باشید کمک کند! اگر سؤالی دارید یا می‌خواهید پروژه‌های مرتبط با JSON خود را به اشتراک بگذارید، با خیال راحت تماس بگیرید.