解析 JSONString，然后迭代车把中的数组

Question

我有这样的数据：

{ "data" : [
 {
   "query": "Hello",
   "response": "asad"
 },
{
"query": "Tell Weather dale",
"response": "[{\"datetime\":\"2024-01-26\",\"tempmax\":21.5,\"tempmin\":7,\"temp\":14,\"humidity\":59.2,\"precip\":0,\"precipprob\":0,\"windspeed\":5.8,\"cloudcover\":61.6,\"conditions\":\"Partially cloudy\"},{\"datetime\":\"2024-01-27\",\"tempmax\":23.2,\"tempmin\":11.2,\"temp\":16.3,\"humidity\":38.2,\"precip\":0,\"precipprob\":0,\"windspeed\":9.4,\"cloudcover\":32.5,\"conditions\":\"Partially cloudy\"},{\"datetime\":\"2024-01-28\",\"tempmax\":24,\"tempmin\":11.7,\"temp\":17.2,\"humidity\":39.9,\"precip\":0,\"precipprob\":0,\"windspeed\":10.4,\"cloudcover\":54.9,\"conditions\":\"Partially cloudy\"},{\"datetime\":\"2024-01-29\",\"tempmax\":25,\"tempmin\":12.6,\"temp\":18.2,\"humidity\":42.1,\"precip\":0,\"precipprob\":0,\"windspeed\":9.7,\"cloudcover\":41.3,\"conditions\":\"Partially cloudy\"},{\"datetime\":\"2024-01-30\",\"tempmax\":25.3,\"tempmin\":13.8,\"temp\":18.8,\"humidity\":48.2,\"precip\":0,\"precipprob\":0,\"windspeed\":6.1,\"cloudcover\":66.5,\"conditions\":\"Partially cloudy\"},{\"datetime\":\"2024-01-31\",\"tempmax\":26.2,\"tempmin\":14.6,\"temp\":19.5,\"humidity\":48.4,\"precip\":0,\"precipprob\":0,\"windspeed\":9.4,\"cloudcover\":14.9,\"conditions\":\"Clear\"}]"
}
] }

其中响应可以是普通字符串或 JSONString。我想解析 json 字符串，迭代数组并显示各个键，例如日期时间、临时值等。

我能够解析 JSON，但无法迭代它的车把模板。

有人可以帮助我了解模板和辅助函数应该是什么样子吗？

Answer 1

我觉得我需要说的第一件事是，如果响应对象的某个属性的值可以是字符串或任意形状数据的字符串化 JSON，那么您的团队就做错了。

我认为后端响应需要改进。

但是，为了享受挑战的乐趣，让我们考虑一下如何在模板中解决这个问题。

我不清楚的一件事是，当

response

是字符串化 JSON 时，该 JSON 是否始终具有相同的结构。为简单起见，我假设它始终是一个对象数组。

正如您在评论中所述，当给定的输入不是字符串化 JSON 时，

JSON.parse

将会出错。因此，我们需要使用

try/catch

来捕获该错误，并仅返回未解析的

response

，因为我们假设它是一个字符串。

我们可以创建一个 Block Helper ，它允许我们定义当

response

can 被 JSON 解析时要使用的模板。当无法进行 JSON 解析时，我们的助手将仅返回未更改的

response

。

const template = Handlebars.compile(`
{{#each data}}
  <p>Query: {{query}}</p>
  <p>Response:</p>
  {{#parseResponse response}}
    {{#each this}}
      <ul>
        {{#each this}}
          <li>{{@key}}: {{this}}</li>
        {{/each}}
      </ul>
    {{/each}}
  {{/parseResponse}}
{{/each}}
`);

Handlebars.registerHelper('parseResponse', function (response, options) {
  try {
    return options.fn(JSON.parse(response));
  } catch (err) {
    // console.error(err);
    // We will ignore the error and return `response` below
  }
  
  return response;
});

const data = {
  "data": [{
      "query": "Hello",
      "response": "asad"
    },
    {
      "query": "Tell Weather dale",
      "response": "[{\"datetime\":\"2024-01-26\",\"tempmax\":21.5,\"tempmin\":7,\"temp\":14,\"humidity\":59.2,\"precip\":0,\"precipprob\":0,\"windspeed\":5.8,\"cloudcover\":61.6,\"conditions\":\"Partially cloudy\"},{\"datetime\":\"2024-01-27\",\"tempmax\":23.2,\"tempmin\":11.2,\"temp\":16.3,\"humidity\":38.2,\"precip\":0,\"precipprob\":0,\"windspeed\":9.4,\"cloudcover\":32.5,\"conditions\":\"Partially cloudy\"},{\"datetime\":\"2024-01-28\",\"tempmax\":24,\"tempmin\":11.7,\"temp\":17.2,\"humidity\":39.9,\"precip\":0,\"precipprob\":0,\"windspeed\":10.4,\"cloudcover\":54.9,\"conditions\":\"Partially cloudy\"},{\"datetime\":\"2024-01-29\",\"tempmax\":25,\"tempmin\":12.6,\"temp\":18.2,\"humidity\":42.1,\"precip\":0,\"precipprob\":0,\"windspeed\":9.7,\"cloudcover\":41.3,\"conditions\":\"Partially cloudy\"},{\"datetime\":\"2024-01-30\",\"tempmax\":25.3,\"tempmin\":13.8,\"temp\":18.8,\"humidity\":48.2,\"precip\":0,\"precipprob\":0,\"windspeed\":6.1,\"cloudcover\":66.5,\"conditions\":\"Partially cloudy\"},{\"datetime\":\"2024-01-31\",\"tempmax\":26.2,\"tempmin\":14.6,\"temp\":19.5,\"humidity\":48.4,\"precip\":0,\"precipprob\":0,\"windspeed\":9.4,\"cloudcover\":14.9,\"conditions\":\"Clear\"}]"
    }
  ]
};

const output = template(data);

document.body.innerHTML = output;

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.8/handlebars.min.js"></script>