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

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

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

4

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

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.