Vue.js组件内渲染组件及JSON转HTML系统报错求助

Hey Jeroen, let’s break down how to fix and optimize your JSON-to-HTML converter. I’ve built a few of these tools over the years, so here’s what I’d recommend:

First: Nail Down the Exact Error #

Before diving into fixes, capture the full error message from your console—this is the fastest way to pinpoint the issue. Common triggers include:

• Malformed JSON (missing commas, unquoted keys, or trailing commas that break parsing)
• Trying to access undefined properties on your data object (e.g., data.content when content doesn’t exist)
• Mismatched data types (like iterating over a non-array value in your JSON structure)

Quick Fixes for Common Conversion Bugs #

1. Validate JSON Before Parsing #

Add a safety net to catch invalid JSON early, so you don’t pass broken data to your conversion logic:

function safeParseJson(jsonString) {
  try {
    return JSON.parse(jsonString);
  } catch (err) {
    console.error("Invalid JSON input:", err.message);
    return null; // Or return a fallback structure to keep your app running
  }
}

2. Safely Access data Properties #

Avoid "Cannot read property of undefined" errors with optional chaining and nullish coalescing:

// Instead of risky direct access like data.header.title
const pageTitle = data?.header?.title ?? "Default Page Title";

3. Build HTML Safely (Avoid String Concatenation) #

String-based HTML building is messy and risky for XSS attacks. Use DOM methods or a recursive function to build elements properly:

function jsonToElement(jsonNode) {
  const element = document.createElement(jsonNode.tag);

  // Add attributes if present
  if (jsonNode.attrs) {
    Object.entries(jsonNode.attrs).forEach(([key, value]) => {
      element.setAttribute(key, value);
    });
  }

  // Add text content
  if (jsonNode.text) {
    element.textContent = jsonNode.text;
  }

  // Recursively add child elements
  if (jsonNode.children && Array.isArray(jsonNode.children)) {
    jsonNode.children.forEach(child => {
      element.appendChild(jsonToElement(child));
    });
  }

  return element;
}

Scalability & Optimization Tips #

• Cache Parsed JSON: If you’re reusing the same JSON input, cache the data object to avoid re-parsing it every time.
• Enforce JSON Structure: Use TypeScript or JSDoc annotations to define your expected JSON schema—this catches mismatches during development.
• Handle Edge Cases: Add fallback logic for empty arrays, null values, or unexpected keys in your JSON to prevent crashes.

Example Working Workflow #

Here’s a minimal, error-resistant example to test with:

// Sample valid JSON input
const sampleJson = `{
  "tag": "section",
  "attrs": { "class": "card" },
  "children": [
    { "tag": "h2", "text": "JSON to Demo" },
    { "tag": "p", "text": "This element was built from JSON!" }
  ]
}`;

// Parse and convert
const data = safeParseJson(sampleJson);
if (data) {
  const htmlElement = jsonToElement(data);
  document.body.appendChild(htmlElement);
}

内容的提问来源于stack exchange，提问作者Jeroen