JSON Editor displaying a key:value pair as a string when I want it to display as nested JSON

💬 App Building
,
1
  • Goal: JSON Editor needs to display a key:value pair as nested JSON instead of a String

In the screenshot below, you'll see that the table column "Box" is displaying the correct value of what I want me JSON editor to display. My JSON editor component is displaying the key "Box" as a String (with all those backslashes ) which is causing issues for other things. I want the key:value pair in the JSON editor to be something like

"academicPeriod": "",
"box": {
"boxList":
[
{"item": "Please note (...)

2 Likes
2

Okay i think i solved for this, used chatGPT to help me, but please do not hesitate to share your own solution incase i missed something:

const data = {{ query1.data }};

const processData = (items) => {
  if (!items || items.length === 0) {
    return []; // Handle edge case: empty or undefined data
  }

  // Parse the "box" field from the first object (assumes all items share the same value for "box")
  let parsedBox = null;
  if (items[0].box && typeof items[0].box === "string") {
    try {
      parsedBox = JSON.parse(items[0].box); // Parse the shared "box" value once
    } catch (error) {
      console.error("Failed to parse box field:", error);
    }
  }

  // Map over all items, setting the parsed "box" value for each object
  return items.map((item) => {
    const newItem = Object.assign({}, item); // Create a shallow copy
    newItem.box = parsedBox; // Set the shared parsed value
    return newItem;
  });
};

// Process the data and return it
return processData(data);
3

Hi @alessyl, this approach looks excellent.

I find ChatGPT helpful for generating JS code that's often tedious to write manually.

Thank you for sharing your solution! :slightly_smiling_face:

4

just thought I'd offer a slightly more efficient version incase you have lots of data:

const data = {{ query1.data }};

const processData = (items) => {
  if (!items || items.length === 0) {
    return []; // Handle edge case: empty or undefined data
  }

  // Parse the "box" field from the first object (assumes all items share the same value for "box")
  let parsedBox = null;
  let item = items[0]?.box;
  if (typeof firstItemBox === "string") {
    try {
      parsedBox = JSON.parse(item); // Parse the shared "box" value once
    } catch (error) {
      console.error("Failed to parse box field:", error);
      return [];
    }
  }
 
  
  // pre-allocate the array otherwise large data sets will need to re-size the array as items are added, this is super slow.
  const result = new Array(items.length);
  // with large arrays 'for' will be faster than map
  for (let i = 0; i < items.length; i++) {
    const item = items[i];  //reference, no allocation

    if (item.box !== parsedBox) {  // Check if shallow copy is necessary
      const newItem = { ...item }; // spread syntax for a concise shallow copy
      newItem.box = parsedBox;
      result[i] = newItem;
    } else {  // Avoid creating unnecessary copies
      result[i] = item; 
    }
  }
  return result;
}

// Process the data and return it
return processData(data);
2 Likes
6

Thanks! I merged your solution with mine

1 Like