buat code seperti ini terlebih dahulu untuk mengecek structure endpoint melalu console log atau bisa juga kalian lgsg melihatnya melalui browser :
fetch('https://randomuser.me/api/')
.then(res => res.json())
.then(res => console.log(res))
.catch(err => alert('err'));hasil dari endpoint tersebut/structure endpoint tersebut seperti ini :
results":[
"0":{
"gender":"male",
"name":{
"title":"Mr",
"first":"Deniz",
"last":"Erez"
},
"location":{
"street":{
"number":9677,
"name":"Maçka Cd"
},
"city":"Denizli",
"state":"Sinop",
"country":"Turkey",
"postcode":29371,
"coordinates":{
"latitude":"69.5137",
"longitude":"-82.2091"
},
"timezone":{
"offset":"+5:30",
"description":"Bombay, Calcutta, Madras, New Delhi"
}
},
"email":"deniz.erez@example.com",
"login":{
"uuid":"35bfb3b3-2264-41a6-9184-934558b1d097",
"username":"orangefish638",
"password":"alice1",
"salt":"jjAsfNyL",
"md5":"5cf88de9541fab52a339a0dad9d0225e",
"sha1":"ca77016cf942477feec4697c96ac6b3e78aaf661",
"sha256":"a3f2a9e295f62ba28dab2feee528addc2ee9e590805995ea1f064eff08201085"
},
"dob":{
"date":"1958-05-03T00:18:13.729Z",
"age":64
},
"registered":{
"date":"2008-03-02T16:00:23.941Z",
"age":14
},
"phone":"(357)-180-5404",
"cell":"(318)-038-7562",
"id":{
"name":"",
"value":null
},
"picture":{
"large":"https://randomuser.me/api/portraits/men/36.jpg",
"medium":"https://randomuser.me/api/portraits/med/men/36.jpg",
"thumbnail":"https://randomuser.me/api/portraits/thumb/men/36.jpg"
},
"nat":"TR"
}],
"info":{
"seed":"3328575652ef9a07",
"results":1,
"page":1,
"version":"1.4"}}Nah untuk Mengextrack hasilnya,kalian ikuti aja dari structure endpointnya hasilnya jadi begini :
fetch('https://randomuser.me/api/')
.then(res => res.json())
.then(res => {
let final = res.results.map(e=>{return `<div class='profile'>
<img class='img' loading='lazy' title='${e.name.title}. ${e.name.first} ${e.name.last}' alt='${e.name.title}. ${e.name.first} ${e.name.last}' itemprop='image' src='${e.picture.thumbnail}'/>
<div id='dataProfile'>
<span class='tagname'>${e.name.title}. ${e.name.first} ${e.name.last} (${e.dob.age})</span>
<span class='contack'>${e.email}</span>
</div>
</div>`});
document.getElementById('result').innerHTML = final;
})
.catch(err => alert('err'));untuk full Codenya :
<style>
#result .profile{display:flex;gap:8px;align-items:center;}
#result #dataProfile span{display:block;}
</style>
<div id='result'></div>
<script>
fetch('https://randomuser.me/api/')
.then(res => res.json())
.then(res => {
let final = res.results.map(e=>{return `<div class='profile'>
<img class='img' loading='lazy' title='${e.name.title}. ${e.name.first} ${e.name.last}' alt='${e.name.title}. ${e.name.first} ${e.name.last}' itemprop='image' src='${e.picture.thumbnail}'/>
<div id='dataProfile'>
<span class='tagname'>${e.name.title}. ${e.name.first} ${e.name.last} (${e.dob.age})</span>
<span class='contack'>${e.email}</span>
</div>
</div>`});
document.getElementById('result').innerHTML = final;
})
.catch(err => alert('err'));
</script>
{
"Title": "Guardians of the Galaxy Vol. 2",
"Year": "2017",
"Rated": "PG-13",
"Released": "05 May 2017",
"Runtime": "136 min",
"Genre": "Action, Adventure, Comedy",
"Director": "James Gunn",
"Writer": "James Gunn, Dan Abnett, Andy Lanning",
"Actors": "Chris Pratt, Zoe Saldana, Dave Bautista",
"Plot": "The Guardians struggle to keep together as a team while dealing with their personal family issues, notably Star-Lord's encounter with his father the ambitious celestial being Ego.",
"Language": "English",
"Country": "United States",
"Awards": "Nominated for 1 Oscar. 15 wins & 59 nominations total",
"Poster": "https://m.media-amazon.com/images/M/MV5BNjM0NTc0NzItM2FlYS00YzEwLWE0YmUtNTA2ZWIzODc2OTgxXkEyXkFqcGdeQXVyNTgwNzIyNzg@._V1_SX300.jpg",
"Ratings": [
{
"Source": "Internet Movie Database",
"Value": "7.6/10"
},
{
"Source": "Rotten Tomatoes",
"Value": "85%"
},
{
"Source": "Metacritic",
"Value": "67/100"
}
],
"Metascore": "67",
"imdbRating": "7.6",
"imdbVotes": "665,736",
"imdbID": "tt3896198",
"Type": "movie",
"DVD": "22 Aug 2017",
"BoxOffice": "$389,813,101",
"Production": "N/A",
"Website": "N/A",
"Response": "True"
}
Extrack Title :
res.Title
Extrack Year :
res.Year
kalo misal subject tidak jelas kyak menggunakan angka 0,1,2,3 gunakan methode map
res.Ratings.map(e=>{return `${e.Source} // ${e.Value}`})
Similar Threads