javascript - 如何将图像 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 或通过识别 key 的值image_url，我想实现这一点。

标签： javascriptjsonregexstring

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>