如何以json格式显示数据？
Posted
技术标签:
【中文标题】如何以json格式显示数据？【英文标题】：how to display data in json format? 【发布时间】：2017-08-29 03:58:49 【问题描述】：嘿，实际上我是 node 和 angularjs 的新手，我正在 node 和 angularjs 上做一个项目json 格式的数据，但该数据不是正确的 json 格式，这是我从服务器接收的数据
color :
white : &color-white "#FFFFFF"
black : &color-black "#262626"
neutral :
20 : &color-neutral-20 "#222222"
90 : &color-neutral-90 "#EEEEEE"
blue:
50: &color-blue-50 "#0000ff"
90: &color-blue-60 "#3333ff"
red:
50: &color-red-90 "#ff0000"
95: &color-red-90 "#ff8080"
Green:
40: &color-green "#00cc00"
80: &color-green "#99ff99"
Pink:
80: &color-pink "#ff99cc"
30: &color-pink "#ff0080"
Yellow:
70: &color-yellow "#ffff66"
40: &color-yellow "#ffff00"
border:
brand: &color-border-brand "#1589ee"
brand-dark: &color-border-brand-dark "#0070d2"
customer: &color-border-customer "#ff9a3c"
destructive: &color-border-destructive "#c23934"
destructive-hover: &color-border-destructive-hover "#a61a14"
interactive-color :
default: *color-blue-50
dark: *color-blue-60
background-color :
default : *color-white
light : *color-neutral-90
dark : *color-neutral-20
disabled: *color-neutral-90
text-color :
default : *color-neutral-20
on-light : *color-neutral-20
on-dark : *color-white
light : *color-neutral-20
disabled : *color-neutral-20
link :
default : *color-blue-50
on-dark : *color-white
font:
family:
text: &font-family-text "Salesforce Sans"
heading: &font-family-heading "Arial"
weight:
light: &font-weight-light "300"
regular: &font-weight-light "300"
bold: &font-weight-light "300"
size:
xx-small: &font-size-text-xx-small ".625rem FONT_SIZE_1 10px"
x-small: &font-size-text-x-small ".75rem FONT_SIZE_2 12px"
small: &font-size-text-small ".8125rem FONT_SIZE_3 13px"
medium: &font-size-text-medium ".1rem FONT_SIZE_5 16px"
large: &font-size-text-large "1.125rem FONT_SIZE_6 18px"
x-large: &font-size-text-x-large "1.25rem FONT_SIZE_7 20px"
line-height:
heading: &line-height-heading "1.25"
text: &line-height-text "1.5"
reset: &line-height-reset "1"
tab: &line-height-tab "2.5rem 40px"
button: &line-height-button "1.875rem 30px"
button-small: &line-height-button-small "1.75rem 28px"
space :
default : 16px
xxs: 2px
xs: 4px
s: 8px
m: 16px
l: 32px
xl: 64px
inset :
default : 16px 16px 16px 16px
xxs : 2px 2px 2px 2px
xs : 4px 4px 4px 4px
s : 8px 8px 8px 8px
m : 16px 16px 16px 16px
l : 32px 32px 32px
我需要在客户端显示此数据，例如设计令牌格式，例如蓝色、白色、黑色等 这是我接收输出的 angularjs 代码
angular.module('design',[]).controller('designController',
function($scope,$http)
$scope.message="hii";
console.log(":outside");
$http.get('http://rest-
service.guides.spring.io/greeting').then(function(response)
console.log("inside");
$scope.greeting = Json.stringify(response.data);
);
);
这是我的 index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet">
<script
src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js">
</script>
</head>
<body ng-app="design" class="container">
<br/>
<br />
<br />
<div class="row" style="background-color:purple;">
<font color="white">ellucian University</font>
</div>
<br/>
<br/>
<div class="row">
<div class="col-sm-4">
<font color="purple">Design Tokens</font>
</div>
<div class="col-sm-8" align="right">
<input type="button"class="btn btn-primary" value="download" />
<input type="button" class="btn btn-primary" value="Save" />
</div>
<br/>
<br/>
</div>
<div ng-controller="designController" class="row">
<div class="col-sm-4">
<font color="purple">Tokens</font><br/>
<li ng-repeat = "item in greeting track by $index">
item
</li>
</body>
</html>
请帮帮我
【问题讨论】：
如果我理解，您的问题是您无法从 JSON 响应中删除垃圾信息以在客户端显示正确的数据？ 是的，我需要删除那些垃圾，但我不知道如何删除这些垃圾f 什么？你真的看过弦吗？它根本不是 JSON，一点也不是，甚至不是很接近。它是一些包含一些字符的字符串，这些字符也包含在 JSON 字符串中。仅此而已 @devnull69 对，它不是 json 格式。 实际上在服务器端我有一个 .yml 格式的文件，该 .yml 文件转换为 json 所以这是 yml 文件转换为 json 的结果 【参考方案1】：你拥有的是一个 Yaml 文件。
您需要做的是读取它，将其解释为 JS 对象，然后将此 JS 对象转换为您可以发送的 JSON。
'use strict';
const yaml = require('js-yaml'),
fs = require('fs');
Promise.resolve().then(() =>
return new Promise((resolve, reject) =>
fs.readFile('your/yaml/file.yaml', (error, data) =>
if(error)
reject(error);
else
resolve(data);
);
);
).then((data) =>
let doc = yaml.safeLoad(data);
return Promise.resolve(doc);
).then((doc) =>
let json = JSON.stringify(doc);
console.log('JSON: ' + json);
return Promise.resolve();
).then(() =>
console.log('OK');
).catch((error) =>
console.log('Error: ' + error);
);
【讨论】：
以上是关于如何以json格式显示数据？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 thymeleaf 和 Spring Boot 以 json 格式显示用户输入数据