scrimba
Frontend Career Path
Working with APIs
URLs & REST
BlogSpace - Display blogs on page
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

BlogSpace - Display blogs on page
AboutCommentsNotes
BlogSpace - Display blogs on page
Expand for more info
index.js
run
preview
console
/**
Challenge:

With the 5 blog post objects, display the `title` and `body`
properties of the first 5 posts on the browser page.

Hints:
* Create a `div` in the HTML file to store these items
* Loop over the items creating a string of HTML elements you
can then put into the div with `innerHTML`
*/

fetch("https://apis.scrimba.com/jsonplaceholder/posts")
.then(res => res.json())
.then(data => {
const postsArr = data.slice(0, 5)
console.log(postsArr)
})
Console
[
{userId:
1
, id:
1
, title:
"sunt aut facere repellat provident occaecati excepturi optio reprehenderit"
, body:
"quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto"
}
,
{userId:
1
, id:
2
, title:
"qui est esse"
, body:
"est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae ea dolores neque fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis qui aperiam non debitis possimus qui neque nisi nulla"
}
,
{userId:
1
, id:
3
, title:
"ea molestias quasi exercitationem repellat qui ipsa sit aut"
, body:
"et iusto sed quo iure voluptatem occaecati omnis eligendi aut ad voluptatem doloribus vel accusantium quis pariatur molestiae porro eius odio et labore et velit aut"
}
,
{userId:
1
, id:
4
, title:
"eum et est occaecati"
, body:
"ullam et saepe reiciendis voluptatem adipisci sit amet autem assumenda provident rerum culpa quis hic commodi nesciunt rem tenetur doloremque ipsam iure quis sunt voluptatem rerum illo velit"
}
,
{userId:
1
, id:
5
, title:
"nesciunt quas odio"
, body:
"repudiandae veniam quaerat sunt sed alias aut fugiat sit autem sed est voluptatem omnis possimus esse voluptatibus quis est aut tenetur dolor neque"
}
]
,
/index.html
-4:06