diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index 7026e4c..a1667ff 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -9,9 +9,11 @@ The tool in this repository is designed to help users validate and test JMESPath The application is single page. The page is divided into three sections: - Top section: Title and description of the tool. -- Middle section: Input area for JMESPath expressions -- Bottom left section: Input area for JSON data -- Bottom right section: Output are for JMESPath query results +- Middle section: + - Input area for JMESPath expressions +- Lower Middle left section: Input area for JSON data +- Lower Middle right section: Output are for JMESPath query results +- Boottom section: Footer with author and license information The Middle section also contains a toolbar with buttons to load data from disk, load sample data, format JSON input, and clear all inputs. diff --git a/README.md b/README.md index f24ff6d..b3267c5 100644 --- a/README.md +++ b/README.md @@ -75,14 +75,14 @@ npm run docker:run 1. **Enter a JMESPath expression** in the top input field (e.g., `people[*].name`) 2. **Add JSON data** using one of these methods: - - **Load from disk**: Click "📁 Load from Disk" to upload files - - `.json` files: Standard JSON format - - `.log` files: JSON Lines format (each line is a JSON object, automatically converted to array) + - **Load an Object**: Click "📄 Load an Object" to upload standard JSON files (.json) + - **Load a Log File**: Click "📋 Load a Log File" to upload JSON Lines files (.log) - each line converted to array - **Paste or type**: Enter JSON data directly in the bottom-left textarea - **Load sample**: Use the "Load Sample" button for quick testing 3. **View the results** in the bottom-right output area 4. **Use the toolbar buttons** to: - - Load JSON data from local files + - Load JSON objects from standard .json files + - Load log files from JSON Lines .log files (auto-converted to arrays) - Load sample data for testing - Format JSON for better readability - Clear all inputs diff --git a/src/App.js b/src/App.js index 4a93f6e..1c46275 100644 --- a/src/App.js +++ b/src/App.js @@ -119,7 +119,7 @@ function App() { const loadFromDisk = () => { const fileInput = document.createElement('input'); fileInput.type = 'file'; - fileInput.accept = '.json,.log'; + fileInput.accept = '.json'; fileInput.onchange = (event) => { const file = event.target.files[0]; if (file) { @@ -127,35 +127,50 @@ function App() { reader.onload = (e) => { try { const content = e.target.result; - let jsonContent; + // Handle .json files as regular JSON + JSON.parse(content); // Validate JSON + setJsonData(content); + setJsonError(''); + } catch (err) { + setJsonError(`Invalid JSON file: ${err.message}`); + } + }; + reader.readAsText(file); + } + }; + fileInput.click(); + }; + + const loadLogFile = () => { + const fileInput = document.createElement('input'); + fileInput.type = 'file'; + fileInput.accept = '.log'; + fileInput.onchange = (event) => { + const file = event.target.files[0]; + if (file) { + const reader = new FileReader(); + reader.onload = (e) => { + try { + const content = e.target.result; + const lines = content.split('\n') + .map(line => line.trim()) + .filter(line => line.length > 0); - // Handle .log files as sequences of JSON objects (JSON Lines format) - if (file.name.toLowerCase().endsWith('.log')) { - const lines = content.split('\n') - .map(line => line.trim()) - .filter(line => line.length > 0); - - const jsonObjects = []; - for (const line of lines) { - try { - const obj = JSON.parse(line); - jsonObjects.push(obj); - } catch (lineError) { - throw new Error(`Invalid JSON on line: "${line.substring(0, 50)}..." - ${lineError.message}`); - } + const jsonObjects = []; + for (const line of lines) { + try { + const obj = JSON.parse(line); + jsonObjects.push(obj); + } catch (lineError) { + throw new Error(`Invalid JSON on line: "${line.substring(0, 50)}..." - ${lineError.message}`); } - - jsonContent = JSON.stringify(jsonObjects, null, 2); - } else { - // Handle .json files as regular JSON - JSON.parse(content); // Validate JSON - jsonContent = content; } + const jsonContent = JSON.stringify(jsonObjects, null, 2); setJsonData(jsonContent); setJsonError(''); } catch (err) { - setJsonError(`Invalid file content: ${err.message}`); + setJsonError(`Invalid log file: ${err.message}`); } }; reader.readAsText(file); @@ -195,9 +210,16 @@ function App() { +