简体   繁体   中英

How can I add a link/href/hyperlink in JSON script

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.

我的HTML图片

<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.

"</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\\

$.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

Or you could just add single quotes to your json data links like so

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");
        });

Add a <a> tag with href and target="_black" for opening the link in new tab and use split to remove the href from json.

 <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> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM