mirror of
https://github.com/iib0011/omni-tools.git
synced 2025-09-23 16:09:30 +02:00
fix: json comparison
This commit is contained in:
@@ -3,7 +3,6 @@ import ToolContent from '@components/ToolContent';
|
|||||||
import LineNumberInput from '@components/input/LineNumberInput';
|
import LineNumberInput from '@components/input/LineNumberInput';
|
||||||
import ToolTextResult from '@components/result/ToolTextResult';
|
import ToolTextResult from '@components/result/ToolTextResult';
|
||||||
import { compareJson } from './service';
|
import { compareJson } from './service';
|
||||||
import { CardExampleType } from '@components/examples/ToolExamples';
|
|
||||||
import { ToolComponentProps } from '@tools/defineTool';
|
import { ToolComponentProps } from '@tools/defineTool';
|
||||||
import { Box, Grid, styled } from '@mui/material';
|
import { Box, Grid, styled } from '@mui/material';
|
||||||
|
|
||||||
@@ -43,33 +42,6 @@ type InitialValuesType = {};
|
|||||||
|
|
||||||
const initialValues: InitialValuesType = {};
|
const initialValues: InitialValuesType = {};
|
||||||
|
|
||||||
const exampleCards: CardExampleType<InitialValuesType>[] = [
|
|
||||||
{
|
|
||||||
title: 'Compare Simple JSON Objects',
|
|
||||||
description:
|
|
||||||
'Compare two JSON objects to find differences in their structure and values.',
|
|
||||||
sampleText: `{
|
|
||||||
"name": "John",
|
|
||||||
"age": 30,
|
|
||||||
"address": {
|
|
||||||
"city": "New York",
|
|
||||||
"country": "USA"
|
|
||||||
}
|
|
||||||
}`,
|
|
||||||
sampleResult: `{
|
|
||||||
"name": "John",
|
|
||||||
"age": 25,
|
|
||||||
"address": {
|
|
||||||
"city": "London",
|
|
||||||
"country": "UK"
|
|
||||||
}
|
|
||||||
}`,
|
|
||||||
sampleOptions: {
|
|
||||||
...initialValues
|
|
||||||
}
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function JsonComparison({ title }: ToolComponentProps) {
|
export default function JsonComparison({ title }: ToolComponentProps) {
|
||||||
const [input1, setInput1] = useState<string>('');
|
const [input1, setInput1] = useState<string>('');
|
||||||
const [input2, setInput2] = useState<string>('');
|
const [input2, setInput2] = useState<string>('');
|
||||||
@@ -115,8 +87,8 @@ export default function JsonComparison({ title }: ToolComponentProps) {
|
|||||||
input={input1}
|
input={input1}
|
||||||
setInput={setInput1}
|
setInput={setInput1}
|
||||||
initialValues={initialValues}
|
initialValues={initialValues}
|
||||||
|
getGroups={null}
|
||||||
compute={() => {}}
|
compute={() => {}}
|
||||||
exampleCards={exampleCards}
|
|
||||||
inputComponent={
|
inputComponent={
|
||||||
<StyledContainer>
|
<StyledContainer>
|
||||||
<StyledGrid container spacing={2}>
|
<StyledGrid container spacing={2}>
|
||||||
|
@@ -137,84 +137,3 @@ const findDifferencesJSON = (obj1: any, obj2: any): Record<string, string> => {
|
|||||||
|
|
||||||
return result;
|
return result;
|
||||||
};
|
};
|
||||||
|
|
||||||
const findDifferences = (
|
|
||||||
obj1: any,
|
|
||||||
obj2: any,
|
|
||||||
path: string[] = []
|
|
||||||
): string[] => {
|
|
||||||
const differences: string[] = [];
|
|
||||||
|
|
||||||
// Helper to format values for display
|
|
||||||
const formatValue = (value: any): string => {
|
|
||||||
if (value === undefined) return 'undefined';
|
|
||||||
if (value === null) return 'null';
|
|
||||||
if (typeof value === 'string') return `"${value}"`;
|
|
||||||
return String(value);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Helper to get type description
|
|
||||||
const getTypeDescription = (value: any): string => {
|
|
||||||
if (value === null) return 'null';
|
|
||||||
if (Array.isArray(value)) return 'array';
|
|
||||||
return typeof value;
|
|
||||||
};
|
|
||||||
|
|
||||||
const processPath = (p: string[]): string =>
|
|
||||||
p.length ? p.join('.') : 'root';
|
|
||||||
|
|
||||||
// Compare all keys in obj1
|
|
||||||
for (const key in obj1) {
|
|
||||||
const currentPath = [...path, key];
|
|
||||||
|
|
||||||
if (!(key in obj2)) {
|
|
||||||
differences.push(
|
|
||||||
`Property ${processPath(
|
|
||||||
currentPath
|
|
||||||
)} exists only in first JSON:\n ${formatValue(obj1[key])}`
|
|
||||||
);
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
const value1 = obj1[key];
|
|
||||||
const value2 = obj2[key];
|
|
||||||
const type1 = getTypeDescription(value1);
|
|
||||||
const type2 = getTypeDescription(value2);
|
|
||||||
|
|
||||||
if (type1 !== type2) {
|
|
||||||
differences.push(
|
|
||||||
`Type mismatch at ${processPath(
|
|
||||||
currentPath
|
|
||||||
)}:\n First: ${type1} (${formatValue(
|
|
||||||
value1
|
|
||||||
)})\n Second: ${type2} (${formatValue(value2)})`
|
|
||||||
);
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (type1 === 'object' || type1 === 'array') {
|
|
||||||
const childDiffs = findDifferences(value1, value2, currentPath);
|
|
||||||
differences.push(...childDiffs);
|
|
||||||
} else if (value1 !== value2) {
|
|
||||||
differences.push(
|
|
||||||
`Value mismatch at ${processPath(currentPath)}:\n First: ${formatValue(
|
|
||||||
value1
|
|
||||||
)}\n Second: ${formatValue(value2)}`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check for keys in obj2 that don't exist in obj1
|
|
||||||
for (const key in obj2) {
|
|
||||||
if (!(key in obj1)) {
|
|
||||||
const currentPath = [...path, key];
|
|
||||||
differences.push(
|
|
||||||
`Property ${processPath(
|
|
||||||
currentPath
|
|
||||||
)} exists only in second JSON:\n ${formatValue(obj2[key])}`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return differences;
|
|
||||||
};
|
|
||||||
|
Reference in New Issue
Block a user