解析JSON到HTML文件

-2

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="">

我怎麼能這樣做？

感謝

來源

2017-10-20 Stefan Iordache

這不是一個有效的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數據中每行的數據。

來源

2017-10-20 10:00:46 FRS

可以使用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：請注意，「地圖」只能與陣列工作，不反對

來源

2017-10-20 09:58:50

假設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);

來源

2017-10-20 10:15:42

你已經知道它不是一個有效的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) 
});

來源

2017-10-20 10:30:25 SharifClick

解析JSON到HTML文件

回答

相關問題