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

只需在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);

祝你好运。

Answer 3

可以在JSON.stringify replacer parameter中将其替换：

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 />

如何在JSON对象中用图片标记替换图片网址？

3 个答案: