我目前正在开发一个快速站点,该站点可以从各种Web服务调用中获取内容和数据。用于呈现网站大型菜单的网站导航数据来自端点,该端点发送嵌套的json结果集,其中包含导航部分用于呈现视图的结构hrefs,titles。
这是一个缩短的例子:
{
"results": [
{
"title": "My Cool Site",
"contents": [
{
"title": "Fruits",
"contents": [
{
"title": "index",
"path": "/my-cool-site/fruits",
"inode": "fc5dba53-b925-4933-869b-e8c68c89e8ab",
"href": "/my-cool-site/fruits/index.html"
},
{
"title": "Apples",
"path": "/my-cool-site/fruits/apples",
"inode": "e67c34bb-9b1a-4c1b-8beb-df986827be27",
"href": "/my-cool-site/fruits/apples.html"
},
{
"title": "Bananas",
"path": "/my-cool-site/fruits/bananas",
"inode": "e67c34bb-9b1a-4c1b-8beb-df986827be27",
"href": "/my-cool-site/fruits/bananas.html"
}
],
"path": "/my-cool-site/fruits",
"inode": "89d90234-f955-4726-9116-a599b8c92138",
"href": "/my-cool-site/fruits"
},
{
"title": "Vegetables",
"contents": [
{
"title": "index",
"path": "/my-cool-site/vegetables",
"inode": "57d1af70-a674-4ec3-965a-7eb0e0da3c75",
"href": "/my-cool-site/vegetables/index.html"
},
{
"title": "Broccoli",
"path": "/my-cool-site/vegetables/broccoli",
"inode": "57d1af70-a674-4ec3-965a-7eb0e0da3c75",
"href": "/my-cool-site/vegetables/broccoli.html"
},
{
"title": "Brussel Sprouts",
"path": "/my-cool-site/vegetables/brussel-sprouts",
"inode": "57d1af70-a674-4ec3-965a-7eb0e0da3c75",
"href": "/my-cool-site/vegetables/brussel-sprouts.html"
},
],
"path": "/my-cool-site/vegetables",
"inode": "89d90234-f955-4726-9116-a599b8c92138",
"href": "/my-cool-site/vegetables"
}
]
}
]
}
生成导航树的服务用于多个网站,因此您可以看到对于某些数据,例如' href':这些值包含' / my-cool-的上下文路径现场'我想从导航中删除。例如,当我渲染导航链接时,苹果节点应该有一个 href =' /fruits/apples.html' 而不是' / my-cool -site / fruits / apples.html' 那么,无论它们出现在哪里,我如何更换href值?
如何才能成为最佳方法?在我的控制器/路由中,我正在调用获取数据,然后将导航对象传递给我的视图。
client.get(navEndPointUrl, function(nav, response) {
res.render('templateName', {
nav: nav
});
});
我是node / express的新手,所以我正在寻找最佳处理方法的示例。在视图中处理它?将nav对象传递给lodash / underscore函数?对于后者,当它出现在许多不同的嵌套位置(例如,这些链接中的一些可能在json中的4-5个嵌套节点下)时,我在查找大海捞针时遇到了麻烦,并且还需要返回整个json对象,而不仅仅是它的一部分。是否最好使用JSON.parse与某种正则表达式?我不知道,我对这个有点过头了。
为了记录,我预计这个项目会有各种各样的项目,所以任何关于使这个项目成为更通用的解决方案的指导都将非常感激。
答案 0 :(得分:1)
从/my-cool-site
和path
对象值中删除href
的出现次数。
function formatResults(data, path, keys) {
function format(data) {
var result = {}
if (_.isObject(data)) {
_.forOwn(data, function (value, key) {
if (_.contains(keys, key)) {
value = value.replace(path, '');
}
result[key] = format(value);
});
} else if (_.isArray(data)) {
result = _.map(array, format);
} else {
result = data;
}
return result;
}
return format(data);
}
var formattedResults = formatResults(json, '/my-cool-site', ['path', 'href']);
console.log(formattedResults);
<强> http://jsfiddle.net/moogs/sq1qeojp/1/ 强>
像在平常模板中一样迭代结果对象。
答案 1 :(得分:0)
<强>车把:强>
Handlebars可能非常合适,利用帮助程序和/或部分功能来处理您的g.adjL
属性。您的代码可能如下所示:
href
哪个输出:
var Handlebars = require('handlebars');
Handlebars.registerHelper('relative_to', function(rootPath) {
var relativePath = this.href;
if (relativePath.indexOf(rootPath) === 0) {
relativePath = relativePath.substr(rootPath.length);
}
return new Handlebars.SafeString(relativePath);
});
var context = {
contents: [{
"title": "index",
"path": "/my-cool-site/fruits",
"inode": "fc5dba53-b925-4933-869b-e8c68c89e8ab",
"href": "/my-cool-site/fruits/index.html"
}]
};
var source = "{{#contents}}<a href={{relative_to '/my-cool-site'}}>{{title}}</a>{{/contents}}";
var template = Handlebars.compile(source);
console.log(template(context));
<强> Dust.js:强>
看起来Dust.js在过滤器的形式中具有类似的功能:http://www.dustjs.com/docs/filter-api/和助手:http://www.dustjs.com/guides/dust-helpers/如果你想指定参数。
Dust.js真的很不错:
<a href=/fruits/index.html>index</a>
更新:看起来Dust.js甚至可以从数据上下文中插入辅助参数。因此,建立上面的代码可以做到这样的事情:
function relativeTo(chunk, context, bodies, params) {
return chunk.tap(function(data) {
var relativePath = data;
if (relativePath.indexOf(params.path) === 0) {
relativePath = relativePath.substr(params.path.length);
}
return relativePath;
}).render(bodies.block, context).untap();
}
dust.helpers.relativeTo = relativeTo;
var data = {
"contents": [{
"title": "index",
"href": "/my-cool-site/fruits/index.html"
}]
};
var source = '{#contents}<a href="{@relativeTo path="/my-cool-site"}{href}{/relativeTo}">{title}</a>{/contents}';
var compiled = dust.compile(source, "intro");
dust.loadSource(compiled);
dust.render("intro", data, function(err, out) {
if (err) throw err;
console.log(out);
});
那太棒了:))