JSON 数组未正确字符串化答案

【问题标题】：JSON array does not Stringify properlyJSON 数组未正确字符串化
【发布时间】：2019-01-17 11:17:03
【问题描述】：

在我的 Nodejs 站点中，我创建了一个 JSON 数组并将其发送到 angularJs 客户端。然后它显示为 [object, object]。由于这个原因，我使用 JSON.stringify 现在它在 angularJs 客户端中以一种奇怪的方式显示。

NodeJs 端的数组创建，

getAttachments = function () {
        let attach = [];
        workflowSession.files.forEach(file => {
            if (file) {
                const item = {
                    text: file.name,
                    link: workflowSession.metadata.portalBaseUrl + "api/files/" + workflowSession.workflowRef + "@"+ file.name 
                }

                attach.push(item);
            }
        });

        return attach;
    };

当我将控制台日志放在 Nodejs 端时，它显示如下，

[ { text: 'sdee.png',
    link: 'http://localhost:3000/api/files/kYnDsXjyFT@sdee.png' },
  { text: 'wes.png',
    link: 'http://localhost:3000/api/files/kYnDsXjyFT@wes.png' } 
]

但在 AngularJs 客户端中显示为 [object, object]，因此我对上述数组创建方法进行了如下更改，

getAttachments = function () {
        let attach = [];
        workflowSession.files.forEach(file => {
            if (file) {
                const item = {
                    text: file.name,
                    link: workflowSession.metadata.portalBaseUrl + "api/files/" + workflowSession.workflowRef + "@"+ file.name 
                }

                attach.push(item);
            }
        });

        return JSON.stringify(attach);
    };

然后NodeJs端显示console.log的数据如下，

[
  {"text":"sdee.png","link":"http://localhost:3000/api/files/kYnDsXjyFT@sdee.png"},   {"text":"wes.png","link":"http://localhost:3000/api/files/kYnDsXjyFT@wes.png"}
]

但在 AngularJs 端显示如下，

[
{&#34;text&#34;:&#34;wes.png&#34;,&#34;link&#34;:&#34;http://localhost:3000/api/files/saJiCDZPet@wes.png&#34;},{&#34;text&#34;:&#34;ssdd.png&#34;,&#34;link&#34;:&#34;http://localhost:3000/api/files/saJiCDZPet@ssdd.png&#34;}
]

我想迭代这个数组，如下面的 HTML sn-p 所示，但由于格式问题，我不能这样做。 “action.links”是从 Nodejs 端创建的数组。

<md-menu-content>
  <md-menu-item ng-repeat="item in action.links" ng-if="item.link">
    <md-button href="{{item.link}}" target="_blank">
      {{item.text}}
    </md-button>
  </md-menu-item>
</md-menu-content>

我做错了什么？

【问题讨论】：

你如何在 Angular 端记录这个？来自console?
阵列是如何传送到客户端的？你用什么来设置 HTTP 响应体？
另外，关于 Phil 的评论，你能在你的浏览器开发者工具网络面板中查看是如何准确收到响应的吗？这将有助于查明发生不需要的编码的位置（来自 Node 或来自 Angular）
第一个例子应该是函数式的； [object, object] 是控制台中的正确输出，具体取决于您的 console.log 的调用方式。 HTML 是否无法正确解析 object？
@manojb86 究竟是怎样的？你在用res.json(getAttachments())吗？

标签： javascript angularjs json node.js mean-stack

【解决方案1】：

看起来 Angular 端正在对 HTML 进行编码，你可以做的是通过 HTML 解码运行它：

var htmlDecode = function(str) {
    var temp = document.createElement('span');
    temp.innerHTML = str;
    return temp.textContent;
};

var foo = '[{&#34;text&#34;:&#34;wes.png&#34;,&#34;link&#34;:&#34;http://localhost:3000/api/files/saJiCDZPet@wes.png&#34;},{&#34;text&#34;:&#34;ssdd.png&#34;,&#34;link&#34;:&#34;http://localhost:3000/api/files/saJiCDZPet@ssdd.png&#34;}]';

console.log(
    htmlDecode(foo)
);

理想情况下，您首先会阻止它对 HTML 进行编码。如果您能够共享代码的实时版本，则更容易调试为什么会发生这种情况。

【讨论】：

我认为这是解决问题比解决问题更可取的时代之一
@ryanpcmcquen 解码后需要转换回json然后得到预期的数组。
@Phil，我同意，因此我在答案中注明。 @manoj, JSON.parse() 应该把它转换回来。
@ryanpcmcquen 在从这个答案中的给定方法解码后使用 JSON.parse() 。有用。我同意 phill，这是解决问题的方法。

【解决方案2】：

您不需要在 node.js 端对 JS 对象进行字符串化。根据您提供的内容，您在登录控制台时看到的 [object, object] 语法可能没问题。当数组作为对象数组返回时，对数组的迭代是否不起作用？

如果您想在客户端使用console.log 查看数据，请在此处对对象进行字符串化：

console.log(JSON.stringify(action.links));

您将无法遍历 JSON 数组，因为它是一个字符串，需要先解析回一个对象数组。

【讨论】：