如何将JSON点数据导入JavaScript并在JsFiddle中生成表格

Got it, let's walk through how to build this table import feature in JSFiddle using plain JavaScript. We'll create a simple interface to upload your JSON file, parse its data, and render a table showing the Id, Longitude, Latitude, and FID for each point.

Step 1: Set Up the HTML Structure #

First, we need a file input to let you select your JSON file, plus a container where the generated table will appear. Add this to the HTML panel in JSFiddle:

<input type="file" id="jsonFileInput" accept=".json">
<div id="tableContainer"></div>

Step 2: Add Basic CSS (Optional but Clean) #

To make the table look readable, throw in some simple styling in the CSS panel:

table {
  border-collapse: collapse;
  margin-top: 20px;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}

Step 3: Write the JavaScript Logic #

This is where we handle file uploads, parse the JSON, and build the table dynamically. Add this to the JavaScript panel:

// Grab references to our HTML elements
const fileInput = document.getElementById('jsonFileInput');
const tableContainer = document.getElementById('tableContainer');

// Listen for when a file is selected
fileInput.addEventListener('change', (e) => {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  // Read the file content as text
  const reader = new FileReader();
  reader.onload = (event) => {
    try {
      // Parse the JSON string into a JavaScript object
      const jsonData = JSON.parse(event.target.result);
      const pointFeatures = jsonData.features;

      // Handle empty data case
      if (!pointFeatures || pointFeatures.length === 0) {
        tableContainer.innerHTML = '<p>No point data found in the JSON file.</p>';
        return;
      }

      // Extract column names from the first feature's attributes
      const columnNames = Object.keys(pointFeatures[0].attributes);
      
      // Create the table element
      const table = document.createElement('table');
      
      // Build the table header
      const headerRow = document.createElement('tr');
      columnNames.forEach(col => {
        const headerCell = document.createElement('th');
        headerCell.textContent = col;
        headerRow.appendChild(headerCell);
      });
      table.appendChild(headerRow);
      
      // Build rows for each point feature
      pointFeatures.forEach(feature => {
        const dataRow = document.createElement('tr');
        columnNames.forEach(col => {
          const dataCell = document.createElement('td');
          dataCell.textContent = feature.attributes[col];
          dataRow.appendChild(dataCell);
        });
        table.appendChild(dataRow);
      });
      
      // Add the finished table to the page
      tableContainer.innerHTML = '';
      tableContainer.appendChild(table);

    } catch (error) {
      // Handle invalid JSON gracefully
      tableContainer.innerHTML = `<p>Error parsing JSON: ${error.message}</p>`;
    }
  };

  reader.readAsText(selectedFile);
});

Key Details Explained #

• File Handling: The change event listener triggers when you pick a file, and FileReader converts the file content into a string we can parse.
• JSON Parsing: We target the features array in your Esri-style JSON, since that's where all your point attributes live.
• Dynamic Table Build: We pull column names directly from the first feature's attributes object—so this code will automatically adapt if you add more fields later.
• Error Handling: The try/catch block catches any issues with invalid JSON files, so you get a clear message instead of a broken page.

Testing in JSFiddle #

1. Paste the HTML, CSS, and JS into their respective panels.
2. Click "Run" to launch the demo.
3. Use the file input to select your JSON file—your table will pop up right away.

This setup gives you a solid base to extend later when you need to create new features and export updated JSON.

内容的提问来源于stack exchange，提问作者Irini K.