使 json 数据成为 html 中的可点击链接答案

【问题标题】：making json data a clickable link in html使 json 数据成为 html 中的可点击链接
【发布时间】：2017-04-12 16:34:16
【问题描述】：

我有显示在 html 页面 javascript 上的 json 数据，我想知道是否有办法让这些信息像链接一样可点击。任何人都知道这将如何完成？

这是我的 json，我想从 json 文件中提取每个名称并使其可点击。

{
    "example": [
        {
          "name": "Dr. Sammie Boyer",
          "email": "Lavonne.Kiehn@hotmail.com"
        },
        {
          "name": "Eladio Beier",
          "email": "Lavonne.Kiehn@hotmail.com"
        },
        {
          "name": "Hilton Borer",
          "email": "Reva.Goyette@yahoo.com"
        }
    ]
}

我试过的代码

$(document).ready(function() {


    $.getJSON('example.json', function(data) {
         var output = '';
         $.each(data.name, function(key, value) {
                output += '<a href=' + value.name + '</a>';
        });
       
        $('#user').html(output);
    });
});

【问题讨论】：

请澄清您的问题。你有什么可以给我们的例子吗？你试过什么？您想要整个 JSON 可点击还是仅特定部分？
能不能加个你想要点击的json数据的例子
json 已添加
@Rebkah 你想按原样显示还是循环显示列表中的每个名称，然后使该列表中的每个项目都可点击？
猜猜它必须在一个循环中，以便每个名称都在一个列表中并且每个项目都是可点击的

标签： html json hyperlink styles

【解决方案1】：

试试这个（更新） - 在循环时设置 href 的值

$.getJSON('example.json', function(data) {
      var output = '';
      $.each(data.name, function(key, value) {
            output += '<a href="emailto:' + value.email + '">'  + value.name + '</a>';
    });

    $('#user').html(output);
});

【讨论】：

我自己可以让它工作，只需要弄清楚当每个名字被点击时链接是如何起作用的
@Rebekah 我更新了答案。循环时设置 href 的值
谢谢你，我实际上想链接到一个隐藏的 div，但看到这个后我想我知道如何做到这一点
隐藏的 div？好吧，也许下次再描述一下，不要活出任何东西。
如何给每个链接一个class或id？

【解决方案2】：

只需将 emailto 替换为 mailto 即可

$.getJSON('example.json', function(data) {
      var output = '';
      $.each(data.name, function(key, value) {
            output += '<a href="mailto:' + value.email + '">'  + value.name + '</a>';
    });

    $('#user').html(output);
});

【讨论】：