יישומי Front End מאפשרים למשתמשים להכניס מידע. הרבה פעמים אנחנו שומרים את המידע בשרת אבל לפעמים אין לנו שרת או שהמידע לא מתאים לשמירה בבסיס הנתונים ואז היינו רוצים לתת את המידע למשתמש בתור קובץ. בדוגמה זו אראה איך לממש טופס עם שני כפתורים - כפתור אחד "מוריד" את המידע שבטופס לקובץ JSON על מחשב המשתמש וכפתור שני "מעלה" קובץ JSON מהמחשב כדי למלא ממנו את הטופס.

1. קוד ה HTML

קוד ה HTML של הדוגמה כולל טופס עם 3 שדות. לכל שדה מוגדר name שיהיה המפתח ב JSON, והערך יהיה הערך שהמשתמש הכניס לשדה. זה הקוד:

<div>
  <button id="exportButton">Export to JSON</button>
  <button id="importButton">Import From JSON</button>
</div>
<hr />
<form>  
  <div>
  <label>Name: </label>
  <input type="text" name="name" />
  </div>

  <div>
    <label>Phone Number: </label>
    <input type="tel" name="tel" />
  </div>
  <div>
    <label>Email:</label>
    <input type="email" name="email" />
  </div>
</form>

2. שמירת המידע לקובץ

בשביל לקחת את תוכן השדות לקובץ אצלי על המחשב אני צריך שני דברים: קודם כל אני צריך להעביר את כל המידע מהטופס לאוביקט JSON, ואחר כך צריך "להוריד" את אוביקט ה JSON בתור קובץ.

בשביל החלק הראשון קל להשתמש ב FormData:

const form = document.querySelector('form');
const fd = new FormData(form);
const data = JSON.stringify(Object.fromEntries(fd));

אחרי זה אני יוצר אלמנט "קישור" שיוריד את הקובץ, לוחץ עליו ומוחק אותו מהמסך:

const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(data);
const downloadAnchorNode = document.createElement('a');
downloadAnchorNode.setAttribute("href",     dataStr);
downloadAnchorNode.setAttribute("download", "form.json");
downloadAnchorNode.click();

קוד הפונקציה המלא הוא לכן:

function download() {
  const form = document.querySelector('form');
  const fd = new FormData(form);
  const data = JSON.stringify(Object.fromEntries(fd));

  const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(data);
  const downloadAnchorNode = document.createElement('a');
  downloadAnchorNode.setAttribute("href",     dataStr);
  downloadAnchorNode.setAttribute("download", "form.json");
  document.body.appendChild(downloadAnchorNode); // required for firefox
  downloadAnchorNode.click();
  downloadAnchorNode.remove();  
}

3. העלאת הקובץ ועדכון הטופס

החלק השני הוא לתת למשתמש אפשרות להעלות קובץ ולעדכן את הטופס בהתאם לפרטים שבקובץ. פה אנחנו נעשה תהליך הפוך - קודם ניצור אלמנט input שמיועד להעלאת קבצים, נלחץ עליו כדי לפתוח את הדיאלוג של הדפדפן לבחירת קובץ, נקרא את תוכן הקובץ, נהפוך את התוכן ל JSON ואז נשתמש בקוד JavaScript כדי לעדכן את השדות שבטופס מתוך הערכים שקראנו מה JSON.

סך הכל הפונקציה היא:

function upload() {
  const form = document.querySelector('form');
  const input = document.createElement('input');
  input.type = 'file';

  input.onchange = e => { 
    const file = e.target.files[0]; 

    const reader = new FileReader();
    reader.readAsText(file,'UTF-8');

    reader.onload = readerEvent => {
      const content = JSON.parse(readerEvent.target.result); // this is the content!
      console.log(typeof content);
      for (const key of Object.keys(content)) {
        console.log(key);
        form.querySelector(`input[name="${key}"]`).value = content[key];
      }
    }
  }

  input.click();
}

בקישור הבא תוכלו למצוא את כל הקוד בקודפן עובד: https://codepen.io/ynonp/pen/XWZbpoK

או אם אתם קוראים את זה מהדפדפן אז הנה הוא בהטמעה: