JavaScript中[object Object]转普通对象及前端数据传递问题

核心问题分析 #

你的问题分两个关键环节：

1. 重复键YAML文件的解析错误：默认YAML解析器会覆盖重复的node键，导致后续处理的数组结构不符合预期；
2. 前端数据渲染错误：直接将对象转为字符串时，浏览器会默认显示[object Object]，需通过序列化或遍历渲染解决。

第一步：正确解析含重复键的YAML文件 #

普通YAML解析器（如js-yaml）会自动覆盖重复键，需自定义解析规则保留重复的node项为数组元素。以下是基于js-yaml的实现代码：

const yaml = require('js-yaml');
const fs = require('fs');

// 自定义Schema，处理顶层重复的node键，转为数组
const repeatKeySchema = yaml.DEFAULT_SCHEMA.extend([
  new yaml.Type('tag:yaml.org,2002:map', {
    kind: 'mapping',
    construct: (data) => {
      const result = [];
      let currentNodeGroup = {};
      
      data.forEach(([key, value]) => {
        if (key === 'node') {
          // 遇到新的node键，将之前的分组存入数组
          if (Object.keys(currentNodeGroup).length > 0) {
            result.push(currentNodeGroup);
          }
          currentNodeGroup = { [key]: value };
        } else {
          currentNodeGroup[key] = value;
        }
      });
      
      // 存入最后一组数据
      if (Object.keys(currentNodeGroup).length > 0) {
        result.push(currentNodeGroup);
      }
      
      return result.length > 1 ? result : result[0];
    }
  })
]);

// 读取并解析YAML文件
const yamlContent = fs.readFileSync('./your-file.yml', 'utf8');
const parsedData = yaml.load(yamlContent, { schema: repeatKeySchema });
// 解析结果：[{ node: { teste1: 'url1.yml', teste2: 'url2.yml', teste3: '' } }, { node: { teste4: '' } }]

第二步：将数据正确传递到前端并渲染 #

后端传递（以Express为例） #

方式1：模板引擎渲染

直接将处理后的数组传给模板，在模板中遍历渲染：

const express = require('express');
const app = express();
app.set('view engine', 'ejs');

// 假设processedData是organizer.js处理后的对象数组
app.get('/', (req, res) => {
  res.render('index', { data: processedData });
});

方式2：API接口返回JSON

通过接口返回序列化后的JSON数据：

app.get('/api/data', (req, res) => {
  res.json(processedData); // 自动完成JSON序列化
});

前端渲染实现 #

模板引擎渲染（EJS示例）

<!-- 格式化显示完整数据 -->
<h3>完整数据预览</h3>
<pre><%= JSON.stringify(data, null, 2) %></pre>

<!-- 遍历渲染结构化内容 -->
<h3>结构化列表</h3>
<div class="data-list">
  <% data.forEach(group => { %>
    <div class="node-group">
      <% Object.entries(group.node).forEach(([key, value]) => { %>
        <p><strong><%= key %>:</strong> <%= value || '无内容' %></p>
      <% }) %>
    </div>
  <% }) %>
</div>

前端Fetch API获取数据

fetch('/api/data')
  .then(res => res.json()) // 解析JSON字符串为对象
  .then(data => {
    const container = document.getElementById('data-container');
    data.forEach(group => {
      const groupDiv = document.createElement('div');
      groupDiv.className = 'node-group';
      
      Object.entries(group.node).forEach(([key, value]) => {
        const item = document.createElement('p');
        item.textContent = `${key}: ${value || '无内容'}`;
        groupDiv.appendChild(item);
      });
      
      container.appendChild(groupDiv);
    });
  });

关键注意点 #

• 避免直接将对象转为字符串：[object Object]是对象的默认字符串表示，必须通过JSON.stringify()序列化或遍历属性渲染；
• 确保YAML解析后的结构符合预期：先在后端打印parsedData确认是对象数组，再进行后续处理。

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