在EJS文件中通过JavaScript访问JSON遇TypeError问题求助

Hey there, let's break down why you're hitting that TypeError and how to fix it. The error at line 32 of your home.ejs means you're trying to access a property that doesn't exist (or is undefined/null) when your template renders. Here are the most common issues and actionable fixes:

1. First, Verify data Is Actually Passed to Your Template #

Double-check your Node.js server code to ensure you're correctly passing the API response data to the EJS render function. Since API requests are asynchronous, you must wait for the response before rendering the template—otherwise, you'll end up passing undefined to data.

For example, using fetch with async/await, your server code should look like this:

app.get('/', async (req, res) => {
  try {
    // Wait for the API response to resolve
    const apiRes = await fetch('https://your-movie-api-endpoint.com');
    const data = await apiRes.json();
    
    // Pass the fetched data to EJS
    res.render('home', { data });
  } catch (err) {
    console.error('API request failed:', err);
    // Pass a safe empty structure to avoid template crashes
    res.render('home', { data: { Search: [] } });
  }
});

2. Safely Check for the Search Array Before Accessing It #

API responses don't always match your expected structure—maybe the request failed, there are no results, or the API returned an error message instead of movie data.

Instead of directly accessing data["Search"][0], add checks to ensure each property exists first. Update your EJS code like this:

<!-- home.ejs -->
<% if (data && data.Search && data.Search.length > 0) { %>
  <!-- Only render if Search array exists and has items -->
  <%= JSON.stringify(data.Search[0]) %> <!-- Use this to see the full object structure first -->
  <!-- Once you know the structure, access specific properties like: <%= data.Search[0].Title %> -->
<% } else { %>
  <!-- Handle empty or error cases gracefully -->
  <p>No movie results found, or there was an error fetching data.</p>
<% } %>

This prevents the TypeError by ensuring you only access Search[0] when all parent properties are valid.

3. Handle API Error Responses #

Many movie APIs return an error object when something goes wrong (e.g., invalid API key, no results). For example:

{"Response":"False","Error":"Invalid API key"}

In this case, there's no Search field at all. Add handling for this in your server code:

app.get('/', async (req, res) => {
  try {
    const apiRes = await fetch('https://your-movie-api-endpoint.com');
    const data = await apiRes.json();
    
    if (data.Response === 'False') {
      // Pass the error message to the template
      res.render('home', { data: { Search: [] }, error: data.Error });
    } else {
      res.render('home', { data });
    }
  } catch (err) {
    res.render('home', { data: { Search: [] }, error: 'Failed to connect to the API' });
  }
});

Then display the error in your EJS:

<% if (error) { %>
  <p class="error">Error: <%= error %></p>
<% } else if (data && data.Search && data.Search.length > 0) { %>
  <%= data.Search[0].Title %> <!-- Example: Render the first movie's title -->
<% } else { %>
  <p>No movies found.</p>
<% } %>

Quick Debugging Tip #

Add a console.log in your EJS to see exactly what data contains when the template renders:

<% console.log('Data passed to EJS:', data) %>

Check your server's terminal output—this will tell you if data is undefined, if Search is missing, or if the array is empty.

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