javascript - 如何用 JSON 对象中的图像标签替换图像 URL？

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>