Angular2中Ag-grid Master Detail遍历JSON数据遇问题求助

Let's break down your two main issues and fix them step by step:

1. Why your initial for...of loop didn't run #

Looking at your JSON structure, masterdetail is a JavaScript object (not an array):

"masterdetail": {
  "child1": { "name": "I AM", "age": "1" },
  "child2": { "name": "YOU ARE", "age": "2" },
  "child3": { "name": "HE IS", "age": "3" }
}

The for...of loop only works with iterable values like arrays, strings, or Map/Set objects. Plain objects aren't iterable by default, so your loop never executed.

2. Why JSON.parse threw a SyntaxError #

The error Unexpected token o in JSON at position 1 happens because params.data.masterdetail is already a parsed JavaScript object, not a raw JSON string. When you pass an object to JSON.parse(), it first converts the object to the string [object Object]—the first character is "o", which is invalid JSON syntax, hence the error.

Correct Implementation #

To properly traverse the masterdetail object, use one of these approaches to iterate over its keys, values, or entries:

Option 1: Iterate over object values (direct access to child objects) #

Use Object.values() to get an array of the child objects, then loop through them with for...of:

template: function(params) {
  console.log('datas ', params.data.masterdetail);
  // Get all child objects from masterdetail
  const childObjects = Object.values(params.data.masterdetail);
  
  let templateContent = '';
  for (const child of childObjects) {
    console.log('Child name:', child.name, 'Age:', child.age);
    // Build your template content here
    templateContent += `<div>Name: ${child.name}, Age: ${child.age}</div>`;
  }

  return `<div class="aggrid--full-row-container">
            <div ref="eDetailGrid"></div>
            ${templateContent}
          </div>`;
}

Option 2: Iterate over object keys and values together #

Use Object.entries() to get key-value pairs, which is useful if you need to access the child keys (like "child1", "child2"):

template: function(params) {
  console.log('datas ', params.data.masterdetail);
  let templateContent = '';
  
  for (const [childKey, childData] of Object.entries(params.data.masterdetail)) {
    console.log('Child key:', childKey, 'Data:', childData);
    templateContent += `<div>${childKey}: Name: ${childData.name}, Age: ${childData.age}</div>`;
  }

  return `<div class="aggrid--full-row-container">
            <div ref="eDetailGrid"></div>
            ${templateContent}
          </div>`;
}

Option 3: Use for...in loop (traditional object iteration) #

If you prefer a more traditional approach, use for...in with a check for own properties to avoid inherited properties:

template: function(params) {
  console.log('datas ', params.data.masterdetail);
  let templateContent = '';
  
  for (const childKey in params.data.masterdetail) {
    // Ensure we only iterate over the object's own properties
    if (params.data.masterdetail.hasOwnProperty(childKey)) {
      const childData = params.data.masterdetail[childKey];
      console.log('Child key:', childKey, 'Data:', childData);
      templateContent += `<div>${childKey}: ${childData.name} (${childData.age})</div>`;
    }
  }

  return `<div class="aggrid--full-row-container">
            <div ref="eDetailGrid"></div>
            ${templateContent}
          </div>`;
}

Quick Notes: #

• Always confirm the type of params.data.masterdetail first with console.log(typeof params.data.masterdetail)—it should return object, not string.
• I fixed the unclosed <div ref="eDetailGrid" tag in your original template string, which would have caused rendering issues.

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