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() {
+