要在渲染的JSON中显示链接,我希望它们作为名称/值对中的值。
下面的函数将有效的JSON作为参数,并且应返回JSON,并将其值转换为锚标记。
输入的JSON是
{"@context":"/api/contexts/EntryPoint.jsonld","@id":"/api","@type":"EntryPoint","AnomalyCollection":"/api/AnomalyCollection","CommandCollection":"/api/CommandCollection","ControllerLogCollection":"/api/ControllerLogCollection","DroneCollection":"/api/DroneCollection","DroneLogCollection":"/api/DroneLogCollection","HttpApiLogCollection":"/api/HttpApiLogCollection","Location":"/api/Location","MessageCollection":"/api/MessageCollection","dsCollection":"/api/dsCollection"}
{"k": "v"}
应该更改为{"k": <a href="#">v</a>}
我了解更改后的值将不是有效的JSON,那么出路是什么?
function makeEditable(data) {
for (var property in data) {
if (data.hasOwnProperty(property)) {
var tag = $('<a href=#>' + data[property] + '</a>');
data[property] = tag;
}
}
return data;
}
上面的函数而不是给出链接,而是给出下面的渲染。
{
@context : {
0 : "http://localhost:5000/#"
},
@id : {
0 : "http://localhost:5000/#"
},
@type : {
0 : "http://localhost:5000/#"
}
}
我想要的是与此类似的渲染器
答案 0 :(得分:0)
我强烈建议不要操纵您的数据(JSON),并在您使用的HTML或模板上执行DOM实现。
如果您坚持要遵循以下方法:不要用jQuery包装锚标记,而只需将其写为字符串即可。像<a href=#>${data[property]}</a>
答案 1 :(得分:0)
您应将其设为字符串,而不是锚点,否则(由于jQuery)将使data[property]
等于单击锚点时指向的URL,因为: / p>
<a href=#>v</a>
变成这样了:
http://localhost:5000/#
如果您单击链接,将被定向到哪个位置。尝试使用简单的模板文字代替(它比连接字符串还要小和简单):
function makeEditable(data) {
for (var property in data) {
if (data.hasOwnProperty(property)) {
var tag = `<a href="3">${data]property]}</a>`;
data[property] = tag;
}
}
return data;
}
答案 2 :(得分:0)
我意识到修改JSON不起作用,而是决定直接附加到div。
这是修改后的功能:
function makeEditable(data) {
var fdata={};
for (var property in data) {
if (data.hasOwnProperty(property)) {
$("#vocab-json").append('<b>'+property+'</b>'+'<a href="#" id="uri">'+data[property]+'</a><br>');
}
}
return fdata;
}