使用JSON文件数据定义变量时遇Undefined及语法错误求助

Hey there! Let's work through your issues step by step—you've got a syntax error stopping your code cold, plus variable undefined problems, and we need to pull that "150gsm" title from your JSON data. Let's break it down:

1. First: Fix the options Object Syntax Error #

That Uncaught SyntaxError: Unexpected token is the root cause here. If the JavaScript engine can't parse your options object correctly, every variable that depends on it will end up undefined—no surprise there! Common mistakes that trigger this error:

• Forgetting to wrap JSON keys in double quotes (JSON requires all property names to be quoted)
• Trailing commas at the end of object/array entries
• Mismatched single/double quotes in strings

Example of a valid options structure #

If you're defining it directly in JS:

const options = {
  "cover-silk": ["150gsm-silk-cover"]
};

If loading from an external JSON file, make sure the file itself is valid JSON (use a tool like JSONLint to check), then load it properly:

// Browser environment
fetch('your-options-file.json')
  .then(res => res.json())
  .then(options => {
    // Handle your data here—don't access options outside this callback!
  })
  .catch(err => console.error('Failed to load JSON:', err));

// Node.js environment
const options = require('./your-options-file.json');

2. Troubleshooting Undefined Variables #

Even after fixing the syntax error, variables might still show up as undefined if:

• You're accessing variables before asynchronous JSON data finishes loading (always handle async data in callbacks or use async/await)
• You're using dot notation for properties with hyphens (like cover-silk)—switch to bracket notation instead:

  // ❌ Wrong: Dot notation fails with hyphenated keys
  const coverData = productData.cover-silk;
  
  // ✅ Correct: Use bracket notation
  const coverData = productData["cover-silk"];
  

• Your productData object doesn't have the structure you expect—use console.log(productData) to inspect its actual shape.

3. Extracting childTitle = "150gsm" #

Once you can access productData and its options correctly, grabbing the target title is simple. Here's how to do it, assuming your productData structure includes the cover-silk entry:

// Example productData structure
const productData = {
  // Other product config...
  options: {
    "cover-silk": ["150gsm-silk-cover"]
  }
};

// Step 1: Get the target string from the array
const coverOptionString = productData.options["cover-silk"][0]; // Returns "150gsm-silk-cover"

// Step 2: Split the string and grab the first segment
const childTitle = coverOptionString.split('-')[0]; // Splits into ["150gsm", "silk", "cover"], takes first item

console.log(childTitle); // Output: "150gsm"

Quick Pro Tips #

• Always log intermediate values (like console.log(productData.options)) to confirm you're accessing the right data
• If working with async data, wrap your logic in async/await to avoid race conditions:

  async function loadProductData() {
    const res = await fetch('your-product-data.json');
    const productData = await res.json();
    // Run your title extraction logic here
  }
  loadProductData();
  

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