Как сделать ссылки, сгенерированные динамически из 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

Вы должны сделать это строкой, а не якорем, иначе (потому что 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 2

Я понял, что изменение 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;
}

Answer 3

Я бы настоятельно рекомендовал не манипулировать вашими данными (JSON) и выполнять реализацию DOM для вашего HTML или шаблона, который вы используете.

В случае, если вы настаиваете на своем подходе: не оборачивайтеВаш якорный тег от JQuery просто напишите его в виде строки.что-то вроде <a href=#>${data[property]}</a>