Postingan lainnya
Cara display spesifik data di reactjs
Halo , mau tanya bagaimana cara untuk display spesifik data ? contohnya dalam json ada "attributes" yang memiliki beberapa bagian seperti "id", "name", "info"
"meta": {
"totalItems": 20,
"currentPage": 1,
"itemPerPage": 6,
"totalPages": 4
},
"data": [
{
"id": "1",
"type": "gift",
"attributes": {
"id": 1,
"name": "Xiaomi Mi A2 Lite",
"info": "<p>The Mi A2 Lite is not your regular budget smartphone - it has a high-res notched screen with slim bezels, a dual-camera on its back, a very large battery, and runs on the latest vanilla Android OS. The notched screen is probably the highlight feature of the Mi A2 Lite and while controversial, it still adds for some modern looks.</p>",
"description": "<p>\nBody: Aluminum body, plastic antenna strips at the back.<br />\nDisplay: 5.84\" IPS LCD with a cutout, 1,080x2,280px resolution, 19:9 aspect ratio, 432ppi.<br />\nRear camera: Primary 12MP, 1.25µm pixel size, f/2.2 aperture, PDAF; Secondary 5MP, 1.12µm pixel size, f/2.2 aperture - serving as depth sensor; 1080p@30fps video with EIS.<br />\nFront camera: 5MP, Auto HDR; 1080p/30fps video recording.<br />\nOS: Android 8.1 Oreo (Android One)<br />\nChipset: Qualcomm Snapdragon 625: octa-core 2.0GHz Cortex-A53 CPU, Adreno 506 GPU.<br />\nMemory: 3/3GB of RAM; 32/64 storage; microSD slot.<br />\nBattery: 4,000mAh Li-Po (sealed);<br />\nConnectivity: Dual-SIM; LTE, microUSB; Wi-Fi a/b/g/n; GPS; Bluetooth 4.2, IR blaster.<br />\nMisc: Rear-mounted fingerprint reader; single down-firing speaker; 3.5mm jack.\n</p>",
"points": 500000,
"slug": "xiaomi-mi-a2-lite",
"stock": 49,
"images": [
"https://rgbtest.s3.ap-southeast-1.amazonaws.com/images/gift/full/xiaomi-mi-a2-lite.jpg"
],
"isNew": 0,
"rating": 4.05,
"numOfReviews": 17,
"isWishlist": 0
}
},
saya udah nyoba display data dengan tipe seperti ini dan bisa,
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
{
"userId": 1,
"id": 2,
"title": "qui est esse",
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
},
berikut code fetch dan display yang belum bisa ke display, ada error
"Uncaught TypeError: Cannot read properties of undefined (reading 'name')"
"Uncaught TypeError: Cannot read properties of undefined (reading 'info')"
class App extends Component {
state = {
post: []
}
componentDidMount() {
fetch("https://recruitment.dev.rollingglory.com/api/v2/gifts?page[number]=1&page[size]=6")
.then(response => response.json())
.then(json => {
this.setState({ post: [json] })
})
}
render() {
return (
<div>
<p className="section-title">Blog Post</p>
{
this.state.post.map(post => {
return <Post key={post.id} name={post.attributes.name} info={post.attributes.info}/>
})
}
</div>
)
}
}
export default App;
Tanggapan
seperti apa?
udah nyoba pakai useState, dan useEffect, kenadalanya belum bisa nge-display..
console isi this.state.post nya apa? tipe nya apa (pakai typeof)
undefined isinya setelah diconsole..
berarti masalah bukan di looping atua ambil data, tapi memang undefined dari state post sebelumnya. Perhatikan saat meamasukkan post [json] , coba debug lagi disitu
sudah bisa nampilin data, namun hanya "id" yang bisa ke display. yang laen seperti "name" belom bisa...
sudah solve.. terima kasih waktunya ya.
sama sama. Silahkan dishare di bawah ya masalah dimana, jadi orang berikutnya bisa belajar (di Jawaban)
1 Jawaban:
Kesalahan ini terjadi karena struktur data JSON Anda agak berbeda dari struktur yang Anda coba akses. Dalam kasus ini, Anda mencoba mengakses post.attributes.name dan post.attributes.info, tetapi dalam struktur data JSON Anda, attributes adalah bagian dari setiap objek dalam array data, bukan bagian dari objek post itu sendiri.
Anda perlu memperbaiki cara Anda mengakses data tersebut. Seharusnya Anda mengakses data dari post yang merupakan array, dan kemudian untuk setiap item dalam data Anda dapat mengakses attributes.name dan attributes.info.
Berikut ini adalah contoh kode yang diperbaiki:
class App extends Component {
state = {
data: []
}
componentDidMount() {
fetch("https://recruitment.dev.rollingglory.com/api/v2/gifts?page[number]=1&page[size]=6")
.then(response => response.json())
.then(json => {
this.setState({ data: json.data }) // Note the use of json.data here
})
}
render() {
return (
<div>
<p className="section-title">Blog Post</p>
{
this.state.data.map(item => { // Here we're mapping over this.state.data, not this.state.post
return <Post key={item.id} name={item.attributes.name} info={item.attributes.info}/>
})
}
</
Dengan ini, kita memastikan bahwa kita mengiterasi array data dan untuk setiap item di dalamnya, kita mengakses atributnya dan mem-passnya ke komponen Post.
Thanks James Millere Splunk Certification
