پاک کردن داده از JSON با استفاده از یک کلید در React

پاک کردن داده از JSON با استفاده از یک کلید در React

پاک کردن داده از JSON با استفاده از یک کلید در React

JSON و آبجکت های جاوا اسکریپت JavaScript objects تقریبا فرمت و syntax نوشتاری یکسانی دارند و همچنین مرورگر ها به صورت پیش فرض از این دو نوع تایپ فایل پشتیبانی میکنند. ترجیحا همیشه از اشیاء جاوا اسکریپت برای دسترسی به داده JSON استفاده میشود.

در این مقاله قرار است پاک کردن داده از JSON ، به وسیله یک کلید در React را بیاموزم.

 

Json چیست؟

 

JSON یا (JavaScript Object Notation) یک فرمت یا قالب داده مبتنی بر Key-Value بسیار محبوب و مشهور است که از آن برای طبقه بندی کردن و انتقال دادن داده استفاده میشود .

JSON از داده های اساسی و بیسیک مانند: String ، boolean ، int ، decimal ، object ، arrays و null استفاده میکند.

همچنین برای انتقال داده ها از یک سلسله مراتب از پیش تعریف شده یا predefined hierarchy و دو key-value استفاده میکند.

از آنجایی که json ساختار مختصر و بادوامی دارد ، توسط بیشتر platforms یا پلتفرم های پیشرفته و توسعه یافته است و همانند پایگاه داده های GraphQL ، REST ، No-SQL غیره ساپورت و پشتیبانی میشود.

یک String یا رشته ی JSON ، به راحتی میتواند با استفاده از JSON API به داده ها ، دسترسی مستقیم داشته باشد و از dot notation یا علامت نقطه و کلیدها برای تبدیل به یک object یا شی جاوا اسکریپت استفاده کند.

پشتیبانی داخلی Json به شما اجازه میدهد که به راحتی REST APIs ، مدیریت داده و طراحی قطعات دینامیک یا پویا را در React، ادغام کنید.

در این قسمت مراحل تجزیه و تحلیل داده های json توضیح داده میشود. همچنین عمل حذف و پاکسازی تو در تو شی JSON ، با استفاده از یک کلید ورودی نیز انجام میشود.

 

ایجاد یک Object یا شی JSON

 

یک شی Json با علامت آکولاد باز و بسته ( {} ) و key-value نیز با علامت دو نقطه ( : ) نشان داده میشود.

با استفاده از ترکیب quotes یا کوتیشن های تکی ( ‘ ‘ ) و دوتایی ( ” “ ) میتوان یک رشته json ایجاد کرد:

 

let jsonStr = ‘{“name”:”ABC”, “age”:10 }’;

 

نکته : رشته های json برای wrap یا پنهان سازی کلیدها و مقادیر، فقط باید از دابل کوتیشن یا کوتیشن دوتایی استفاده کنند و برای پنهان سازی یک JSON string ، از تک کوتیشن استفاده شود.

دستور jsonstr با استفاده از متد parse میتواند به یک شی جاوا اسکریپت تبدیل شود:

 

let jsonObj = JSON.parse(jsonStr); console.log(jsonObj.name, jsonObj.age); // ABC : 10

 

از تابع eval هم برای parsing یا تجزیه کردن استفاده میشود:

 

let jsonObj = eval(‘(‘+jsonStr+’)’);

 

استفاده از eval توصیه نمی شود چون eval میتواند بعنوان یک loophole ( یک اشکال منطقی است که روی تمام وضعیتهای ممکنه تاثیر میگذارد) برای اجرای دستورالعمل های نادرست استفاده شود. اگر چه برخلاف تابع parse، تابع eval می تواند یک رشته JSON را در دابل کوتیشن قرار بدهد.

let jsonObj = eval(‘(‘+ “{‘name’:’ABC’, ‘age’:10 }” +’)’);

 

حذف داده از رشته JSON با استفاده از Regular Expressions یا عبارات منظم

 

با استفاده از تابع replace ، میتوان از عبارات منظم برای یافتن و جایگزین کردن یک قسمت خاص از رشته استفاده کرد. همچنین میتوان با استفاده از یک جفت کوتیشن دوتایی به همراه کلید ، یک الگو ایجاد کرد:

 

let jsonStr = ‘{“name”:”ABC”, “age”:10 }’; let key = “age”; let cleanJsonRegex = new RegExp(`,.*${key}.*[, ]`, “g”); let nameJsonStr = jsonStr.replace(cleanJsonRegex, “”); console.log(nameJsonStr); // “{\”name\”:\”ABC\”}”

 

شی cleanJsonRegex یک الگو، برای مچ کردن یا تطبیق یک جفت key-value خاص تعریف میکند. میتوان آن را به این صورت بیان کرد که :

 

, برای تطبیق کاراکتر کاما

*. برای تطبیق صفر یا تعداد بیشتری از کاراکترها ، به استثنای کاراکتر های پایان دهنده خط n\

*.{key}$ برای تطبیق مقدار دقیق key و صفر یا بیشتر کاراکترهای بعد از key

[ ,] برای تطبیق کاما یا فاصله

نشانه g تمام موارد قابل تطبیق در jsonstr را تطبیق میدهد

 

تابع replace دیتا های تطبیق داده شده را از jsonstr پیدا و جایگزین میکند و یک نتیجه از نوع string برمیگرداند.

توجه داشته باشید که regular expressions یا عبارات منظم با اینکه کاملا قدرتمند هستند ، گاهی آسیب پذیر میشوند پس همیشه از استفاده آن در داده های پیچیده و دشوار خودداری کنید.

 

حذف داده ها از JSON با استفاده از اشیاء جاوا اسکریپت

 

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

برای تبدیل یک رشته JSON به شی جاوا اسکریپت ، از تابع parse استفاده میشود.

 

let jsonStr = ‘{“name”:”ABC”, “age”:10, “phone”:[“1234567890″,”1234567890”]}’; let jsonObj = JSON.parse(jsonStr);

 

برای پاک کردن یک جفت key-value از یک شی جاوا اسکریپت از اپراتور یا عامل delete استفاده میشود:

 

delete jsonObj.name; /* after delete { age: 10, phone: [“1234567890”, “1234567890”] } */

 

همچنین میتوان از کلید string یا رشته ، برای حذف یک جفت key-value استفاده کرد:

 

let key = ‘name’; delete jsonObj[key];

 

مزیت کلیدهای رشته با شی جاوا اسکریپت این است که ، اجازه میدهد از کلیدهایی که کاراکترهای خاص دارند استفاده کنید.

 

delete jsonObj[‘class.name’];

 

نکات

 

  • برای تبدیل یک شی جاوا اسکریپت به رشته JSON از stringify استفاده میشود.

let obj = {name: “ABC”}; console.log(JSON.stringify(obj));

 

  • برای نمایش تاریخ اشیا ON از دستور toJS استفاده میشود .

delete jsonObj[‘class.name’];

 

اکنون برای آشنایی بیشتر با Json پیشنهاد میشود از مطالب مرتبط دیدن فرمایید:

 

فرمت دهی JSON وخودکار سازی jq و CI/C به وسیله linting

استخراج داده از Firebase Firestore در یک برنامه React

معرفی جاوا اسکریپت

بستن