Как заменить URL-адрес изображения тегом изображения в объекте JSON?

Question

Это ответ JSON, который я получаю с сервера:

 const response = {
   status: "OK",
   data: {
     qr_code_string: "/ AFFFFABRRRQAUUUUAFFFFAB",
     image_url: "http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg",
     qr_code: "serse",
     expiry_time: "05-16-2019 10:05:34"
   }
 };

Мне нужно отобразить этот ответ JSON в отформатированном виде, который я получаю следующим образом:

JSON.stringify(response, null, 4)

Теперь необходимо отобразить image_url в теге изображения и отобразить остаток в JSON.

Мне было интересно, смогу ли я достичь этого с помощью регулярного выражения.

Редактировать: Я хотел бы также упомянуть, что независимо от структуры ответа, это может быть массив объектов или вложенный объект. Либо путем определения URL-адреса изображения с помощью регулярных выражений, либо путем определения значения ключа image_url, я бы хотел добиться этого.

Answer 1

Назначьте image_url элементу <img /> / new Image().
Удалить свойство из объекта.
«Распечатать» объект с помощью JSON.stringify()

Оберните логику в функцию. Упрощает использование, когда ответом является массив объектов

const response = {
        status: "OK",
        data: {
            qr_code_string: "/ AFFFFABRRRQAUUUUAFFFFAB",
            image_url: "http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg",
            qr_code: "serse",
            expiry_time: "05-16-2019 10:05:34"
        }
    };
    
showResponseObject(response);
// or in case of an array of objects
// response.forEach(showResponseObject);

    
function showResponseObject(res) {
  // the <ul> is just an example

  const list = document.querySelector("ul"),
        li = document.createElement("li"),
        pre = document.createElement("pre"),
        img = new Image();
        
  img.src = res.data.image_url;
  delete res.data.image_url;
  
  pre.textContent = JSON.stringify(res, null, 4);
  
  li.appendChild(pre);
  li.appendChild(img);
  list.appendChild(li);
}

<ul></ul>

Answer 2

Может быть заменено в параметре JSON.stringify заменителя :

const response = {
  status: "OK",
  data: {
    qr_code_string: "/ AFFFFABRRRQAUUUUAFFFFAB",
    image_url: "http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg",
    qr_code: "serse",
    expiry_time: "05-16-2019 10:05:34"
  }
};

a.innerHTML = JSON.stringify(response, (k, v) => k == 'image_url' ? `<img src='${v}' />` : v, 4);

<pre id=a />

Answer 3

Просто создайте новое свойство в response.data с именем image_html, это означает, что вам не нужно изменять (или удалять) свойство image_url, IE: , вы можете использовать его позже на.

const response = {
  status: "OK",
  data: {
    qr_code_string: "/ AFFFFABRRRQAUUUUAFFFFAB",
    image_url: "http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg",
    qr_code: "serse",
    expiry_time: "05-16-2019 10:05:34"
  }
};
// more code...
response.data.image_html = `<img src="${ response.data.image_url }" />`;
// even more code...
console.log(response);

Выход:

{
  "status": "OK",
  "data": {
    "qr_code_string": "/ AFFFFABRRRQAUUUUAFFFFAB",
    "image_url": "http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg",
    "qr_code": "serse",
    "expiry_time": "05-16-2019 10:05:34",
    "image_html": "<img src=\"http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg\" />"
  }
}

Вот пример HTML-контейнера:

<figure class="container">
  <section id="image"></section>
  <section id="json"></section>
</figure>

Тогда вы можете отобразить его, используя:

document.querySelector(".container > #image").appendChild(response.data.image_html);
document.querySelector(".container > #json").textContent = JSON.stringify(response, null, 4);

Удачи.