JavaScript中TradingView组件JSON动态配置失败，求解决方案

错误原因 #

TradingView的这个嵌入脚本会把<script>标签内的内容当作JSON格式解析，但JSON不支持JavaScript的变量拼接等动态语法，你写的"symbol": "BIST:" + localStorage.getItem('code')属于JS表达式，不符合JSON规范，所以触发了解析错误。

解决方法 #

你需要用JavaScript动态生成完整的配置JSON，再创建对应的<script>标签插入页面，具体代码如下：

// 获取本地存储的code值
const targetCode = localStorage.getItem('code');
// 构建完整的配置对象
const widgetSettings = {
  symbol: `BIST:${targetCode}`,
  width: "100%",
  locale: "tr",
  colorTheme: "dark",
  isTransparent: false
};
// 创建script标签
const tvScript = document.createElement('script');
tvScript.type = 'text/javascript';
tvScript.src = 'https://s3.tradingview.com/external-embedding/embed-widget-symbol-info.js';
tvScript.async = true;
// 将配置对象转为合法的JSON字符串，写入script标签
tvScript.textContent = JSON.stringify(widgetSettings);
// 把script标签插入到页面（比如body末尾）
document.body.appendChild(tvScript);

内联场景写法 #

如果是在HTML页面中直接实现，可直接在页面的<script>标签内执行上述逻辑，替换原来的静态script标签即可。

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