2016-06-20 167 views
2

我有我们的工作人员在一个JSON文件中,并有想到与ES6类使用该数据的想法。我对此的工作越多,我越觉得自己可能错过了一些东西。我在这的CoffeeScript工作这样:将JSON映射到ES6类

fetch = require('node-fetch') 
domain = 'domain.com' 
apiSrc = 'api.domain.com' 
slug = 'people' 

class Person 
    constructor: (json) -> {name: @name, title: @title, school: @school, bio: @bio} = json 
    email: (username) -> 
    username.replace(/\s/, '.').toLowerCase() + '@' + domain 
    profile: -> 
    content = [] 
    if this.name then content.push("#{@name}") 
    if this.title then content.push("#{@title}") 
    if this.school then content.push(school) for school in "#{@school}" 
    if this.bio then content.push("#{@bio}") 
    if this.name then content.push(this.email("#{@name}")) 
    content.join('') 

fetch('http://' + apiSrc + '/' + slug + '.json') 
    .then((response) -> response.json()) 
    .then((api) -> 
    content = [] 
    group = [] 
    group.push(new Person(them)) for them in api[slug] 
    for them, index in group 
     content.push(them.profile()) 
     console.log(content.join('')) 
) 

但我认为这将是更好的,如果我可以把它转换为ES6。我知道用例很简单,并且类肯定不是必需的,因为我只是使用数据进行模板化,但是为了学习,我试图做到这一点。我是否以这种错误的方式去做?现在,我觉得应该有办法让我把所有的“人”放回Person课。但是,我可以想出如何做到这一点的唯一方法是运行for循环,然后将其写入文档。

class Person { 
    constructor(data) { ({name: this.name, title: this.title, school: this.school, bio: this.bio, email: email(this.name)} = data); } 
    email(username) { 
    return username.replace(/\s/, '.').toLowerCase() + '@' + location.hostname.replace(/[^\.\/\@]+\.[^\.\/]+$/, ''); 
    } 
    profile() { 
    return `${this.name} ${this.title}`; 
    } 
} 

var apiSrc = 'api.domain.com'; 
var slug = 'people'; 
fetch(`http://${apiSrc}/${slug}.json`) 
    .then(function(response) { return response.json() }) // .then(response => response.json()) 
    .then(function(api) { 
    var content = []; 
    var group = []; 
    for (var i = 0; i < api[slug].length; i++) { var them = api[slug][i]; new Person(them); } 
    for (var i = 0; index < group.length; i++) { 
     var them = group[i]; 
     content.push(them.profile()); 
     console.log(content.join('')); 
    } 
    }); 

我的ES6转换实际上现在还没有工作。 API返回JSON,但之后会变得混乱。任何建议都会非常有用,因为我试图让自己更好地成为一名编码人员,希望这种例子能够帮助其他人在真实用例中学习类。

+0

我不明白你的意思“*我觉得应该是返回所有的方式‘人’,我投入了'Person'类*” 。你做得很好,有(也应该是)无法收集所有类的实例。你可以返回你放在'group'数组中的所有人。这正是它应该如何工作。 – Bergi

+0

因为我没有类的经验,所以我认为有某种类型的返回(像这样做)Object.getClassEntries(allthePeople.constructor())。当我返回'group'并且它工作时,我注意到构造函数似乎对输出没有任何影响。所以我认为如果构造函数没有做任何事情,我必须做错事。 – BarryMode

+0

我不确定你的预期会有什么影响。你的ES6类与你的CS类非常相似(不考虑'profile'返回值)。你期望的行为有什么不同? – Bergi

回答

5

您可以尝试使用JSON.parse的参数reviver。下面是一个简单的例子:

class Person { 
    // Destructure the JSON object into the parameters with defaults 
    constructor ({name, title, school=[]}) { 
    this.name = name 
    this.title = title 
    this.school = school 
    } 
} 

var api = JSON.parse(a, function (k,v) { 
    // Is this a new object being pushed into the top-level array? 
    if (Array.isArray(this) && v.name) { 
    return new Person(v) 
    } 
    return v 
}) 

var group = api["people/administration"] 
+0

谢谢,起初我以为这不起作用,因为我的浏览器有一些兼容性问题,你大多只是给了我一个开始的地方。然而,过了一段时间后,我能够实现这个总体思路,从我以前的两个循环中节省了大量的迭代。 – BarryMode