如何渲染从 JSON 动态生成的链接？答案

【问题标题】：How to render links generated dynamically from JSON?如何渲染从 JSON 动态生成的链接？
【发布时间】：2019-05-25 19:54:34
【问题描述】：

要在我呈现的 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/#"
 }
}

我想要的是类似这样的渲染

【问题讨论】：

我们可以看看原始的 JSON 吗？
@JackBashford 问题是{"k": "v"}。
上述方法不会生成给定的输出。它将包含一个 jQuery 对象作为值。请为您的问题创建一个可运行文件。
我已经编辑了原始 JSON 的问题，尽管它与行为几乎没有关系
您所看到的是将 jQuery 对象转换为 JSON 时的样子。

标签： javascript jquery html json object

【解决方案1】：

我强烈建议不要操纵您的数据 (JSON)，而是在您正在使用的 HTML 或模板上执行 DOM。

如果您坚持遵循您的方法：不要用 jQuery 包装您的锚标记，只需将其写为字符串即可。类似<a href=#>${data[property]}</a>

【讨论】：

也试过了。但是它被渲染为字符串，而不是链接。
看看这个>jsfiddle
这甚至没有锚标签

【解决方案2】：

你的意思是让它成为一个字符串，而不是一个锚点，否则（因为 jQuery）它会让data[property] 等于你点击锚点时被定向到的 URL，因为这样：

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

【讨论】：

@invinciblycool 这就是渲染的意义——一个锚标签。如果不将其 not 设置为锚标记，则无法将其 not 设置为字符串，因此这是唯一的方法。

【解决方案3】：

我意识到修改 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;
}

【讨论】：