Question

实际上我是node和angularjs的新手，我正在节点和angularjs做一个项目我有一个客户端和服务器节点服务器在端口3001上运行，客户端运行在3000上每当我运行我的服务器我会得到一个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>

请帮我解决这个问题

Answer 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格式显示数据？

1 个答案: