JSON数组无法正确字符串化

时间:2018-08-09 22:03:37

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

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

在NodeJ端创建数组,

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侧面,它显示如下,

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

我想要迭代此数组,如下面的HTML代码片段所示,但是由于这种格式问题,我不能这样做。 “ 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>

我在做什么错了?

2 个答案:

答案 0 :(得分:0)

好像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编码。如果您能够共享代码的实时版本,则调试发生这种情况的原因将更加容易。

答案 1 :(得分:0)

您不需要在node.js端对JS对象进行字符串化处理。根据您提供的内容,登录控制台时看到的@Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.custom_actionbar_item, menu); return true; } 语法可能没问题。作为对象数组返回时,数组上的迭代不起作用吗?

如果您想在客户端使用[object, object]来查看数据,请在此处对对象进行字符串化处理:

console.log

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