如何构建符合Date Dropper要求的定价数据结构并解决读取报错

核心问题定位 #

你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'price')错误，本质是PHP生成的JS对象结构和Date Dropper插件期望的格式不匹配。先明确硬编码时的正确数据结构（插件能正常识别的格式）：

// 硬编码的有效定价数据示例
const validPricingData = {
  "2024-05-10": { price: 199 },
  "2024-05-11": { price: 249 },
  "2024-05-12": { price: 179 }
};

插件要求数据是以YYYY-MM-DD格式日期为键，每个键对应一个包含price属性的对象的结构。

步骤1：PHP端生成符合要求的JSON数据 #

从phpMyAdmin数据库查询数据后，需要严格按照上述结构构建数组，再转为JSON输出：

<?php
// 数据库连接（根据实际配置修改）
$conn = mysqli_connect("localhost", "你的用户名", "你的密码", "数据库名");

// 查询数据，确保日期字段格式为YYYY-MM-DD
$sql = "SELECT date_field, price_field FROM pricing_table";
$result = mysqli_query($conn, $sql);

$pricingData = [];
while ($row = mysqli_fetch_assoc($result)) {
    // 以日期为键，将价格包装为带price属性的数组
    $pricingData[$row['date_field']] = ['price' => (int)$row['price_field']];
}

// 输出标准JSON（必须确保无额外输出，比如空格、HTML代码）
header('Content-Type: application/json');
echo json_encode($pricingData);

mysqli_close($conn);
?>

步骤2：前端JS加载并传入插件 #

通过AJAX获取PHP生成的JSON，直接传入Date Dropper的pricing配置项：

// 从PHP接口获取定价数据
fetch('你的php文件路径.php')
  .then(res => res.json())
  .then(pricingData => {
    // 初始化Date Dropper
    $('#目标日历元素ID').dateDropper({
      // 其他插件配置项（比如日期范围、样式等）
      pricing: pricingData // 传入正确格式的定价数据
    });
  })
  .catch(err => console.log('数据加载失败:', err));

关键排查点 #

• 检查PHP返回的JSON格式：在浏览器开发者工具的Network面板中查看接口响应，确认结构和硬编码示例完全一致
• 验证数据库日期格式：必须是YYYY-MM-DD，否则插件无法匹配日期键
• 确保PHP无额外输出：如果PHP文件中有echo调试语句、空格或HTML代码，会导致JSON解析错误
• 前端打印验证：在.then中添加console.log(pricingData)，确认每个日期键对应的对象都包含price属性

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