Angular 4中通过TypeScript访问JSON对象并在HTML展示的方法

Hey there! Let's break down how to display your CandidateSchema data on an HTML page using TypeScript—super straightforward once you map out the steps. Here's a step-by-step implementation approach:

First, let's create a TypeScript interface to match your JSON structure. This gives you type hints and catches errors early if your data shape changes:

interface CandidateSchemaRow {
  Description: string;
  Experience: number;
  type: string;
}

interface CandidateSchema {
  CandidateSchemaRows: CandidateSchemaRow[];
}

Add a container element in your HTML where we'll inject the rendered select boxes:

<div id="candidate-form-container"></div>

We'll wait for the DOM to fully load, then iterate over your data to generate and append the select boxes to the container. Here's the full logic:

// Wait for the DOM to be ready before making changes
document.addEventListener('DOMContentLoaded', () => {
  // Your raw JSON data (could also fetch this from an API later)
  const candidateData: CandidateSchema = { 
    "CandidateSchemaRows": [ 
      { "Description": "sadasd", "Experience": 1, "type": "selectbox" }, 
      { "Description": "erwerw", "Experience": 2, "type": "selectbox" } 
    ] 
  };

  // Grab the container element from the HTML
  const container = document.getElementById('candidate-form-container');
  if (!container) return; // Exit early if the container doesn't exist

  // Loop through each row in the schema
  candidateData.CandidateSchemaRows.forEach((row, index) => {
    // Create a wrapper div to group the label and select box
    const rowWrapper = document.createElement('div');
    rowWrapper.style.marginBottom = '1.5rem';

    // Create a label for the description
    const label = document.createElement('label');
    label.textContent = row.Description;
    label.htmlFor = `experience-select-${index}`; // Unique ID for each select
    rowWrapper.appendChild(label);

    // Generate the select box (since all rows are type "selectbox")
    if (row.type === 'selectbox') {
      const selectBox = document.createElement('select');
      selectBox.id = `experience-select-${index}`;

      // Add experience options (adjust the range based on your needs)
      for (let year = 1; year <= 5; year++) {
        const option = document.createElement('option');
        option.value = year.toString();
        option.textContent = `${year} year(s) of experience`;
        
        // Set the default selected option to match the row's Experience value
        if (year === row.Experience) {
          option.selected = true;
        }

        selectBox.appendChild(option);
      }

      rowWrapper.appendChild(selectBox);
    }

    // Add the completed row to the container
    container.appendChild(rowWrapper);
  });
});

To run this, you'll need to compile your TypeScript to JavaScript:

• Install TypeScript globally: npm install -g typescript
• Compile your file: tsc your-file-name.ts (this creates a .js file)
• Link the compiled JS in your HTML:

<script src="your-file-name.js"></script>

Alternatively, if you're using a dev server (like Vite or Live Server), you can use ES modules:

• Set "module": "ESNext" in your tsconfig.json
• Link the TypeScript file directly as a module:

<script type="module" src="your-file-name.ts"></script>

Key Notes #

• The interface ensures you're working with the correct data properties—if you accidentally misspell Experience as experience, TypeScript will flag it immediately.
• We're using unique IDs for each select box to keep labels linked properly (accessibility win!).
• You can easily extend this logic to handle other type values (like text inputs) by adding more conditionals in the loop.

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