基于DynamoDB数据的条件判断实现Div动态展示

Got it, let's break down how to make this work for you. Here's a complete, practical solution to show the correct <div> based on the value you get from DynamoDB:

Step 1: Set Up Your HTML Container #

First, add a container to your HTML where we'll inject the dynamic div. This keeps your page structure clean:

<div id="status-display"></div>

Step 2: Complete the DynamoDB Script with Dynamic DOM Logic #

Here's the full JavaScript code, including your existing config plus the logic to render the right div. I've added comments to explain each part:

<script>
// ⚠️ Critical Security Note: Never hardcode AWS access keys in frontend code!
// This exposes your credentials to anyone viewing your page. Use Amazon Cognito
// for temporary user permissions, or proxy requests through your own backend API.
AWS.config.update({
  region: "us-west-2",
  endpoint: 'https://dynamodb.us-west-2.amazonaws.com',
  accessKeyId: "Fakeaccesskey",
  secretAccessKey: "YourFakeSecretKey" // Fill this in, but fix the security issue first!
});

// Initialize the DynamoDB Document Client for easier data handling
const docClient = new AWS.DynamoDB.DocumentClient();

// Define your query parameters (replace with your table and key details)
const queryParams = {
  TableName: "YourTableName", // Your actual DynamoDB table name
  Key: {
    "YourPrimaryKey": "TargetItemID" // The primary key of the item you're fetching
  }
};

// Run the query and handle the result
docClient.get(queryParams, function(err, data) {
  if (err) {
    // Handle errors (e.g., network issues, permission problems)
    console.error("Failed to fetch data:", JSON.stringify(err, null, 2));
    return;
  }

  // Extract the status value from your DynamoDB item (replace with your attribute name)
  const status = data.Item.YourStatusField; 
  const displayContainer = document.getElementById('status-display');

  // Create and append the correct div based on the status
  let statusDiv;
  switch(status) {
    case 'N':
      statusDiv = document.createElement('div');
      statusDiv.className = 'green';
      // Optional: Add text content if needed
      statusDiv.textContent = 'Status: Normal';
      break;
    case 'A':
      statusDiv = document.createElement('div');
      statusDiv.className = 'red';
      statusDiv.textContent = 'Status: Alert';
      break;
    default:
      // Handle unexpected values gracefully
      statusDiv = document.createElement('div');
      statusDiv.textContent = 'Unknown Status';
  }

  displayContainer.appendChild(statusDiv);
});
</script>

Alternative Approach: Toggle Pre-Existing Divs #

If you prefer to have the divs already in your HTML (instead of creating them dynamically), you can toggle their visibility like this:

<!-- Pre-defined divs, hidden by default -->
<div class="green status-div" style="display: none;">Status: Normal</div>
<div class="red status-div" style="display: none;">Status: Alert</div>

<script>
// ... (same DynamoDB config and query logic as above) ...
if (status === 'N') {
  document.querySelector('.green.status-div').style.display = 'block';
} else if (status === 'A') {
  document.querySelector('.red.status-div').style.display = 'block';
}
</script>

Key Tips to Remember #

• Security First: Never expose AWS access keys in frontend code. This is a major security risk—anyone can steal your keys and misuse your AWS resources. Use Amazon Cognito or a backend proxy instead.
• Error Handling: Always account for query errors (network failures, missing items, etc.) to avoid broken behavior on your page.
• Attribute Names: Replace YourStatusField, YourTableName, and YourPrimaryKey with the actual names from your DynamoDB table.

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