fix(editor): Show escape characters in json view (#16930)

This commit is contained in:
Nikhil Kuriakose
2025-07-07 10:49:26 +02:00
committed by GitHub
parent aad712e408
commit bd8b7b468c
3 changed files with 44 additions and 16 deletions

View File

@@ -712,7 +712,7 @@ describe('NDV', () => {
.outputDataContainer()
.should(
'have.text',
'[{"body": "<?xml version="1.0" encoding="UTF-8"?> <library> <book> <title>Introduction to XML</title> <author>John Doe</author> <publication_year>2020</publication_year> <isbn>1234567890</isbn> </book> <book> <title>Data Science Basics</title> <author>Jane Smith</author> <publication_year>2019</publication_year> <isbn>0987654321</isbn> </book> <book> <title>Programming in Python</title> <author>Bob Johnson</author> <publication_year>2021</publication_year> <isbn>5432109876</isbn> </book> </library>"}]',
'[{"body": "<?xml version=\\"1.0\\" encoding=\\"UTF-8\\"?> <library> <book> <title>Introduction to XML</title> <author>John Doe</author> <publication_year>2020</publication_year> <isbn>1234567890</isbn> </book> <book> <title>Data Science Basics</title> <author>Jane Smith</author> <publication_year>2019</publication_year> <isbn>0987654321</isbn> </book> <book> <title>Programming in Python</title> <author>Bob Johnson</author> <publication_year>2021</publication_year> <isbn>5432109876</isbn> </book> </library>"}]',
);
ndv.getters.outputDataContainer().find('mark').should('have.text', '<lib');

View File

@@ -112,10 +112,14 @@ const onDragEnd = (el: HTMLElement) => {
}, 1000); // ensure dest data gets set if drop
};
const getContent = (value: unknown) => {
const formatKey = (value: unknown) => {
return isString(value) ? `"${value}"` : JSON.stringify(value);
};
const formatValue = (value: unknown) => {
return JSON.stringify(value);
};
const getListItemName = (path: string) => {
return path.replace(/^(\["?\d"?]\.?)/g, '');
};
@@ -168,7 +172,7 @@ const getListItemName = (path: string) => {
>
<template #renderNodeKey="{ node }">
<TextWithHighlights
:content="getContent(node.key)"
:content="formatKey(node.key)"
:search="search"
data-target="mappable"
:data-value="getJsonParameterPath(node.path)"
@@ -183,13 +187,7 @@ const getListItemName = (path: string) => {
</template>
<template #renderNodeValue="{ node }">
<TextWithHighlights
v-if="isNaN(node.index)"
:content="getContent(node.content)"
:search="search"
/>
<TextWithHighlights
v-else
:content="getContent(node.content)"
:content="formatValue(node.content)"
:search="search"
data-target="mappable"
:data-value="getJsonParameterPath(node.path)"

View File

@@ -416,7 +416,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
>
<span
class="content"
class="content mappable ph-no-capture"
data-depth="3"
data-name="record.name"
data-path="[0].record.name"
data-target="mappable"
data-value="{{ $('Set').item.json.record.name }}"
>
<span>
@@ -512,7 +517,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
>
<span
class="content"
class="content mappable ph-no-capture"
data-depth="2"
data-name="myNumber"
data-path="[0].myNumber"
data-target="mappable"
data-value="{{ $('Set').item.json.myNumber }}"
>
<span>
@@ -579,7 +589,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
>
<span
class="content"
class="content mappable ph-no-capture"
data-depth="2"
data-name="myStringNumber"
data-path="[0].myStringNumber"
data-target="mappable"
data-value="{{ $('Set').item.json.myStringNumber }}"
>
<span>
@@ -646,7 +661,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
>
<span
class="content"
class="content mappable ph-no-capture"
data-depth="2"
data-name="myStringText"
data-path="[0].myStringText"
data-target="mappable"
data-value="{{ $('Set').item.json.myStringText }}"
>
<span>
@@ -713,7 +733,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
>
<span
class="content"
class="content mappable ph-no-capture"
data-depth="2"
data-name="nil"
data-path="[0].nil"
data-target="mappable"
data-value="{{ $('Set').item.json.nil }}"
>
<span>
@@ -780,7 +805,12 @@ exports[`RunDataJson.vue > renders json values properly 1`] = `
>
<span
class="content"
class="content mappable ph-no-capture"
data-depth="2"
data-name="d"
data-path="[0].d"
data-target="mappable"
data-value="{{ $('Set').item.json.d }}"
>
<span />
</span>