การสร้าง CSV อย่างง่ายไปยัง JSON แก้ไขเวิร์กโฟลว์ผ่าน JS

ในโปรเจ็กต์ที่ฉันกำลังทำอยู่ เราจำเป็นต้องสร้างออบเจ็กต์ JSON ที่มีโครงสร้างลำดับชั้นขององค์กรและข้อมูลที่เกี่ยวข้องกับแต่ละองค์กร ฉันจะวาดตัวอย่างเพื่ออธิบายแนวคิดให้ดีขึ้น

- org_level_one
-x address
-x email
-x children
-- org_level_two
--x email
--x address
-- org_level_two
--x email
--x address
--x children
--- org_level_three
---x email
...

หวังว่าคุณคงจะเข้าใจความคิดนี้ อาจมีองค์กรจำนวนเท่าใดก็ได้และความสัมพันธ์ระหว่างพ่อแม่และลูกในระดับเท่าใดก็ได้ แต่ละองค์กรจำเป็นต้องมีข้อมูลเกี่ยวกับสิ่งต่างๆ เช่น อีเมล ที่อยู่ URL ฯลฯ เพียงชุดเดียวเท่านั้น และแต่ละองค์กรสามารถมีผู้ปกครองได้เพียงคนเดียวเท่านั้น อย่างไรก็ตาม แต่ละองค์กรสามารถมีจำนวนรายการย่อยเท่าใดก็ได้ และสามารถเปลี่ยนชื่อและย้ายไปยังระดับอื่นของลำดับชั้นได้

เหตุใดจึงต้องใช้ไฟล์ CSV

เป็นคำถามที่ดีมากที่จะถาม โดยทั่วไปแล้ว CSV จะไม่ใช้เพื่อจัดเก็บข้อมูลที่มีอยู่ในโครงสร้างแบบต้นไม้ เดิมทีฉันได้รับไฟล์ CSV พร้อมรายชื่อองค์กรและข้อมูลที่เกี่ยวข้องกับแต่ละองค์กร ความสัมพันธ์ระหว่างพ่อแม่/ลูกคือสี่คอลัมน์แรกโดยประมาณ และคอลัมน์ที่เหลือเป็นข้อมูล หลังจากลองบางสิ่ง ฉันคิดว่าเหตุใดจึงใช้ไฟล์ CSV แทนการสร้าง UI ใน JS ซึ่งจะสร้างวัตถุ JSON ที่เหมาะสมและถูกส่งไปยังเซิร์ฟเวอร์เพื่อจัดเก็บและเรียกค้น

ในเวิร์กโฟลว์นั้น สามารถใช้ไฟล์ CSV เพื่อป้อนข้อมูลที่จำเป็นสำหรับออบเจ็กต์ JSON ในขั้นต้น จากนั้น UI จะเข้ามาแทนที่สำหรับการแก้ไขในอนาคต ด้วยสถานการณ์นี้ การย้ายองค์กรในลำดับชั้นจะเป็นเรื่องง่าย และสามารถทำได้โดยใช้อินเทอร์เฟซแบบลากและวางเพื่อย้ายองค์กรย่อยทั้งหมดไปพร้อมกับองค์กรหลัก ฉันคิดว่าแนวทางดังกล่าวน่าจะเป็น UX ที่ดีกว่ามาก

อย่างไรก็ตาม เรายังคงมีไฟล์ CSV ที่อยู่ระหว่างการแก้ไข เนื่องจากผู้บริโภคข้อมูลกำลังได้รับการพัฒนาพร้อมกับขั้นตอนการแก้ไข ดังนั้นเราจึงจำเป็นต้องพัฒนาขั้นตอนการแปลงเบื้องต้นต่อไป หากฉันต้องการพัฒนาส่วนนั้นของเวิร์กโฟลว์อยู่แล้ว ทำไมไม่ลองจำกัดเวิร์กโฟลว์ไว้เฉพาะไฟล์ CSV สำหรับผู้ใช้ ท้ายที่สุดแล้ว หากพวกเขาสบายใจกว่าในการใช้ JSON พวกเขาคงให้รูปแบบนั้นกับฉันแบบธรรมดาใช่ไหม

ความล้มเหลวประการหนึ่งของโครงการพัฒนาที่ฉันพบเห็นมานับครั้งไม่ถ้วนในอาชีพของฉันในฐานะนักพัฒนาเว็บคือ "งานวิศวกรรมมากเกินไป" ฉันไม่สามารถพูดได้มากพอ…แต่เมื่อคุณพาผู้ใช้ออกจากเขตความสะดวกสบายของพวกเขาโดยไม่มีเหตุผลอื่นใดนอกจากคุณต้องการสร้างแอปที่มีสถาปัตยกรรมสวยงามในขณะที่เรียนรู้เทคนิคใหม่ๆ คุณอาจทำให้ผู้จัดการและผู้ใช้ของคุณล้มเหลว ที่จะถูกบังคับให้ใช้สิ่งที่คุณพัฒนาหลังจากปล่อยออกมา บางครั้ง...อะแฮ่ม โดยส่วนใหญ่ วิธีแก้ปัญหาที่ง่ายที่สุดอาจได้ผล และ PoC อาจให้ข้อมูลเชิงลึกเกี่ยวกับวิธีการแก้ไขปัญหาที่แตกต่างออกไป ไม่ว่าคุณจะพัฒนาอะไรก็ตาม อาจจำเป็นต้องทำซ้ำสองสามครั้งก่อนที่จะได้รับการขัดเกลาเพียงพอสำหรับวิธีแก้ปัญหาขั้นสุดท้าย

หากคุณสร้าง JS พวกเขาจะมา

อีกเหตุผลหนึ่งที่ฉันต้องการเปลี่ยนจาก CSV เป็น JSON ที่แอปไคลเอนต์จะใช้ก็คือ เป็นเรื่องปกติที่จะต้องมีกระบวนการสร้างสำหรับแอป JS ที่คุณพัฒนาในปัจจุบัน คำสั่ง npm run dev และ npm run build หรือที่คล้ายกันคือสิ่งที่ฉันคุ้นเคยเมื่ออ่านโปรเจ็กต์ของผู้อื่น คุณสามารถรีโหลดแบบ hot reload, transpile, ใช้ไวยากรณ์แฟนซี และใช้โมดูลโหนดในเบราว์เซอร์ผ่านเวิร์กโฟลว์นั้นและเครื่องมือที่เกี่ยวข้อง

อย่างไรก็ตาม คุณกำลังนำเสนอความซับซ้อนในปริมาณที่เหมาะสมกับสิ่งเหล่านั้นทั้งหมด ฉันจำได้ว่าได้เรียนรู้ Vue.js ในขณะที่สร้างแอปที่เริ่มต้นในไฟล์ HTML แบบสแตนด์อโลน แต่ละหน้า/เส้นทางโหลดไฟล์ HTML ที่แตกต่างกัน จากนั้น ฉันเปลี่ยนไปใช้ชุดเริ่มต้น Vue Webpack ที่มีส่วนประกอบแบบไฟล์เดียว การทดสอบ และการ Lining ทั้งหมดทำงานให้ฉันโดยอัตโนมัติอย่างน่าอัศจรรย์ด้วยการกำหนดค่าด้วยตนเองเพียงเล็กน้อยหรือไม่มีเลย ประสบการณ์ของนักพัฒนาซอฟต์แวร์นั้นดีกว่าสำหรับฉัน แต่ผู้ใช้ปลายทางและนักพัฒนารายอื่น ๆ ชอบแอปเวอร์ชันเริ่มต้นที่น่าเบื่อกว่า (ซึ่งยังคงเหม็นอยู่)

เหตุผลหนึ่งที่เกี่ยวข้องกับการกำหนดเส้นทาง ในตอนแรก ฉันไม่ได้ใช้ vue-router เนื่องจากแต่ละเส้นทางรวมอยู่ในไฟล์ HTML สิ่งนี้ทำให้เกิดความซ้ำซ้อนของโค้ด ซึ่งฉันพยายามบรรเทาด้วยการนำเข้า HTML (Safari ไม่ชอบ “ฟีเจอร์นั้น”) เนื่องจากแต่ละหน้ามีตัวแปรร่วมของอินสแตนซ์ Vue คุณจึงสามารถเข้าถึงตัวแปรนั้นหรือทำอย่างอื่น...คุณอาจไม่ควรทำ

แต่ความจริงยังคงอยู่ว่ามันง่ายกว่ามากที่จะอธิบายให้นักพัฒนาคนอื่น ๆ ฟังว่าโค้ดอาศัยอยู่ที่ไหนและมันทำอะไร ฉันไม่จำเป็นต้องพูดว่า “มันเริ่มต้นจากการเป็นเพียงแท็ก ‹div id=”app”› ว่างเปล่าที่ซ้อนอยู่ภายในเทมเพลตพร้อมกับไฟล์อื่นที่กำหนดอินสแตนซ์…และ webpack…ES6 แน่นอน…ฯลฯ…ฯลฯ…” ให้ตายเถอะ ฉันยังไม่รู้ว่าชุดเริ่มต้น Vue Wepack ทำงานอย่างไร ฉันแค่รู้วิธีเชื่อมต่อเส้นทางไปยังส่วนประกอบต่างๆ และนำไปจากที่นั่น

หากคุณกำลังพยายามทำงานร่วมกันในทีมที่นักพัฒนาคนอื่นรู้จัก jQuery แต่ไม่ใช่ ES6 และ อัล และคุณกำลังแนะนำเครื่องมือ dev และไวยากรณ์ภาษาใหม่นอกเหนือจากเฟรมเวิร์ก JS ใหม่ให้พวกเขา ไม่ต้องแปลกใจหากพวกเขาจะวิ่งหนี พวกเขาอาจไม่พอใจคุณในภายหลัง...ท้ายที่สุดแล้ว คุณค่อนข้างเห็นแก่ตัวที่พยายามเรียนรู้งานและปล่อยพวกเขาไว้ใต้รถบัสหากคุณออกจากงานด้วยการบันทึกอะไรก็ตาม

ด้วยเหตุผลเหล่านี้ ฉันจึงตัดสินใจเริ่มต้นด้วยสิ่งที่ฉันได้รับ ซึ่งเป็นไฟล์ข้อมูล CSV ฉันรู้ว่าผู้ใช้ปลายทางสบายใจกว่าในการใช้ไฟล์ CSV และพวกเขาไม่สามารถป้อนข้อมูลลงในสิ่งที่ฉันกำลังพัฒนาได้แต่ยังไม่เสร็จสิ้น ฉันรู้ด้วยว่าการมีขั้นตอนการทำงานที่เรียบง่ายที่สุดเท่าที่จะเป็นไปได้และหวังว่าจะเข้าใจง่ายจะช่วยให้นักพัฒนารายอื่นดำเนินการได้ในอนาคต สุดท้ายนี้ ฉันเคยเห็นโปรเจ็กต์สูญเสียเงินทุนระหว่างการพัฒนาก่อนที่จะปรับใช้ เมื่อโซลูชันที่เร็วกว่าอาจถูกปรับใช้ ใช้งาน และบำรุงรักษา หากได้รับความบันเทิงจากแนวทางที่ง่ายกว่าและยุ่งกว่าในตอนแรก

ไฟล์...

ไฟล์ต้นฉบับที่ฉันได้รับประกอบด้วยลำดับชั้นขององค์กรในคอลัมน์แรกและข้อมูลที่เกี่ยวข้องกับองค์กรในคอลัมน์ที่เหลือ

สิ่งแรกที่ฉันสังเกตเห็นคือแต่ละแถวมีข้อมูลขององค์กรเพียงแห่งเดียว แต่ยังรวมถึงความสัมพันธ์ระหว่างพ่อแม่และลูกด้วย เดิมทีฉันเห็นสี่ระดับที่องค์กรสามารถใส่ได้ อย่างไรก็ตาม จำนวนระดับสามารถเปลี่ยนแปลงได้เมื่อเวลาผ่านไป หากระดับเปลี่ยนแปลงไปตามช่วงเวลา ข้อมูลสำหรับแต่ละองค์กรจะถูกผลักออกเพิ่มเติมในรูปของคอลัมน์ในสเปรดชีต

คุณสามารถแยกข้อมูลสำหรับองค์กรออกจากตำแหน่งในลำดับชั้นได้โดยการสร้างสเปรดชีต 2 แผ่น จากนั้นคุณจะมีคีย์นอกเพื่อจับคู่และสามารถให้ผู้อื่นแก้ไขเฉพาะข้อมูลหรือลำดับชั้นได้

แต่คุณจะเห็นลำดับชั้นทั้งหมดในขณะที่ทำงานจากสเปรดชีตนั้นได้อย่างไร คุณจะต้องมี UI เพื่อรวบรวมข้อมูลนั้นตามลำดับที่ถูกต้อง ดังนั้นการมีข้อมูลตามที่ได้รับอนุญาตผู้ใช้สามารถคัดลอกและวางแถวที่ต้องการเมื่อย้ายองค์กรไปรอบๆ การเลื่อนดูข้อมูลในคอลัมน์ขวาสุดของสเปรดชีตอาจเป็นเรื่องที่ยุ่งยากมากกว่า แต่อย่างน้อยลักษณะภาพของความสัมพันธ์จะยังคงอยู่

เพื่อให้โครงสร้างเริ่มต้นทำงานได้ เราสามารถให้ผู้ใช้ป้อนจำนวนระดับของลำดับชั้น ซึ่งอาจมาพร้อมกับป้ายกำกับส่วนหัวของคอลัมน์ และถือว่าส่วนหัวที่เหลือทั้งหมดเป็นข้อมูลสำหรับองค์กรในแถวนั้น

เนื่องจากเราเลือกที่จะทำให้ UUID ขององค์กรเป็นการรวมกันของชื่อลำดับชั้น เราจึงต้องคิดว่าผู้ใช้สามารถเปลี่ยนแปลงความสัมพันธ์เหล่านั้นได้อย่างไร และผู้บริโภคของข้อมูลจะอัปเดตเพื่อสะท้อนการเปลี่ยนแปลงอย่างไร

โชคดีสำหรับเรา เนื่องจากข้อมูลถูกรวบรวมผ่าน HTTP ผ่าน Apache ซึ่งเป็นวิธีแก้ปัญหาที่เป็นไปได้ในการเปลี่ยนเส้นทางผู้ใช้ไปยังข้อมูลใหม่ หากผู้ใช้โหลดมุมมององค์กรในเวอร์ชันแคชก่อนที่จะอัปเดต เราสามารถเก็บการเปลี่ยนเส้นทางไว้ในไฟล์แยกต่างหากที่สร้างขึ้นในกระบวนการสร้างทุกครั้งที่มีการเปลี่ยนแปลงข้อมูล นอกจากนี้เรายังสามารถสร้างไฟล์ JSON สำหรับแต่ละเส้นทางที่จำเป็นในการแสดงข้อมูลและมี API ไฟล์แบบแฟลตโดยไม่ต้องใช้ฐานข้อมูลเพื่อรวบรวมข้อมูลที่ส่งกลับไปยังไคลเอนต์

แบบฟอร์มง่ายๆ ไฟล์ HTML อย่างง่าย

สำหรับ UI สิ่งที่ฉันจะทำคือสร้างแบบฟอร์มง่ายๆ เป็นเวลานานมากแล้วตั้งแต่ฉันทำสิ่งนี้ด้วย HTML จนฉันไม่รู้ว่าจะพิมพ์อะไรใน IDE หลังจากที่เสร็จสิ้น for ถึง <form action=""></form> ฉันคุ้นเคยกับการใช้เฟรมเวิร์กบางประเภทเพื่อสร้างแบบฟอร์ม รวบรวมข้อมูลอินพุต เพิ่มการป้องกัน CSRF และ POST ไปยังจุดสิ้นสุดที่ถูกต้องเพื่อความคงอยู่

ส่วนที่ดีประการหนึ่งเกี่ยวกับการลดความซับซ้อนของโค้ดของคุณคือการที่คุณย้อนกลับไปสู่แนวคิดพื้นฐานในการพัฒนาเว็บไซต์ซึ่งเป็นความรู้สำคัญที่ใช้ในการสร้างเว็บไซต์เมื่อ 20 ปีที่แล้ว แต่นักพัฒนาจำนวนมากลืมหรือไม่เคยเรียนรู้วิธีทำเลย ฉันเริ่มการพัฒนาเว็บไซต์โดยใช้ Drupal CMS และ Form API รวมถึงตัวควบคุมด้านหน้าและระบบกำหนดเส้นทาง/เมนู จนกระทั่งหลายปีต่อมา ฉันได้เรียนรู้ว่าตัวควบคุมด้านหน้าคืออะไร และเรียนรู้เพิ่มเติมเกี่ยวกับการกำหนดเส้นทางและวงจรคำขอ/การตอบสนอง อย่างไรก็ตาม ฉันยังคงจำไม่ได้ว่าจะสร้างรูปแบบที่เหมาะสมใน HTML ได้อย่างไร…ดังนั้นฉันจึงยังมีหนทางอีกยาวไกลในแผนกแนวคิดเว็บขั้นพื้นฐาน

เพื่อให้แอปขนาดเล็กนี้เรียบง่ายที่สุดเท่าที่จะเป็นไปได้ ฉันต้องการทำให้เป็นไฟล์ HTML แบบสแตนด์อโลนที่ใครบางคนสามารถโหลดและประมวลผลเป็นไฟล์ JSON ในรูปแบบ "การส่ง" ด้วยเหตุนี้ ปุ่มส่งจึงใช้ onclick=”submitData()” เพื่อประมวลผลไฟล์ CSV ในเบื้องหลัง เหตุผลที่ฉันอ้างถึง "การส่ง" คือแอตทริบิวต์ "การกระทำ" ที่โดยทั่วไปใช้เพื่อส่งข้อมูลกลับไปยังเซิร์ฟเวอร์เพื่อการประมวลผล ซึ่งเราแกล้งทำเป็นเก็บไว้ฝั่งไคลเอ็นต์

ฉันจะไม่เพิ่มโค้ด HTML ของฟอร์มเนื่องจากมันเป็นมาตรฐานที่ค่อนข้างดี แต่ฉันดีใจที่พบว่าการอัปโหลดไฟล์นั้นทำได้ค่อนข้างง่ายในการป้อนแบบฟอร์ม โดยการตั้งค่าประเภทและส่วนขยายที่รวมอยู่ด้วย

<input type="file"
       id="csv_upload"
       class="form-control"
       name="csv_upload"
       accept=".csv">

การจัดการอินพุตไฟล์

ฉันไม่รู้ว่าจะทำงานกับไฟล์ที่อัพโหลดในเบราว์เซอร์ได้อย่างไรก่อนที่จะพยายามทำงานนี้ให้สำเร็จ เมื่อใดก็ตามที่ฉันไม่รู้อะไรเกี่ยวกับเว็บ ฉันจะไปที่เว็บไซต์ MDN ที่ยอดเยี่ยม และโชคดีสำหรับฉันที่พวกเขามี บทความดีๆ เกี่ยวกับวิธีใช้ประเภทอินพุตไฟล์ พร้อมด้วยตัวอย่าง

const uploadFile = document.querySelector('#csv_upload');
uploadFile.addEventListener('change', () => { currentFiles = uploadFile.files});

บทความ MDN อธิบายวิธีที่คุณสามารถใช้ตัวฟังเหตุการณ์เพื่อบันทึกไฟล์ที่เลือกไว้ในตัวแปรและดำเนินการตามที่คุณต้องการ อาจเป็นความคิดที่ดีที่จะ "อ่าน File Web API" แต่ช่องป้อนข้อมูลจะให้รายการออบเจ็กต์ไฟล์ที่คุณสามารถใช้ในโค้ดของคุณในภายหลัง ฉันคิดว่าฉันจะต้องทำงานมากขึ้นเพื่ออัปโหลดไฟล์และดึงข้อมูล แต่...ทีม Web ทำได้ดีมาก!

แยกไฟล์

ฉันค้นหาอินเทอร์เน็ตเพียงช่วงสั้นๆ เพื่อดูว่ามีไลบรารีการแยกวิเคราะห์ CSV อะไรบ้าง และฉันก็พบ "Papa Parse" อย่างรวดเร็ว มีดาวและกิจกรรม GitHub เพียงพอสำหรับฉันที่จะมอบ 👍

// After the user submits the form...
// Parsing handled separately in a callback.
Papa.parse(currentFiles[0], parseConfig);

สิ่งที่ฉันต้องทำคือส่งไฟล์ออบเจ็กต์ที่ฉันคว้ามาเมื่อส่งแบบฟอร์มและระบุการโทรกลับในออบเจ็กต์ config ที่ฟังก์ชัน parse ใช้เป็นพารามิเตอร์ ฉันรู้ว่า Papa Parse มีฟังก์ชันมากมายที่ฉันไม่ได้สำรวจ แต่ฉันดีใจที่มันใช้งานง่ายมากและให้ข้อมูลส่วนหัวและแถวที่ฉันต้องการในรูปแบบที่เข้าถึงได้ง่าย

การสร้าง JSON…และ eval()?

เนื้อและผัก (เนื้อสัตว์และเนื้อในอเมริกา) ของแอปของฉันคือวิธีที่แยกวิเคราะห์ไฟล์ CSV เป็น JSON ฉันเห็นภาพนี้ในโครงสร้างแบบต้นไม้ที่ฉันวาดไว้ตอนต้นของโพสต์นี้ เพราะในรูปแบบนั้น คุณสามารถย้ายองค์กรไปรอบๆ และนำบุตรหลานไปด้วยได้ คุณอยากจะอุ้มลูก ๆ ไปด้วยถ้าคุณย้ายด้วยใช่ไหม? ฉันคิดว่าคุณต้องตามกฎหมายอยู่แล้ว 😝…ฆ่ามันซะ

แต่ที่จริงจังกว่านั้น หากองค์กรต่างๆ มีความสัมพันธ์เช่นนี้ ฉันไม่สมเหตุสมผลเลยที่จะแสดงรายการผู้ปกครองในช่องที่ทำให้ไฟล์ JSON มีลักษณะเหมือนกับไฟล์ CSV การหลีกเลี่ยงการสร้างรูปแบบที่ซับซ้อนมากขึ้นนั้นไม่สมเหตุสมผลเลย เมื่อฉันพยายามสร้างโครงสร้างแผนผังดั้งเดิมจากไฟล์ CSV ไฟล์เดียวแต่ล้มเหลว...แต่กลับล้มเหลวอย่างต่อเนื่อง ฉันหงุดหงิดกับทักษะการพัฒนาของลูกน้อย

คุณอาจต้องการนั่งลงก่อนที่ฉันจะแสดงรหัสต่อไปนี้ให้คุณดู มันใช้ฟังก์ชัน evil eval() อับอาย อับอาย! คุณทำได้ยังไงอินเทอร์เน็ตก็เห่า จริงๆ แล้วอินเทอร์เน็ตไม่เห่าและดูเหมือนจะบอกว่า eval() ไม่ได้แย่ขนาดนั้นหากคุณใช้ในช่วงเวลาที่ความนับถือตนเองและความวิบัติต่ำ StackOverflow บอกฉันอย่างนั้น

ฉันยังได้ปรึกษาฮันนี่แบดเจอร์ผู้มีชื่อเสียงและมีความสามารถด้วย และเธอก็บอกฉันว่า “ฮันนี่แบดเจอร์ไม่สนใจ! Honey Badget ใช้ eval() ตลอดเวลา!”

ถูกต้องตามกฎหมาย

การใช้ eval ของฉันเกิดจากการไม่สามารถระบุวิธีกำหนดค่าลงในห่วงโซ่ของวัตถุได้ เมื่อฉันไม่รู้ว่าองค์ประกอบหลักจะเป็นเช่นไรในเวลาที่ได้รับมอบหมาย สำหรับฉัน การกำหนดตัวแปรเกิดขึ้นในโค้ดบรรทัดเดียว และการเรียกซ้ำยังคงเป็นการใช้งานที่ฉันพยายามใช้อยู่ ฉันคิดว่า…เขียนโค้ด…เขียนประโยค…ขีดข่วนบนไวท์บอร์ด…คิดเพิ่มเติมอีก…มองออกไปนอกหน้าต่าง จากนั้นฉันก็คิดว่า แย่เลย ฉันจะใช้ตัวแปรตัวแปรเพื่อทำงานของฉันให้สำเร็จ

ฉันคุ้นเคยกับ PHP มากกว่ามาก ซึ่งอนุญาตให้ใช้ตัวแปรตัวแปรได้โดยใช้โทเค็นตัวแปร $ สองครั้ง $$varString แต่ใน JS eval ดูเหมือนเป็นทางออกเดียวสำหรับสิ่งนั้น แม้ว่าฉันอาจเห็นวิธีอื่นในการทำเช่นนี้บน StackOverflow ก็ตาม ฉันไม่ได้ใช้ตัวแปรตัวแปรใน PHP แต่วิธีแก้ปัญหาของฉันคือการใช้ตัวแปร eval และตัวแปรเพื่อสร้างตัวแปรการกำหนด จากนั้นตั้งค่าสุดท้ายภายในออบเจ็กต์ที่ซ้อนกันด้วยการเรียก eval เพียงครั้งเดียว…หลาย ๆ อย่างที่คุณเห็น

ในโค้ดที่สวยงามและสวยงามนั้น ค่าส่วนหัวระดับองค์กรแต่ละค่าจะถูกตรวจสอบเพื่อดูว่าว่างเปล่าหรือไม่ แถวในไฟล์ CSV จะประกาศพาเรนต์ด้วยค่า orgLevelHeaders ว่างอย่างน้อยหนึ่งค่าเสมอ ดังนั้นค่านั้นคือสิ่งเดียวที่ฉันต้องตรวจสอบเพื่อดูว่าจะวางข้อมูลสุดท้ายสำหรับองค์กรใดองค์กรหนึ่งไว้ที่ใด เมื่อการประเมินขั้นสุดท้ายเกิดขึ้น varString จะมีลำดับชั้นระดับองค์กรที่จำเป็นในการกำหนดข้อมูลภายใน

ฉันแน่ใจว่าฉันสามารถทำเช่นนี้ได้ในวิธีที่ดีกว่า แต่ในขณะที่สร้าง PoC ฉันมักจะไม่ใช้เวลามากเกินไปในการล้างโค้ดจนกว่าฉันจะรู้ว่าทิศทางที่ฉันกำลังดำเนินการนั้นถูกต้อง ต้องบอกว่าโปรดแจ้งให้เราทราบว่ารหัสของฉันทำให้คุณล้มเหลวในส่วนความคิดเห็นมากเพียงใด

กำลังดาวน์โหลดไฟล์

ในกรณีที่คุณไม่ทราบวิธีดาวน์โหลดไฟล์จากการคลิกปุ่มในเบราว์เซอร์ ฉันจะรวมโค้ดบางส่วนไว้ด้วย ฉันจะใช้เวลาค้นคว้าวิธีการทำเช่นนี้ แต่ฉันคัดลอกและวางแล้ว...อะแฮ่ม คิดออกแล้ว...ในโครงการอื่น

…ฉันไม่สามารถอธิบายโค้ดได้ทั้งหมด แต่ MDN สามารถเติมเต็มบางส่วนให้กับคุณใน "เช่น Blob" ได้อีกครั้ง โดยพื้นฐานแล้ว คุณสร้างข้อมูลที่แปลงเป็นไฟล์ที่ดาวน์โหลดได้ สร้างลิงก์ชั่วคราวบนเพจ จำลองการคลิกลิงก์ไปยัง URL ของไฟล์ จากนั้นจึงลบลิงก์ออก เห็นได้ชัดว่าแอตทริบิวต์ download สำหรับลิงก์เป็นคุณลักษณะ HTML5 ฉันรู้แค่ว่ามันใช้งานได้ใน Chrome 🙋‍♂

คุณสามารถค้นหารหัสที่สมบูรณ์ของแอปได้ที่นี่: https://github.com/alexfinnarn/directory_parser โปรเจ็กต์นี้มี Readme ที่ยอดเยี่ยมที่จะบอกคุณว่าทุกอย่างทำงานอย่างไร 😬