Javascript 如何在 JSON 脚本中添加链接/href/超链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42927933/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I add a link/href/hyperlink in JSON script
提问by Mustafa Coskun
I want to create a dynamic array/script and I need to add some link in my JSON return so that, I can create a long array which inculude dynamic list or sources with a prepared JSON file.
我想创建一个动态数组/脚本，我需要在我的 JSON 返回中添加一些链接，以便我可以创建一个长数组，其中包含动态列表或带有准备好的 JSON 文件的源。
<table id="userdata" border="5">
<th>Revision Date</th>
<th>Document Name</th>
<th>Department </th>
<th>Description</th>
<th>Link</th>
</table>
var data = {
"person": [{
"revisiondate": "21 April 2016",
"documentname": "1658MC",
"department": "Sales",
"description": "Available",
"link": "href=1658MC.pdf"
}, {
"revisiondate": "16 April 2016",
"documentname": "VCX16B",
"department": "Enginnering",
"description": "Not Available",
"link": "href=VCX16B.pdf"
}, {
"revisiondate": "15 March 2016",
"documentname": "AB36F",
"department": "Custumer Services",
"description": "Not Available",
"link": "href=AB36F.pdf"
}, {
"revisiondate": "12 Agust 2016",
"documentname": "FC25D",
"department": "Technical Support",
"description": "Not Available",
"link": "href=FC25D.pdf"
}]
}
//$.getJSON("new4.json", function(data) {
// console.log(data);
//$.getJSON('new4.json', function(data) {
$.each(data.person, function(i, person) {
var tblRow = "<tr><td>" + person.revisiondate +
"</td><td>" + person.documentname +
"</td><td>" + person.department +
"</td><td>" + person.description +
"</td><td>" + person.link +
"</td></tr>"
$(tblRow).appendTo("#userdata tbody");
});
How can I add a link to my script line such as when I click to this link this opened to my source like a PDF or HTML. I could do that in HTML but when I try to do with JSON I could not.
如何将链接添加到我的脚本行，例如当我单击此链接时，它会像 PDF 或 HTML 一样打开我的源代码。我可以在 HTML 中做到这一点，但是当我尝试使用 JSON 时却做不到。
"</td><td><a target='_blank' href='\mustafa02\group\Manuals\Reviewed\ "+ person.documentname.split('href=')[0]+"' >"+person.documentname.split('href=')[0]+"</a></td>"
my pdfs is in the Reviewed Folder. So my folder path is shown above. \\mustafa02\group\Manuals\Reviewed\
我的 pdf 文件在 Reviewed 文件夹中。所以我的文件夹路径如上所示。\\mustafa02\group\Manuals\Reviewed\
采纳答案by Bhuwan
Add a <a>tag with hrefand target="_black"for opening the link in new tab and use split to remove the href from json.
添加<a>带有href和的标签，target="_black"用于在新选项卡中打开链接，并使用 split 从 json 中删除 href。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<table id="userdata" border="5">
<th>Revision Date</th>
<th>Document Name</th>
<th>Department </th>
<th>Description</th>
<th>Link</th>
</table>
<script>
var data = {
"person": [{
"revisiondate": "21 April 2016",
"documentname": "1658MC",
"department": "Sales",
"description": "Available",
"link": "href=1658MC.pdf"
}, {
"revisiondate": "16 April 2016",
"documentname": "VCX16B",
"department": "Enginnering",
"description": "Not Available",
"link": "href=VCX16B.pdf"
}, {
"revisiondate": "15 March 2016",
"documentname": "AB36F",
"department": "Custumer Services",
"description": "Not Available",
"link": "href=AB36F.pdf"
}, {
"revisiondate": "12 Agust 2016",
"documentname": "FC25D",
"department": "Technical Support",
"description": "Not Available",
"link": "href=FC25D.pdf"
}]
}
//$.getJSON("new4.json", function(data) {
// console.log(data);
//$.getJSON('new4.json', function(data) {
$.each(data.person, function(i, person) {
var tblRow = "<tr><td>" + person.revisiondate +
"</td><td>" + person.documentname +
"</td><td>" + person.department +
"</td><td>" + person.description +
"</td><td><a target='_blank' href='"+ person.link.split('href=')[1]+"' >"+person.link.split('href=')[1]+"</a></td></tr>"
$(tblRow).appendTo("#userdata tbody");
});
//});
</script>
</body>
</html>回答by LiverpoolOwen
$.each(data.person, function(i, person) {
var tblRow = "<tr><td>" + person.revisiondate +
"</td><td>" + person.documentname +
"</td><td>" + person.department +
"</td><td>" + person.description +
"</td><a href='" + person.link + "'>link text</a><td>" +
"</td></tr>"
$(tblRow).appendTo("#userdata tbody");
});
You should remove the attrribute 'href' from your json
您应该从 json 中删除属性“href”
Or you could just add single quotes to your json data links like so
或者你可以像这样在你的json数据链接中添加单引号
var data = {
"person": [{
"revisiondate": "21 April 2016",
"documentname": "1658MC",
"department": "Sales",
"description": "Available",
"link": "href='1658MC.pdf'"
}, {
"revisiondate": "16 April 2016",
"documentname": "VCX16B",
"department": "Enginnering",
"description": "Not Available",
"link": "href='VCX16B.pdf'"
}, {
"revisiondate": "15 March 2016",
"documentname": "AB36F",
"department": "Custumer Services",
"description": "Not Available",
"link": "href='AB36F.pdf'"
}, {
"revisiondate": "12 Agust 2016",
"documentname": "FC25D",
"department": "Technical Support",
"description": "Not Available",
"link": "href='FC25D.pdf'"
}]
$.each(data.person, function(i, person) {
var tblRow = "<tr><td>" + person.revisiondate +
"</td><td>" + person.documentname +
"</td><td>" + person.department +
"</td><td>" + person.description +
"</td><a " + person.link + ">link text</a><td>" +
"</td></tr>"
$(tblRow).appendTo("#userdata tbody");
});
