نکته سریع: چگونه می توان از طریق یک پاسخ JSON در JavaScript حلقه کرد

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

این فرآیند معمولاً از دو مرحله تشکیل شده است: رمزگشایی داده ها به یک ساختار بومی (مانند یک آرایه یا یک شی) ، سپس استفاده از یکی از روشهای داخلی جاوا اسکریپت برای جستجوی ساختار آن داده. در این مقاله ، با استفاده از مثالهای قابل اجرا ، هر دو مرحله را پوشش خواهم داد.

JSON چیست؟

قبل از اینکه نحوه برخورد با JSON را بررسی کنیم ، بگذارید یک ثانیه وقت بگذاریم تا بفهمیم چیست (و چه چیزی نیست).

JSON مخفف کلمه مخفف است جآواSرمزگذاری ایسوژه Nعادت این یک قالب مستقل از زبان و مبتنی بر متن است که معمولاً برای انتقال داده در برنامه های وب استفاده می شود. JSON از نماد JavaScript Object Literal الهام گرفته است ، اما تفاوت هایی بین این دو وجود دارد. به عنوان مثال ، در کلیدهای JSON باید با استفاده از نقل قول های مضاعف نقل قول شود ، در حالی که در حروف الفبا این موضوع وجود ندارد.

به دو روش می توان داده ها را در JSON ذخیره کرد:

• مجموعه ای از جفت نام / مقدار (معروف به یک شی JSON)
• یک لیست مرتب شده از مقادیر (معروف به یک آرایه JSON)

هنگام دریافت داده از سرور وب ، داده همیشه یک رشته است ، به این معنی که وظیفه شماست که آن را به یک ساختار داده تبدیل کنید که می توانید با آن کار کنید.

اگر می خواهید در مورد نحوه کار JSON اطلاعات بیشتری کسب کنید ، لطفاً به آدرس مراجعه کنید وب سایت JSON.

واکشی JSON از API از راه دور

در مثال های زیر ، ما از فوق العاده استفاده خواهیم کرد icanhazdadjoke API. همانطور که می توانید در اسناد آن بخوانید ، در صورت درخواست GET ، درخواست کنید Accept عنوان روی تنظیم شده است application/json مشاهده خواهد کرد که API محموله JSON را بازمی گرداند.

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

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    console.log(typeof xhr.responseText);
    console.log(xhr.responseText);
  }
};
xhr.open('GET', 'https://icanhazdadjoke.com/', true);
xhr.setRequestHeader('Accept', 'application/json');
xhr.send(null);

همانطور که می بینیم ، سرور رشته ای را به ما برگردانده است. قبل از اینکه بتوانیم خصوصیات آن را مرور کنیم ، باید این مورد را در یک شی JavaScript تجزیه کنیم. ما می توانیم این کار را با JSON.parse ():

if (xhr.readyState === XMLHttpRequest.DONE) {
  const res = JSON.parse(xhr.responseText);
  console.log(res);
};

هنگامی که پاسخ خود را به عنوان یک شی JavaScript دریافت کردیم ، تعدادی روش وجود دارد که می توانیم از آن استفاده کنیم.

استفاده از for...in حلقه

آ برای… در حلقه بر روی تمام خصوصیات قابل شمارش یک شی تکرار می شود:

const res = JSON.parse(xhr.responseText);

for (const key in res){
  if(obj.hasOwnProperty(key)){
    console.log(`${key} : ${res[key]}`)
  }
}

لطفا توجه داشته باشید که for...of حلقه ها در کل زنجیره نمونه های اولیه تکرار می شوند ، بنابراین در اینجا ما از آن استفاده می کنیم hasOwnProperty اطمینان حاصل کنیم که ملک به ما تعلق دارد res هدف – شی.

استفاده کنید Object.entries، Object.values یا Object.entries

یک روش جایگزین برای موارد فوق استفاده از یکی از این موارد است Object.keys ()، Object.values ​​() یا Object.entries (). اینها آرایه ای را برمی گردانند که می توانیم مجدداً تکرار کنیم.

بیایید نگاهی به استفاده از Object.entries. این آرایه ای از جفت کلید / مقدار شیئی را که از آن عبور می کنیم برمی گرداند:

const res = JSON.parse(xhr.responseText);

Object.entries(res).forEach((entry) => {
  const [key, value] = entry;
  console.log(`${key}: ${value}`);
});

توجه داشته باشید که const [key, value] = entry; نحو نمونه ای از تخریب آرایه است که در ES2015 به این زبان معرفی شد.

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

با استفاده از Fetch API

در حالی که روش فوق با استفاده از XMLHttpRequest جسم درست کار می کند ، می تواند خیلی زود بد کند. ما می توانیم بهتر عمل کنیم.

Fetch API یک API مبتنی بر Promise است ، که یک نحو تمیزتر و خلاصه تر را امکان پذیر می کند و به شما کمک می کند تا از جهنم پاسخگویی دور باشید. این یک فراهم می کند fetch() روش تعریف شده در window شی object ، که می توانید برای انجام درخواست از آن استفاده کنید. این روش وعده ای را برمی گرداند که می توانید برای بازیابی پاسخ درخواست از آن استفاده کنید.

بیایید مثال قبلی خود را دوباره بنویسیم تا از آن استفاده کنیم:

(async () => {
  const res = await fetch('https://icanhazdadjoke.com/', {
    headers: { Accept: 'application/json' },
  });
  const json = await res.json();
  Object.entries(json).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
  });
})();

Fetch API a را برمی گرداند جریان پاسخ. این JSON نیست ، بنابراین به جای اینکه بخواهید تماس بگیرید JSON.parse() بر روی آن ، ما باید از آن استفاده کنیم answer.json () عملکرد. این یک وعده را برمی گرداند که با نتیجه تجزیه متن متن پاسخ به عنوان JSON برطرف می شود.

برخورد با یک آرایه

همانطور که در بالای مقاله ذکر شد ، یک لیست مرتب شده از مقادیر (با نام مستعار یک آرایه) ، JSON معتبر است ، بنابراین قبل از پایان کار ، بیایید نحوه برخورد با چنین پاسخی را بررسی کنیم.

برای مثال آخر ، ما استفاده خواهیم کرد RI API GitHub برای دریافت لیستی از مخازن کاربر:

(async () => {
  async function getRepos(username) {
    const url = `https://api.github.com/users/${username}/repos`;

    const response = await fetch(url);
    const repositories = await response.json();

    return repositories;
  }

  const repos = await getRepos('jameshibbard');
  console.log(repos);
})();

همانطور که مشاهده می کنید ، API آرایه ای از اشیا returned را برگردانده است. برای دسترسی به هر یک از اشیا individual جداگانه ، می توانیم از یک منظم استفاده کنیم forEach روش:

repos.forEach((repo) => {
  console.log(`{$repo.name} has ${repo.stargazers_count} stars`);
});

متناوباً ، مطمئناً می توانید با استفاده از هر یک از روش های گفته شده در بالا ، تمام خصوصیات جسم را مرور کنید و آنها را به کنسول وارد کنید:

repos.forEach((repo) => {
  Object.entries(repo).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
  });
});

نتیجه

در این نکته سریع ، ما بررسی کردیم که JSON چیست. من نشان داده ام که چگونه می توان پاسخ JSON را از یک سرور به یک ساختار داده بومی (مانند یک آرایه یا یک شی object) تجزیه کرد ، و چگونه می توان از طریق چنین ساختار حلقه ای پیدا کرد تا به داده های موجود در آن دسترسی پیدا کند.

اگر با هر موضوعی که در این مقاله ارائه شده مشکلی دارید ، چرا در سایت های SitePoint’s Forums ، جایی که افراد دوستانه زیادی برای کمک به شما وجود دارند ، متوقف نشوید.