解析JSON到HTML文件

问题描述：

5:{src: "#", width: "165px", height: "95px"} 
7:{src: "#", width: "165px", height: "95px"} 
13:{src: "#", width: "165px", height: "95px"} 
20:{src: "#", width: "165px", height: "95px"} 
26:{src: "#", width: "165px", height: "95px"} 
33:{src: "#", width: "165px", height: "95px"} 
39:{src: "#", width: "165px", height: "95px"} 
46:{src: "#", width: "165px", height: "95px"} 
52:{src: "#", width: "165px", height: "95px"} 
59:{src: "#", width: "165px", height: "95px"} 
65:{src: "#", width: "165px", height: "95px"} 
72:{src: "#", width: "165px", height: "95px"} 
78:{src: "#", width: "165px", height: "95px"} 
85:{src: "#", width: "165px", height: "95px"}

而且我希望把所有从JSON文件中的图像在HTML这样的：

<img src="" width="" height="">

我怎么能这样做？

感谢

这不是一个有效的JSON。如果你有一个词典的话，那么你会错过大括号和逗号。 –

答

你张贴什么是不一个有效的JSON，但我想这只是错误 - 很可能你在每一行的开头没有数字，是吗？

那么，要实现你所描述的，你需要使用JavaScript和创造，将代码：

打开一个JSON文件，并解析其内容（article on that）：

function loadJSON(callback) { 
    var xobj = new XMLHttpRequest(); 
    xobj.overrideMimeType("application/json"); 
    xobj.open('GET', 'my_data.json', true); // Replace 'my_data' with the path to your file 
    xobj.onreadystatechange = function() { 
     if (xobj.readyState == 4 && xobj.status == "200") { // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode 
      callback(xobj.responseText); 
     } 
    }; 
    xobj.send(null); 
} 

loadJSON(function(response) { // Parse JSON string into object 
    var actual_JSON = JSON.parse(response); 
});

将每个图像附加到DOM，take a look at this response。
当生成IMG元件（以上）需要设置宽度&高度需要使用CSS：
```
img.style.width = '165px'; 
img.style.height = '95px'; 
```
，或者使用从JSON数据：
```
img.style.width = actual_JSON[n].width; 
img.style.height = actual_JSON[n].height; 
```
其中n是数JSON数据中每行的数据。

答

可以使用map功能。例如：

var arr = [ 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"} 
] 
var html = '' 
arr.map(function (imageInfo) { 
    html += '<img src="' + imageInfo.src + '" width="' + imageInfo.width + '" height="'+ imageInfo.height+'">' 
}) 

console.log(html)

P/S：请注意，“地图”只能与阵列工作，不反对

答

假设JSON数据是正确的结构：

let jsonData = [ 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"} 
];

您可以在几个不同的方式做到这一点，在下面的代码中，我们首先创建一个容器div，然后遍历JSON数组创建一个新的图像元素，然后将其添加到容器。最后，这个div追加的body元素：

let jsonData = [ 
     {src: "http://via.placeholder.com/165x95", width: "165px", height: "95px"}, 
     {src: "http://via.placeholder.com/165x95", width: "165px", height: "95px"}, 
     {src: "http://via.placeholder.com/165x95", width: "165px", height: "95px"}, 
     {src: "http://via.placeholder.com/165x95", width: "165px", height: "95px"}, 
     {src: "http://via.placeholder.com/165x95", width: "165px", height: "95px"}, 
     {src: "http://via.placeholder.com/165x95", width: "165px", height: "95px"}, 
     {src: "http://via.placeholder.com/165x95", width: "165px", height: "95px"} 
    ]; 

const container = document.createElement('div'); 
const bodyElement = document.querySelector('body'); 

const images = jsonData.map(image => { 
    let imageEl = document.createElement('img'); 
    imageEl.setAttribute('src', image.src); 
    imageEl.setAttribute('height', image.height); 
    imageEl.setAttribute('width', image.width); 
    return imageEl; 
}); 

for (let image of images) { 
    container.appendChild(image); 
} 

bodyElement.appendChild(container);

https://jsbin.com/qokilubeze/edit?html,js,output

这可以进一步简化：

const container = document.createElement('div'); 
const bodyElement = document.querySelector('body'); 

for (let i = 0; i < jsonData.length; i++) { 
    let imageEl = document.createElement('img'); 
    imageEl.setAttribute('src', jsonData[i].src); 
    imageEl.setAttribute('height', jsonData[i].height); 
    imageEl.setAttribute('width', jsonData[i].width); 
    container.appendChild(imageEl); 
} 

bodyElement.appendChild(container);

或者：

const container = document.createElement('div'); 
const bodyElement = document.querySelector('body'); 

jsonData.map(image => { 
    let imageEl = document.createElement('img'); 
    imageEl.setAttribute('src', image.src); 
    imageEl.setAttribute('height', image.height); 
    imageEl.setAttribute('width', image.width); 
    container.appendChild(imageEl); 
}); 

bodyElement.appendChild(container);

答

你已经知道它不是一个有效的JSON，它看起来像一个javascript对象所以我非常确定，它是解析服务器数据响应。

如果我是正确的，然后你的答案是这样的

// Lets put it in a variable 
var myResponse = { 
    5:{src: "#", width: "165px", height: "95px"}, 
    7:{src: "#", width: "165px", height: "95px"}, 
    13:{src: "#", width: "165px", height: "95px"}, 
    20:{src: "#", width: "165px", height: "95px"}, 
    26:{src: "#", width: "165px", height: "95px"}, 
    33:{src: "#", width: "165px", height: "95px"}, 
    39:{src: "#", width: "165px", height: "95px"}, 
    46:{src: "#", width: "165px", height: "95px"}, 
    52:{src: "#", width: "165px", height: "95px"}, 
    59:{src: "#", width: "165px", height: "95px"}, 
    65:{src: "#", width: "165px", height: "95px"}, 
    72:{src: "#", width: "165px", height: "95px"}, 
    78:{src: "#", width: "165px", height: "95px"}, 
    85:{src: "#", width: "165px", height: "95px"} 
}; 

// then create a div element 
var elm = document.createElement('div'); 

// then append it to (your parent element) , for example: body element 
document.body.appendChild(elm); 
// then create a image element 
var img = document.createElement('img'); 

/* Now we need the values, not the numbers, 
    there is an Object method 'Object.values()' 
    which return an array of values of given Object like 
    [{src: "#", width: "165px", height: "95px"}, 
    {src: "#", width: "165px", height: "95px"}...] 
    then loop through with forEach method 
    and set it with image attributes 
*/ 
Object.values(myresponse).forEach(function(obj){ 
    var img = document.createElement('img'); 
    img.src = obj.src; 
    img.style.width = obj.width 
    img.style.height= obj.height 
    elm.appendChild(img) 
});

解析JSON到HTML文件

相关推荐