如何呈现从JSON动态生成的链接？

Question

要在渲染的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/#"
 }
}

我想要的是与此类似的渲染

Answer 1

我强烈建议不要操纵您的数据（JSON），并在您使用的HTML或模板上执行DOM实现。

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

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

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