插入數據的HTML元素

我JSON文件有3個對象：插入數據的HTML元素

[ 
    { 
    "image": "assets/image.jpg", 
    "title": "Text", 
    "text": "Some text", 
    "date": "23/11/2013" 
    }, 
... 
]

而3 HTML元素：

<div class="blog-post"> 
    <img src="" class="blog-image"/> 
    <h2 class="blog-title"></h2> 
    <p class="blog-text"></p> 
    <div class="blog-date"></div> 
</div>

我知道如何從1對象1 html元素取DATAS ：

((() => { 
    const getJSON = (url, callback) => { 
    const xhr = new XMLHttpRequest(); 
    xhr.open('get', url, true); 
    xhr.responseType = 'json'; 
    xhr.onload =() => { 
     const status = xhr.status; 
     if (status === 200) { 
     callback(null, xhr.response); 
     } else { 
     callback(status); 
     } 
    }; 
    xhr.send(); 
    }; 

    const blogTitle = document.querySelector('.blog-title'); 
    const blogText = document.querySelector('.blog-text'); 
    const blogDate = document.querySelector('.blog-date'); 
    const blogImage = document.querySelector('.blog-image'); 

    getJSON('/test-data.json', (err, data) => { 
    if (err != null) { 
     return false; 
    } else { 
     blogImage.src = data.image; 
     blogTitle.innerText = data.title; 
     blogText.innerText = data.text; 
     blogDate.innerText = data.date; 
    } 
    }); 
}))();

但是我如何使所有對象在json文件中循環並將數據插入到html元素？

來源

2017-09-15 Vladimir Humeniuk

您是否有'blog-post'類的多個DIV元素？如果是這樣，你如何確定哪個JSON數據數組條目與哪個'.blog-post'劃分？或者您是否需要爲JSON數據中的每個條目創建新的分區？ – traktor53

我有多個博客文章類DIV元素。可能，創建兩個數組並追加[i]> [i]，但我不知道解決此問題的最佳方法是什麼 - 這就是爲什麼我創建了一個問題。 :) –

所以，你的JSON文件將返回一個數組，我們可以通過數組這樣的循環：

getJSON('./test-data.json', (err, data) => { 
    if (err != null) { 
    return false; 
    } else { 
    data.forEach(obj => { 
     createElements(obj); 
    }); 
    } 
});

這createElements是一個功能我寫道：

function createElements(obj) { 
    const mainDiv = document.createElement('div'); 
    mainDiv.classList.add('blog-post'); 
    const img = document.createElement('img'); 
    img.classList.add('blog-image'); 
    img.src = obj['image']; 
    const title = document.createElement('h2'); 
    title.classList.add('blog-title'); 
    title.innerHTML = obj['title']; 
    const text = document.createElement('p'); 
    text.classList.add('blog-text'); 
    text.innerHTML = obj['text']; 
    const date = document.createElement('div'); 
    date.classList.add('blog-date'); 
    date.innerHTML = obj['date']; 
    mainDiv.appendChild(img); 
    mainDiv.appendChild(title); 
    mainDiv.appendChild(text); 
    mainDiv.appendChild(date); 
    document.querySelector('body').appendChild(mainDiv); 
}

相當冗長，但這種將使用正確的類爲JSON數組中的每個對象添加一個新的帖子到HTML主體。您可以更改createElements函數的最後一行，以將其附加到與正文不同的元素。

來源

2017-09-16 00:01:25

看起來很髒但工作。所以謝謝你，安德魯，快速的幫助。 –

是的，只要通過Javascript添加HTML元素，它會顯得很醜陋。這就是React真正派上用場的地方。 –

插入數據的HTML元素

回答

相關問題