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

时间:2018-12-27 21:11:36

标签: javascript jquery html json object

要在渲染的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

3 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

您应将其设为字符串,而不是锚点,否则(由于jQuery)将使data[property]等于单击锚点时指向的URL,因为: / p>

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

答案 2 :(得分:0)

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