I am trying to use axios to retrieve data from a url and then append the data to html elements I created using javascript.
In a nutshell for each programming language in my url I would like to have a card showing the headline and author name of each article.
This is my HTML
<body>
<div class="parentDiv">
</div>
</body>
</html>
and my JS
const CardsTest = (one) => {
// class headline
const divHead = Object.assign(document.createElement('div'), {className: 'one', textContent: one.headline});
// class author
const divAut = Object.assign(document.createElement('div'), {className: 'writer'});
const spanCont = Object.assign(document.createElement('span'), {className: 'name', textContent: one.authorName});
divAut.appendChild(SpanCont);
divHead.appendChild(divAut);
return divHead;
}
const cardAppender = (div) => {
const divOne = document.querySelector(div);
axios.get('http://localhost:5000/api/articles')
.then((resp) => {
Object.keys(resp.data).forEach (
function(obj) {
const topicsData = CardsTest(obj.articles);
divOne.appendChild(obj.articles)
}
)
})
}
cardAppender('parentDiv')
I know that my function CardsTest creates all the components and my cardsappender can, at the very least print out the JSON from the target URL. I know if I run the function with axios and console log obj.articles I get an object promise containing the articles in the URL.
To summarize; I expect cardAppender to take a url, and take a callback function (Cards Test) appending the writer and headline to the elements in Cards Test and then append that to my html parentDiv. However this is not happening
UPDATE
Tried changing my cardAppender function by creating an array of programming languages (the keys in my JSON) and then appending headline and authorname for each article to my Cards Test function, but this function is still not creating the components in Cards Test:
const cardsAppender = (div) => {
const newArr = ["javascript","bootstrap","technology","jquery","node"]
const divOne = document.querySelector('.parentDiv');
axios.get('http://localhost:5000/api/articles')
.then((resp) => {
newArr.forEach((item) => {
const cardsHolds = CardsTest(resp.data.articles[item])
divOne.appendChild(cardsHolds)
})
})
}
cardsAppender('.parentDiv')
You are using Object.keys to iterate, so you need to use that key as a property index. Or use Object.values. It's not really clear what shape your data is though, so this might need to be tweaked.
Object.keys(resp.data).forEach (
function(obj) {
const topicsData = CardsTest(res.data[obj].articles);
divOne.appendChild(res.data[obj].articles)
}
Object.values(resp.data).forEach (
function(obj) {
const topicsData = CardsTest(obj.articles);
divOne.appendChild(obj.articles)
}