javascript - JSON 数组未正确字符串化
问题描述
在我的 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 方面显示如下,
[
{"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>
我究竟做错了什么?
解决方案
您不需要在 node.js 端对 JS 对象进行字符串化。根据您提供的内容,[object, object]
您在登录控制台时看到的语法可能没问题。当数组作为对象数组返回时,对数组的迭代是否不起作用?
如果您想查看console.log
在客户端使用的数据,请在此处对对象进行字符串化:
console.log(JSON.stringify(action.links));
您将无法遍历 JSON 数组,因为它是一个字符串,需要先解析回对象数组。
推荐阅读
- java - Angular 项目到 Tomcat 上的 Maven 战争文件
- nginx - Nginx 重定向配置
- ruby-on-rails - load_missing_constant (NameError)
- linux - Sed 在换行后的字符串 Linux 上插入字符串
- nsis - NSIS:MUI_TEXT_X_TITLE 在 gui 上没有改变
- html - Navbar boostrap 4 使用折叠触发栏和导航栏
- sql - PostgreSQL 参考数据可能在一个或另一个表中
- cordova - Firebase Cloud Messaging - 静默通知在后台不起作用(iOS)
- reactjs - 使用 React JS 将数据发布到 API
- c# - VersionControl TFS API 以编程方式获取搁置的项目 c#