Blockchain code Metaverse VR

Crypto×VR×SmartContract(515)

スポンサーリンク

//tips

//smart contract

配列postsがreturnされるオブジェクトの要素の一つとなっているのでそちらの取り出しを考える。

[
title: 'Complete my ninja training',
details: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took.",
userid: 2,
username: 'naki'
]

return {
props: { ninja: posts }
}

配列の中の連想配列の一種だとすると変数名[配列番号].keyで取得できるはず。

console.log(entry[0])までは

[
title: 'Complete my ninja training',
details: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took.",
userid: 2,
username: 'naki'
]
このようにとれたがこの先が取れない。

Cannot read property 'title' of undefinedのエラーが発生。

console.log(entry[0][0])

Cannot read property 'node' of undefined

そもそもの格納方法をオブジェクトの形にして{ninja}に渡す。

getStaticPropsのpostsのオブジェクトで生成。
let posts = {}

これにより無事にfirebaseのuserデータを抽出してページに表示することができた。

Useridでの検索ができていなかったので下記の解決も行う。

//const q = await query(colRef,where("userid","==",id))
const q = await query(colRef,where("username","==","naki"))

stringとの型の違いで弾かれている可能性があるのでidを数字に変換してみる。

const id = parseInt(context.params.id)

とすることで無事に[id]のページのidから該当者の情報を引き出すことができた。

下記で該当userの複数のドキュメントを抽出できているかを確認する。データベースに情報を付加し、console.log('data.title’)などの反応を確認。

await getDocs(q)
.then((snapshot)=>{
console.log('1')
//console.log(snapshot)
console.log(snapshot.docs)

snapshot.docs.forEach(doc => {
console.log('2')
const data = doc.data()
console.log('data.title')
console.log(data)

console.log(data.title)
posts.title = data.title
posts.details = data.details
posts.userid = data.userid
posts.username = data.username

});

}).then(()=>console.log(posts))

きちんと内容は確認できたのでpostsへの書き込みを上書きされないように都度pushという形で対応する。

const pile={}
pile.title = data.title
pile.details = data.details
pile.userid = data.userid
pile.username = data.username

posts.push(pile)

複数のオブジェクトを扱う場合にはpushが一番良い方法のよう。

Postsを配列に直さざるを得ないか。

一旦配列に直して反応を見る。

Error serializing `.ninja[1].title` returned from `getStaticProps` in "/ID/[id]".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.

データベースの内容と抽出項目が合致しない場合の処理を行う必要があるよう。ここではデータベースで合致させるようにした。入力必須などにすれば問題ない。

これでpostsは配列となり、下記のようになる。

{
ninja: [
{ title: 'hi', details: 'yoisho', userid: 1, username: 'po' },
{
title: 'Yoisho birthday bash',
details: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
userid: 1,
username: 'naki'
}
]
}

今回はオブジェクトに格納したものを配列に入れたので<h1>{ ninja[0].title }</h1>のように取り出すことが可能になった。

また格納された複数のオブジェクトも下記のようにして取り出せるようにした。

return (
<div>
{ ninja.map((item,index) => {
return (
<div key={index}>
<p> { item.title }</p>
<p>{ item.details } </p>
<p> { item.userid }</p>
<p>{ item.username } </p>
</div>
);
})}

やっとここまで辿り着けた。トライアンドエラーでのゴリ押しになっているので、少しずつ全体像の理解を深めていく。

また、文字情報に加えてimageの参照先も格納しておくことで、imageの表示もユーザーごとに操作できるようにする。

const gsReference = ref(
firestorage,
"gs://myapp-8e583.appspot.com/image.jpg"
)

上記のgs://myapp-8e583.appspot.com/image.jpgの箇所を

gs://myapp-8e583.appspot.com/[idフォルダを作成]/image.jpg"

のような形に切り替えることを検討する。

まずは"gs://myapp-8e583.appspot.com/test/image.jpg”にアクセスできるかを確認。一部修正した上で問題なく表示された。

//const firestorage = getStorage(firebase);
const firestorage = getStorage();

このtestの箇所に各idを入れる方法を考えていく。

Firebaseのstorageにフォルダ1,2を作成。この作成をurlから行う方法はeditに導入するのでまた後で試行。

ここでは作成されたフォルダ内のimageを取り出せるようにする。

"gs://myapp-8e583.appspot.com/"+ninja[0].userid+"/image.jpg"

ninja[0]なのは取り出すオブジェクトのuseridは全て同じなので。

こちら無事に反映できた。

サイズが大きすぎるので調整。

<img src={image} alt="" width="300" height="300"/>

ばっちり。

人気の記事

1

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

3

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.