将ScalaJsValue转换为Twirl模板中的JavaScript对象
Converting Scala JsValue to JavaScript object inside Twirl template
我的问题非常简单。我有一个通过Linkedin的REST API获得的play.api.libs.json.JsValue
Scala对象。
它看起来像这样:
{"apiStandardProfileRequest":{"headers":{"_total":1,"values":[{"name":"x-li-auth-token","value":"name:ry53"}]},"url":"https://api.linkedin.com/v1/people/1WO4xzvPJ1"},"currentShare":{"author":{"firstName":"Christophe","id":"1WO4xzvPJ1","lastName":"Bram"},"comment":"Cruited is searching for a second web developer!","content":{"description":"Cruited is a self-financed startup. We are a team of six, with four nationalities, working from three countries. Two of us share a desk on the fourth floor of a building just in front of the royal castle in Stockholm. One works from home, we’re not..","eyebrowUrl":"https://cruited.com/jobba-med-oss/frontend-developer","resolvedUrl":"https://cruited.com/jobba-med-oss/frontend-developer/","shortenedUrl":"https://lnkd.in/dNk-qZx","submittedImageUrl":"https://cruited.com/app/uploads/2015/09/Slottet_1920.jpg","submittedUrl":"https://cruited.com/jobba-med-oss/frontend-developer","thumbnailUrl":"https://media.licdn.com/media-proxy/ext?w=80&h=100&f=&hash=tEfv4M6YemBquw5%2BAdNMhg355VE%3D&ora=1%2CaFBCTXdkRmpGL2lvQUFBPQ%2CxAVta5g-0R6pgQ4T1hklrq2OoACx9FcIUJLQDWH1GDqo-tSFf3fgZqSDJvbl8Rl5eSUDkBpoP7g","title":"Frontend Web Developer - Cruited"},"id":"s6065129416948744192","source":{"serviceProvider":{"name":"LINKEDIN"}},"timestamp":1446039537000,"visibility":{"code":"anyone"}},"emailAddress":"cbramdit@gmail.com","firstName":"Christophe","formattedName":"Christophe Bram","headline":"Software Architect, Product Designer at Cruited; freelance web developer on the side","id":"1WO4xzvPJ1","industry":"Computer Software","lastName":"Bram","location":{"country":{"code":"se"},"name":"Stockholm, Sweden"},"numConnections":122,"numConnectionsCapped":false,"pictureUrl":"https://media.licdn.com/mpr/mprx/0_oivHPf2fD-dkMRr1HC1BPuE83POoUYr1eGTBPuIrOnoRkVFPQL5Xj2xOfjYq4MA0IhB9yIzGufhD","pictureUrls":{"_total":1,"values":["https://media.licdn.com/mpr/mprx/0_GlrRkpuP6VS9Pa-c8AhzCgylhyANcx-c8tmnCjGxSHKBPY8MGTlchRwpahf"]},"positions":{"_total":2,"values":[{"company":{"id":3185136,"industry":"Human Resources","name":"Cruited","size":"1-10 employees","type":"Privately Held"},"id":658668057,"isCurrent":true,"startDate":{"month":1,"year":2015},"title":"Partner, Software Architect and Product Designer"},{"company":{"name":"8b"},"id":583856605,"isCurrent":true,"startDate":{"month":2,"year":2014},"summary":"Currently building a career platform for Cruited.'n'nRefined the Citizen Hive project requirements into specifications and UI mockups.'n'nFully managed, specified and implemented the Howl at Them web application used by Wolf PAC.","title":"Freelance Web Developer"}]},"publicProfileUrl":"https://www.linkedin.com/pub/christophe-bram/42/64a/26a","siteStandardProfileRequest":{"url":"https://www.linkedin.com/profile/view?id=AAoAAAj-cPIBk82OHE6XPJpm_QgKwVSl5hHf3KQ&authType=name&authToken=ry53&trk=api*a296796*s304357*"}}
linkedinProfile: play.api.libs.json.JsValue
对象在我的Twirl模板中可用。
但我无法将它作为JavaScript对象传递给JavaScript控制器。我试着这样做:
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
CR.MyController(
@Html(linkedinProfile.toString)
);
});
</script>
问题是,这段代码是由Play Framework编译成的:
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
CR.MyController(
"{'"apiStandardProfileRequest'":{'"headers'":{'"_total'":1,'"values'":[{'"name'":'"x-li-auth-token'",'"value'":'"name:ry53'"}]},'"url'":'"https://api.linkedin.com/v1/people/1WO4xzvPJ1'"},'"currentShare'":{'"author'":{'"firstName'":'"Christophe'",'"id'":'"1WO4xzvPJ1'",'"lastName'":'"Bram'"},'"comment'":'"Cruited is searching for a second web developer!'",'"content'":{'"description'":'"Cruited is a self-financed startup. We are a team of six, with four nationalities, working from three countries. Two of us share a desk on the fourth floor of a building just in front of the royal castle in Stockholm. One works from home, we’re not..'",'"eyebrowUrl'":'"https://cruited.com/jobba-med-oss/frontend-developer'",'"resolvedUrl'":'"https://cruited.com/jobba-med-oss/frontend-developer/'",'"shortenedUrl'":'"https://lnkd.in/dNk-qZx'",'"submittedImageUrl'":'"https://cruited.com/app/uploads/2015/09/Slottet_1920.jpg'",'"submittedUrl'":'"https://cruited.com/jobba-med-oss/frontend-developer'",'"thumbnailUrl'":'"https://media.licdn.com/media-proxy/ext?w=80&h=100&f=&hash=tEfv4M6YemBquw5%2BAdNMhg355VE%3D&ora=1%2CaFBCTXdkRmpGL2lvQUFBPQ%2CxAVta5g-0R6pgQ4T1hklrq2OoACx9FcIUJLQDWH1GDqo-tSFf3fgZqSDJvbl8Rl5eSUDkBpoP7g'",'"title'":'"Frontend Web Developer - Cruited'"},'"id'":'"s6065129416948744192'",'"source'":{'"serviceProvider'":{'"name'":'"LINKEDIN'"}},'"timestamp'":1446039537000,'"visibility'":{'"code'":'"anyone'"}},'"emailAddress'":'"cbramdit@gmail.com'",'"firstName'":'"Christophe'",'"formattedName'":'"Christophe Bram'",'"headline'":'"Software Architect, Product Designer at Cruited; freelance web developer on the side'",'"id'":'"1WO4xzvPJ1'",'"industry'":'"Computer Software'",'"lastName'":'"Bram'",'"location'":{'"country'":{'"code'":'"se'"},'"name'":'"Stockholm, Sweden'"},'"numConnections'":122,'"numConnectionsCapped'":false,'"pictureUrl'":'"https://media.licdn.com/mpr/mprx/0_oivHPf2fD-dkMRr1HC1BPuE83POoUYr1eGTBPuIrOnoRkVFPQL5Xj2xOfjYq4MA0IhB9yIzGufhD'",'"pictureUrls'":{'"_total'":1,'"values'":['"https://media.licdn.com/mpr/mprx/0_GlrRkpuP6VS9Pa-c8AhzCgylhyANcx-c8tmnCjGxSHKBPY8MGTlchRwpahf'"]},'"positions'":{'"_total'":2,'"values'":[{'"company'":{'"id'":3185136,'"industry'":'"Human Resources'",'"name'":'"Cruited'",'"size'":'"1-10 employees'",'"type'":'"Privately Held'"},'"id'":658668057,'"isCurrent'":true,'"startDate'":{'"month'":1,'"year'":2015},'"title'":'"Partner, Software Architect and Product Designer'"},{'"company'":{'"name'":'"8b'"},'"id'":583856605,'"isCurrent'":true,'"startDate'":{'"month'":2,'"year'":2014},'"summary'":'"Currently building a career platform for Cruited.'n'nRefined the Citizen Hive project requirements into specifications and UI mockups.'n'nFully managed, specified and implemented the Howl at Them web application used by Wolf PAC.'",'"title'":'"Freelance Web Developer'"}]},'"publicProfileUrl'":'"https://www.linkedin.com/pub/christophe-bram/42/64a/26a'",'"siteStandardProfileRequest'":{'"url'":'"https://www.linkedin.com/profile/view?id=AAoAAAj-cPIBk82OHE6XPJpm_QgKwVSl5hHf3KQ&authType=name&authToken=ry53&trk=api*a296796*s304357*'"}}"
);
});
</script>
因此,基本上,数据是以字符串的形式传递的(注意开头和结尾的"
),最重要的是,包装JSON键和值的双引号用'
转义。
相反,我想要这个:
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
CR.MyController(
{"apiStandardProfileRequest":{"headers":{"_total":1,"values":[{"name":"x-li-auth-token","value":"name:ry53"}]},"url":"https://api.linkedin.com/v1/people/1WO4xzvPJ1"},"currentShare":{"author":{"firstName":"Christophe","id":"1WO4xzvPJ1","lastName":"Bram"},"comment":"Cruited is searching for a second web developer!","content":{"description":"Cruited is a self-financed startup. We are a team of six, with four nationalities, working from three countries. Two of us share a desk on the fourth floor of a building just in front of the royal castle in Stockholm. One works from home, we’re not..","eyebrowUrl":"https://cruited.com/jobba-med-oss/frontend-developer","resolvedUrl":"https://cruited.com/jobba-med-oss/frontend-developer/","shortenedUrl":"https://lnkd.in/dNk-qZx","submittedImageUrl":"https://cruited.com/app/uploads/2015/09/Slottet_1920.jpg","submittedUrl":"https://cruited.com/jobba-med-oss/frontend-developer","thumbnailUrl":"https://media.licdn.com/media-proxy/ext?w=80&h=100&f=&hash=tEfv4M6YemBquw5%2BAdNMhg355VE%3D&ora=1%2CaFBCTXdkRmpGL2lvQUFBPQ%2CxAVta5g-0R6pgQ4T1hklrq2OoACx9FcIUJLQDWH1GDqo-tSFf3fgZqSDJvbl8Rl5eSUDkBpoP7g","title":"Frontend Web Developer - Cruited"},"id":"s6065129416948744192","source":{"serviceProvider":{"name":"LINKEDIN"}},"timestamp":1446039537000,"visibility":{"code":"anyone"}},"emailAddress":"cbramdit@gmail.com","firstName":"Christophe","formattedName":"Christophe Bram","headline":"Software Architect, Product Designer at Cruited; freelance web developer on the side","id":"1WO4xzvPJ1","industry":"Computer Software","lastName":"Bram","location":{"country":{"code":"se"},"name":"Stockholm, Sweden"},"numConnections":122,"numConnectionsCapped":false,"pictureUrl":"https://media.licdn.com/mpr/mprx/0_oivHPf2fD-dkMRr1HC1BPuE83POoUYr1eGTBPuIrOnoRkVFPQL5Xj2xOfjYq4MA0IhB9yIzGufhD","pictureUrls":{"_total":1,"values":["https://media.licdn.com/mpr/mprx/0_GlrRkpuP6VS9Pa-c8AhzCgylhyANcx-c8tmnCjGxSHKBPY8MGTlchRwpahf"]},"positions":{"_total":2,"values":[{"company":{"id":3185136,"industry":"Human Resources","name":"Cruited","size":"1-10 employees","type":"Privately Held"},"id":658668057,"isCurrent":true,"startDate":{"month":1,"year":2015},"title":"Partner, Software Architect and Product Designer"},{"company":{"name":"8b"},"id":583856605,"isCurrent":true,"startDate":{"month":2,"year":2014},"summary":"Currently building a career platform for Cruited.'n'nRefined the Citizen Hive project requirements into specifications and UI mockups.'n'nFully managed, specified and implemented the Howl at Them web application used by Wolf PAC.","title":"Freelance Web Developer"}]},"publicProfileUrl":"https://www.linkedin.com/pub/christophe-bram/42/64a/26a","siteStandardProfileRequest":{"url":"https://www.linkedin.com/profile/view?id=AAoAAAj-cPIBk82OHE6XPJpm_QgKwVSl5hHf3KQ&authType=name&authToken=ry53&trk=api*a296796*s304357*"}}
);
});
</script>
直接在模板中调用控制器会破坏MVC模式。
在你的控制器中,你通常会做一些类似的事情
class FooController() extends Controller {
def index() = Action {
//fetch from linkedin or where ever
val result: JsValue = Json.obj("foo" -> "bar")
Ok(views.html.index(result))
}
}
视图:
@import play.api.libs.json.JsValue
@(result: JsValue)
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
@result
});
</script>
@Html(linkedinProfile.toString)
应该直接生成以下内容:
{"apiStandardProfileRequest":{"headers":{"_total":1,"values":[{"name":"x-li-auth-token","value":"name:ry53"}]},"url":"https://api.linkedin.com/v1/people/1WO4xzvPJ1"},"currentShare":{"author":{"firstName":"Christophe","id":"1WO4xzvPJ1","lastName":"Bram"},"comment":"Cruited is searching for a second web developer!","content":{"description":"Cruited is a self-financed startup. We are a team of six, with four nationalities, working from three countries. Two of us share a desk on the fourth floor of a building just in front of the royal castle in Stockholm. One works from home, we’re not..","eyebrowUrl":"https://cruited.com/jobba-med-oss/frontend-developer","resolvedUrl":"https://cruited.com/jobba-med-oss/frontend-developer/","shortenedUrl":"https://lnkd.in/dNk-qZx","submittedImageUrl":"https://cruited.com/app/uploads/2015/09/Slottet_1920.jpg","submittedUrl":"https://cruited.com/jobba-med-oss/frontend-developer","thumbnailUrl":"https://media.licdn.com/media-proxy/ext?w=80&h=100&f=&hash=tEfv4M6YemBquw5%2BAdNMhg355VE%3D&ora=1%2CaFBCTXdkRmpGL2lvQUFBPQ%2CxAVta5g-0R6pgQ4T1hklrq2OoACx9FcIUJLQDWH1GDqo-tSFf3fgZqSDJvbl8Rl5eSUDkBpoP7g","title":"Frontend Web Developer - Cruited"},"id":"s6065129416948744192","source":{"serviceProvider":{"name":"LINKEDIN"}},"timestamp":1446039537000,"visibility":{"code":"anyone"}},"emailAddress":"cbramdit@gmail.com","firstName":"Christophe","formattedName":"Christophe Bram","headline":"Software Architect, Product Designer at Cruited; freelance web developer on the side","id":"1WO4xzvPJ1","industry":"Computer Software","lastName":"Bram","location":{"country":{"code":"se"},"name":"Stockholm, Sweden"},"numConnections":122,"numConnectionsCapped":false,"pictureUrl":"https://media.licdn.com/mpr/mprx/0_oivHPf2fD-dkMRr1HC1BPuE83POoUYr1eGTBPuIrOnoRkVFPQL5Xj2xOfjYq4MA0IhB9yIzGufhD","pictureUrls":{"_total":1,"values":["https://media.licdn.com/mpr/mprx/0_GlrRkpuP6VS9Pa-c8AhzCgylhyANcx-c8tmnCjGxSHKBPY8MGTlchRwpahf"]},"positions":{"_total":2,"values":[{"company":{"id":3185136,"industry":"Human Resources","name":"Cruited","size":"1-10 employees","type":"Privately Held"},"id":658668057,"isCurrent":true,"startDate":{"month":1,"year":2015},"title":"Partner, Software Architect and Product Designer"},{"company":{"name":"8b"},"id":583856605,"isCurrent":true,"startDate":{"month":2,"year":2014},"summary":"Currently building a career platform for Cruited.'n'nRefined the Citizen Hive project requirements into specifications and UI mockups.'n'nFully managed, specified and implemented the Howl at Them web application used by Wolf PAC.","title":"Freelance Web Developer"}]},"publicProfileUrl":"https://www.linkedin.com/pub/christophe-bram/42/64a/26a","siteStandardProfileRequest":{"url":"https://www.linkedin.com/profile/view?id=AAoAAAj-cPIBk82OHE6XPJpm_QgKwVSl5hHf3KQ&authType=name&authToken=ry53&trk=api*a296796*s304357*"}}
它没有这么做的原因是,我的JsValue
是JsString
,而它本应该是JsObject
。
你问的为什么是JsString
?因为它生来就是Json.toJson(jsonString)
(坏!),而不是Json.parse(jsonString)
(好!)。
相关文章:
- Chrome开发工具(如何知道我在调用哪个javascript对象)
- 循环遍历以数组为值的Javascript对象
- 从ajax请求中获取javascript对象
- 如何从对象的原型方法访问JavaScript对象属性
- 将XML转换为普通的旧JavaScript对象
- 通过引用传递JavaScript对象
- javascript对象操作:根据指定条件选择属性
- Javascript对象类在单击时打开窗口进行颜色选择,并在更改时替换对象背景颜色
- 如何在异步函数中使用javascript对象
- 临时Javascript对象
- 如何在ASP中为用户控件添加Javascript对象网
- 使用数组向下搜索Javascript对象
- Rails将JavaScript对象存储到Model的有效方式
- JavaScript对象不是从原型链继承的
- 如何创建具有默认值的JavaScript对象字段?(AngularJS模型相关)
- SetInterval在javascript对象中表现怪异
- Javascript 对象和 this 关键字
- 如何在不知道关键字的情况下访问javascript对象值
- 在 JavaScript 对象中设置要使用的运算符的属性
- 如何搜索JavaScript对象并更改值