在iron-ajax与dom-repeat中处理text/plain类型JSON响应的问题

这问题我之前帮同事排查过好几次，核心原因很明确：iron-ajax默认会根据响应的MIME类型来处理返回数据——当服务器返回text/plain时，它就直接把响应内容存成字符串了，根本没有解析成JavaScript对象/数组，而dom-repeat只能遍历数组或类数组对象，自然会报错。

给你几个靠谱的解决办法，按优先级排序：

方法1：让iron-ajax强制解析为JSON（最推荐） #

iron-ajax提供了handle-as属性，可以无视服务器返回的MIME类型，强制把响应内容按JSON格式解析。只需要给iron-ajax添加这个属性即可：

<iron-ajax
  url="你的API接口地址"
  handle-as="json"
  last-response="{{response}}"
  auto
></iron-ajax>

<!-- 现在response已经是解析好的数组了，直接用dom-repeat遍历 -->
<template is="dom-repeat" items="{{response}}">
  <div>当前项：[[item.id]] - [[item.title]]</div>
</template>

只要你的API返回的是合法的JSON格式，这个方法一步就能解决问题，完全不需要额外的代码处理。

方法2：手动解析字符串（兼容特殊情况） #

如果方法1没生效（比如API返回的JSON有格式瑕疵，或者iron-ajax的handle-as没起作用），可以手动把字符串转成数组。你可以通过观察者属性或者计算属性来处理：

用观察者属性的示例： #

// 假设这是你的Polymer元素脚本
static get properties() {
  return {
    // 存储iron-ajax返回的原始字符串
    rawResponse: {
      type: String,
      observer: '_onRawResponseChange'
    },
    // 存储解析后的数组
    parsedResponse: {
      type: Array,
      value: () => []
    }
  };
}

_onRawResponseChange(newRaw) {
  if (!newRaw) return;
  
  try {
    // 尝试解析JSON
    this.parsedResponse = JSON.parse(newRaw);
  } catch (error) {
    // 解析失败时做容错处理，避免页面崩溃
    console.error('JSON解析失败:', error);
    this.parsedResponse = [];
  }
}

然后在HTML里绑定解析后的数组：

<iron-ajax
  url="你的API接口地址"
  last-response="{{rawResponse}}"
  auto
></iron-ajax>

<template is="dom-repeat" items="{{parsedResponse}}">
  <div>[[item.content]]</div>
</template>

用dom-repeat直接绑定解析函数（快速测试用） #

如果你只是想快速验证，也可以直接在dom-repeat的items里绑定一个解析函数，但这种方式每次数据变化都会重新执行函数，性能不如观察者属性：

<iron-ajax
  url="你的API接口地址"
  last-response="{{rawResponse}}"
  auto
></iron-ajax>

<template is="dom-repeat" items="{{_parseJSON(rawResponse)}}">
  <div>[[item.name]]</div>
</template>

脚本里定义解析函数：

_parseJSON(rawStr) {
  if (!rawStr) return [];
  try {
    return JSON.parse(rawStr);
  } catch (e) {
    console.error('解析出错:', e);
    return [];
  }
}

为什么你之前的附加函数没效果？ #

大概率是你的函数没有正确返回解析后的数组——要么是没做异常处理（比如JSON解析失败直接返回undefined），要么是函数逻辑里没有把字符串转成数组。用上面的方法补全异常处理和解析逻辑后，应该就能正常工作了。

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