mokanfar · October 12, 2024 06:17
diff --git a/Merge-Two-CSVs-By-Common-Key.html b/Merge-Two-CSVs-By-Common-Key.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic CSV Left Join Form</title>
 </head>
 <body>
    <h1>Dynamic CSV Left Join</h1>

    <!-- Form -->
    <form id="myForm">
        <label for="key1">Key 1 (From Tab 1):</label>
        <input type="text" id="key1" name="key1" value="sku"><br><br>

        <label for="key2">Key 2 (From Tab 2):</label>
        <input type="text" id="key2" name="key2" value="sku"><br><br>

        <label for="tab1">Tab 1:</label><br>
        <textarea id="tab1" name="tab1" rows="8" cols="50">sku	name
 sku-1	foo
 sku-2	bar
 sku-3	baz</textarea><br><br>

        <label for="tab2">Tab 2:</label><br>
        <textarea id="tab2" name="tab2" rows="8" cols="50">sku	name
 sku-3	cat
 sku-1	dog</textarea><br><br>

        <label for="result">Result (Left Join):</label><br>
        <textarea id="result" name="result" rows="8" cols="50"></textarea><br><br>

        <button type="submit">Submit</button>
    </form>

    <script>
        document.getElementById("myForm").addEventListener("submit", function(event) {
            event.preventDefault(); // Prevent form submission

            let key1 = document.getElementById("key1").value || "sku";
            let key2 = document.getElementById("key2").value || "sku";
            let tab1 = document.getElementById("tab1").value;
            let tab2 = document.getElementById("tab2").value;

            // Function to parse CSV with tab-delimited data into an array of objects
            function parseCSV(csvString) {
                const lines = csvString.trim().split('\n');
                const headers = lines[0].split('\t');
                return lines.slice(1).map(line => {
                    const values = line.split('\t');
                    return headers.reduce((obj, header, index) => {
                        obj[header.trim()] = values[index].trim();
                        return obj;
                    }, {});
                });
            }

            // Parse the tab-delimited CSV data
            const data1 = parseCSV(tab1);
            const data2 = parseCSV(tab2);

            // Get the unique headers from both datasets
            const headers1 = Object.keys(data1[0]);
            const headers2 = Object.keys(data2[0]);

            // Handle field name collisions by appending "_2" to fields from tab2 if there is a collision
            const headers2Renamed = headers2.map(header => {
                return headers1.includes(header) && header !== key1 ? header + "_2" : header;
            });

            // Perform left join based on key1 and key2
            const result = data1.map(item1 => {
                const match = data2.find(item2 => item1[key1] === item2[key2]);
                const joinedItem = { ...item1 };

                headers2.forEach((header, index) => {
                    const renamedHeader = headers2Renamed[index];
                    joinedItem[renamedHeader] = match ? match[header] : null;
                });

                return joinedItem;
            });

            // Build the result string with headers and rows separated by tabs
            const resultHeaders = [...headers1, ...headers2Renamed];
            let resultText = resultHeaders.join('\t') + '\n'; // Join headers by tab

            result.forEach(row => {
                const rowText = resultHeaders.map(header => row[header] || "").join('\t');
                resultText += rowText + '\n';
            });

            // Output the result in the "result" textarea
            document.getElementById("result").value = resultText.trim();
        });
    </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Dynamic CSV Left Join Form</title>
	</head>
	<body>
	<h1>Dynamic CSV Left Join</h1>

	<!-- Form -->
	<form id="myForm">
	<label for="key1">Key 1 (From Tab 1):</label>
	<input type="text" id="key1" name="key1" value="sku"><br><br>

	<label for="key2">Key 2 (From Tab 2):</label>
	<input type="text" id="key2" name="key2" value="sku"><br><br>

	<label for="tab1">Tab 1:</label><br>
	<textarea id="tab1" name="tab1" rows="8" cols="50">sku name
	sku-1 foo
	sku-2 bar
	sku-3 baz</textarea><br><br>

	<label for="tab2">Tab 2:</label><br>
	<textarea id="tab2" name="tab2" rows="8" cols="50">sku name
	sku-3 cat
	sku-1 dog</textarea><br><br>

	<label for="result">Result (Left Join):</label><br>
	<textarea id="result" name="result" rows="8" cols="50"></textarea><br><br>

	<button type="submit">Submit</button>
	</form>

	<script>
	document.getElementById("myForm").addEventListener("submit", function(event) {
	event.preventDefault(); // Prevent form submission

	let key1 = document.getElementById("key1").value \|\| "sku";
	let key2 = document.getElementById("key2").value \|\| "sku";
	let tab1 = document.getElementById("tab1").value;
	let tab2 = document.getElementById("tab2").value;

	// Function to parse CSV with tab-delimited data into an array of objects
	function parseCSV(csvString) {
	const lines = csvString.trim().split('\n');
	const headers = lines[0].split('\t');
	return lines.slice(1).map(line => {
	const values = line.split('\t');
	return headers.reduce((obj, header, index) => {
	obj[header.trim()] = values[index].trim();
	return obj;
	}, {});
	});
	}

	// Parse the tab-delimited CSV data
	const data1 = parseCSV(tab1);
	const data2 = parseCSV(tab2);

	// Get the unique headers from both datasets
	const headers1 = Object.keys(data1[0]);
	const headers2 = Object.keys(data2[0]);

	// Handle field name collisions by appending "_2" to fields from tab2 if there is a collision
	const headers2Renamed = headers2.map(header => {
	return headers1.includes(header) && header !== key1 ? header + "_2" : header;
	});

	// Perform left join based on key1 and key2
	const result = data1.map(item1 => {
	const match = data2.find(item2 => item1[key1] === item2[key2]);
	const joinedItem = { ...item1 };

	headers2.forEach((header, index) => {
	const renamedHeader = headers2Renamed[index];
	joinedItem[renamedHeader] = match ? match[header] : null;
	});

	return joinedItem;
	});

	// Build the result string with headers and rows separated by tabs
	const resultHeaders = [...headers1, ...headers2Renamed];
	let resultText = resultHeaders.join('\t') + '\n'; // Join headers by tab

	result.forEach(row => {
	const rowText = resultHeaders.map(header => row[header] \|\| "").join('\t');
	resultText += rowText + '\n';
	});

	// Output the result in the "result" textarea
	document.getElementById("result").value = resultText.trim();
	});
	</script>

	</body>
	</html>