写真って反射する情報からもいろいろ取れるので、画面キャプチャに差し替えたうえで、
運営に削除依頼されたほうが良いと思います。
また、実際のコードも提示してください。
localstorageからinputタグのidに代入したい
オブジェクトなのでJSON.stringifyとJSON.parseは行っている。
console.logで確認してみるとちゃんと表示されている
inputタグのidに代入するとobjectと表示されてします。
console.logでは写真のように表示
document.getElementById("inputreferers").value = favsAll ;
上記のようにvalueで表示している
読み込みの順番がいけないのか
そもそも呼び方が間違っているのかがわからない状況です。
是非ご教授いただけないでしょうか。
よろしくお願いいたします。
一括資料請求をwordpressで制作したいです。
検索するなかで下記のコードが使用出来そうでしたので使用しております。
操作しても希望の通り
クリックするとlocalstorageに保存されていまます。
<div id="app"> <div class="container"> <div class="row" v-if="!isLs"> <div class="col"> <div class="alert alert-warning"> お使いのブラウザではlocalStrage機能は使用できません。 </div> </div> </div> <div class="row py-3"> <div class="col"> <h1>お気に入り登録</h1> <div>ただいまのお気に入り登録件数は<strong class="display-4 font-weight-bold">{{ favs.length }}</strong>件です。<br> <a href="http://test.local/contact/#wpcf7-f24-p32-o1">お気に入り一覧を見る</a> </div> </div> </div> <div class="row border-top py-3 align-items-center" v-for="item in data" :key="item.id"> <div class="col"> <h3>{{ item.name}}</h3> <div> {{ item.detail}} </div> </div> <div class="col-auto"> <button class="btn" :class="isFavs(item.id) ?'btn-secondary' : 'btn-primary'" v-on:click="toggleFavs($event,item.id)"> <template v-if="isFavs(item.id)"> <img src="http://test.local/wp-content/uploads/2022/03/search_list_apply_check_on.png" alt=""> </template> <template v-else=""> <img src="http://test.local/wp-content/uploads/2022/03/search_list_apply_check_off.png" alt=""> </template> </button> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data() { return { isLs: false, favs: [], data: [{ id: 1, name: 'テスト1', }, { id: 2, name: 'テスト2', }, { id: 3, name: 'テスト3', }, { id: 4, name: 'テスト4', }, { id: 5, name: 'テスト5', }, { id: 6, name: 'テスト6', }, { id: 7, name: 'テスト7', }, { id: 8, name: 'テスト8', }, { id: 9, name: 'テスト9', }, { id: 10, name: 'テスト10', } ] } }, computed: { //お気に入り登録済みかどうか判定 isFavs() { var vm = this; return function (id) { var index = vm.favs.findIndex(function (val) { return val.id == id; }) if (index === -1) { return false; } else { return true; } } } }, mounted() { var vm = this; vm.init(); //localStrageが使えるかどうかの判定 if (vm.isLs) { //保存済みのlocalStrageを読み込む var current = window.localStorage.getItem('favs'); if (current) { vm.$set(vm, 'favs', JSON.parse(current)) } } }, methods: { init() { var vm = this; if (typeof window.localStorage !== 'undefined') { vm.$set(vm, 'isLs', true) } }, toggleFavs($event, id) { var vm = this; //お気に入り対象がどの物件か抽出 var index = vm.data.findIndex(function (val) { return val.id == id; }); var target = vm.data[index]; //既に登録済みか判定 var index = vm.favs.findIndex(function (val) { return val.id == target.id; }) //見つからなければ新規登録 if (index === -1) { vm.favs.unshift(target) } else { //見つかれば削除 vm.favs.splice(index, 1); } //localStrageに保存 window.localStorage.setItem('favs', JSON.stringify(vm.favs)); } } }) </script>**ボールドテキスト**
保存できているので下記のコードを書いて表示しようとしています。
let inputers = document.getElementById('inputreferers') let favsAll = JSON.parse(localStorage.getItem('favs')); console.log(favsAll); document.getElementById("inputreferers").value = favsAll ;
お問い合わせはcontactform7を使用して下記コードをいれて
データを私自身に送信させていです。
<input type="text" name="referer" id="inputreferer">
contactform7に下記のコードを入れても違うタブになるのか
使用できませんと表示されてしまう
そのためlocalstorageにはちゃんと保存されているので
データだけ文字化して何を選択されてかわかるようにしたい
<div id="app"> <div class="container"> <div class="row" v-if="!isLs"> <div class="col"> <div class="alert alert-warning"> お使いのブラウザではlocalStrage機能は使用できません。 </div> </div> </div> <div class="row py-3"> <div class="col"> <h1>お気に入り一覧</h1> <div>ただいまのお気に入り登録件数は<strong class="display-4 font-weight-bold">{{ favs.length }}</strong>件です。 </div> </div> </div> <div class="row border-top py-3 align-items-center" v-for="item in favs" :key="item.id"> <div class="col"> <h3>{{ item.name}}</h3> <div> {{ item.detail}} </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data() { return { isLs: false, favs: [], } }, mounted() { var vm = this; vm.init(); //localStrageが使えるかどうかの判定 if (vm.isLs) { //保存済みのlocalStrageを読み込む var current = window.localStorage.getItem('favs'); if (current) { vm.$set(vm, 'favs', JSON.parse(current)) } } }, methods: { init() { var vm = this; if (typeof window.localStorage !== 'undefined') { vm.$set(vm, 'isLs', true) } } } }) </script>
ちなみにcontactform7に上記のコードを書いても使用できないとなりますが
固定ページに上記のコードをいれるとちゃんと表示されます。
※結果として現在localstorageに保存できているため
その文字列を私自身に送信したいです。
しかしobject表示になっていることが現実です。
使用予定イメージ
使用される方には選択したものを表示（現在できている）
同じページにcontactform7のショートコートを入れる
localstorageから取得して選択してものを表示
※きれいに表示できれば表示して見た目がわるければ非表示にしてデータだけわかるようにする
現在localstorageに保存しているnameだけ取得するために下記コードをいれてもundefinedになるため
全部取得にしている(その場合はちゃんと取得して表示される)
let favsAll = JSON.parse(localStorage.getItem('favs')); console.log(favsAll.name);
すいません長くなりましたが現状でございます。
もし説明が足りない場合は申し訳ございませんがおしゃっていただければと思います。
何卒よろしくお願いいたします。
コードを見ないで助言するのは困難なので、コードを開示してください。
input[type="text"]には、何を入れたいのでしょうか？
一括資料請求をwordpressで制作したいです。
検索するなかで下記のコードが使用出来そうでしたので使用しております。
操作しても希望の通り
クリックするとlocalstorageに保存されていまます。
```ここに言語を入力
<div id="app">
<div class="container">
<div class="row" v-if="!isLs">
<div class="col">
<div class="alert alert-warning">
お使いのブラウザではlocalStrage機能は使用できません。
</div>
</div>
</div>
<div class="row py-3">
<div class="col">
<h1>お気に入り登録</h1>
<div>ただいまのお気に入り登録件数は<strong class="display-4 font-weight-bold">{{ favs.length }}</strong>件です。<br>
<a href="http://test.local/contact/#wpcf7-f24-p32-o1">お気に入り一覧を見る</a>
</div>
</div>
</div>
<div class="row border-top py-3 align-items-center" v-for="item in data" :key="item.id">
<div class="col">
<h3>{{ item.name}}</h3>
<div>
{{ item.detail}}
</div>
</div>
<div class="col-auto">
<button class="btn" :class="isFavs(item.id) ?'btn-secondary' : 'btn-primary'" v-on:click="toggleFavs($event,item.id)">
<template v-if="isFavs(item.id)">
<img src="http://test.local/wp-content/uploads/2022/03/search_list_apply_check_on.png" alt="">
</template>
<template v-else="">
<img src="http://test.local/wp-content/uploads/2022/03/search_list_apply_check_off.png" alt="">
</template>
</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
isLs: false,
favs: [],
data: [{
id: 1,
name: 'テスト1',
},
{
id: 2,
name: 'テスト2',
},
{
id: 3,
name: 'テスト3',
},
{
id: 4,
name: 'テスト4',
},
{
id: 5,
name: 'テスト5',
}, {
id: 6,
name: 'テスト6',
}, {
id: 7,
name: 'テスト7',
}, {
id: 8,
name: 'テスト8',
}, {
id: 9,
name: 'テスト9',
},
{
id: 10,
name: 'テスト10',
}
]
}
},
computed: {
//お気に入り登録済みかどうか判定
isFavs() {
var vm = this;
return function (id) {
var index = vm.favs.findIndex(function (val) {
return val.id == id;
})
if (index === -1) {
return false;
} else {
return true;
}
}
}
},
mounted() {
var vm = this;
vm.init(); //localStrageが使えるかどうかの判定
if (vm.isLs) {
//保存済みのlocalStrageを読み込む
var current = window.localStorage.getItem('favs');
if (current) {
vm.$set(vm, 'favs', JSON.parse(current))
}
}
},
methods: {
init() {
var vm = this;
if (typeof window.localStorage !== 'undefined') {
vm.$set(vm, 'isLs', true)
}
},
toggleFavs($event, id) {
var vm = this;
//お気に入り対象がどの物件か抽出
var index = vm.data.findIndex(function (val) {
return val.id == id;
});
var target = vm.data[index];
//既に登録済みか判定
var index = vm.favs.findIndex(function (val) {
return val.id == target.id;
})
//見つからなければ新規登録
if (index === -1) {
vm.favs.unshift(target)
} else {
//見つかれば削除
vm.favs.splice(index, 1);
}
//localStrageに保存
window.localStorage.setItem('favs', JSON.stringify(vm.favs));
}
}
})
</script>**ボールドテキスト**
```
保存できているので下記のコードを書いて表示しようとしています。
```ここに言語を入力
let inputers = document.getElementById('inputreferers')
let favsAll = JSON.parse(localStorage.getItem('favs'));
console.log(favsAll);
document.getElementById("inputreferers").value = favsAll ;
```
お問い合わせはcontactform7を使用して下記コードをいれて
データを私自身に送信させていです。
```ここに言語を入力
<input type="text" name="referer" id="inputreferer">
```
contactform7に下記のコードを入れても違うタブになるのか
使用できませんと表示されてしまう
そのためlocalstorageにはちゃんと保存されているので
データだけ文字化して何を選択されてかわかるようにしたい
```ここに言語を入力
<div id="app">
<div class="container">
<div class="row" v-if="!isLs">
<div class="col">
<div class="alert alert-warning">
お使いのブラウザではlocalStrage機能は使用できません。
</div>
</div>
</div>
<div class="row py-3">
<div class="col">
<h1>お気に入り一覧</h1>
<div>ただいまのお気に入り登録件数は<strong class="display-4 font-weight-bold">{{ favs.length }}</strong>件です。 </div>
</div>
</div>
<div class="row border-top py-3 align-items-center" v-for="item in favs" :key="item.id">
<div class="col">
<h3>{{ item.name}}</h3>
<div>
{{ item.detail}}
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
isLs: false,
favs: [],
}
},
mounted() {
var vm = this;
vm.init(); //localStrageが使えるかどうかの判定
if (vm.isLs) {
//保存済みのlocalStrageを読み込む
var current = window.localStorage.getItem('favs');
if (current) {
vm.$set(vm, 'favs', JSON.parse(current))
}
}
},
methods: {
init() {
var vm = this;
if (typeof window.localStorage !== 'undefined') {
vm.$set(vm, 'isLs', true)
}
}
}
})
</script>
```
ちなみにcontactform7に上記のコードを書いても使用できないとなりますが
固定ページに上記のコードをいれるとちゃんと表示されます。
※結果として現在localstorageに保存できているため
その文字列を私自身に送信したいです。
しかしobject表示になっていることが現実です。
使用予定イメージ
使用される方には選択したものを表示（現在できている）
同じページにcontactform7のショートコートを入れる
localstorageから取得して選択してものを表示
※きれいに表示できれば表示して見た目がわるければ非表示にしてデータだけわかるようにする
現在localstorageに保存しているnameだけ取得するために下記コードをいれてもundefinedになるため
全部取得にしている(その場合はちゃんと取得して表示される)
```ここに言語を入力
let favsAll = JSON.parse(localStorage.getItem('favs'));
console.log(favsAll.name);
```
すいません長くなりましたが現状でございます。
もし説明が足りない場合は申し訳ございませんがおしゃっていただければと思います。
何卒よろしくお願いいたします。
質問に回答するとコードがわからないため
質問メインに追加いたしました。
お手数おかけいたしますがよろしくお願いいたします。
このコードは何をしたい感じですか？
一括資料請求サイトを制作したいです。
現在のコードでクリックするとlocalstorageにデータを保存できているのですが
インプットタグのidに代入すると文字にならずobjectとなっております。
代入しても文字になって送信されることを希望しております。
情報がたくさんあり
わかりづらくなってしまい申し訳ございません。
なにをフォームに出力したい感じですか？ そのあたりが伝わってこないんですが。
テスト1とかを出力したいんですか？
おっしゃる通りテスト１を出力させていです。
回答2件
1
もう解決済みみたいですが、書いてしまったので載せておきます。
回答の方向性があっているかどうかわからないのですが
[object Object] の文字が見えたので、疑問を推測して回答してみます。
console.logは、中身を自動で展開して表示してくれるのですが
値を代入する時には、オブジェクトをいれると
[object Object]
という文字列になってしまいます。
document.getElementById("inputreferers").value = 'テストの題名';
とやって、正しく動くことを確認して
その文字列を正しく生成してください。
JSON.parse を行うと、文字列がオブジェクトになっているので、
値を正しく入れるには、自分でオブジェクトを文字列に変換して、文字列を代入する必要があります。
下記のサンプルで実行動作させて、
オブジェクトから文字列を操作する方法を考えて実装してみてください。
js
1const data = { 2 A: "DataA", 3 B: "DataB", 4} 5 6console.log(data); 7// { A: "DataA", B: "DataB" } 8// これは、console.log が勝手に自動変換して中身を見やすいように出力してくれている 9 10console.log(data.toString()) 11// "[object Object]" 12// data は toString() すると、このような文字になる 13 14console.log( 15 Object.keys(data).map(key=>`${key}:${data[key]}`).join(', ') 16); 17// "A:DataA, B:DataB" 18// console.logと同じような形式で表示したいなら 19// 自前で、オブジェクトから文字列に変換するコードを書く必要があります
投稿2022/03/29 02:35
総合スコア186
回答へのコメント
ご丁寧に解説いただきまして
ありがとうございます！
文字列がオブジェクトになっているのですね！
JSON.parseで文字列に変換できていると勘違いしておりました。
いただいたコードも試していろいろと勉強したいと思います！
自力で検索や本を購入して行っておりましたが
行き詰まってしまい本当に感謝しております！
改めましてありがとうございます！
👍
1
ベストアンサー
テスト１を出力させていです
favsAll[0].nameでいいかと思います。
投稿2022/03/28 09:57
総合スコア33635
回答へのコメント
ご回答ありがとうございます！
テスト１が出力されました。
全て出力したいのですが
どのように行えばよろしいでしょうか。
よろしくお願いいたします！
0 を 1 に変えれば テスト2 になりますよ。
なお、文字列の連結は + でできます。
ご提示のコードはご自分で書かれたんですよね……？ いっこずつ足し算してる式を提示しなくても大丈夫な人なんですよね……？
このコードはいろいろと調べる中で希望に沿うコードでしたので
少し変更をして使用させていただいております。
素人の質問で申し訳ございません。
足し算の式がわからない、ということでいいですか？
favsAll[0].name+ favsAll[1].name+...
これで伝わりますか？
理解いたしました！
ご丁寧にありがとうございます！
for文などで回しで自動で全て取得などもできますでしょうか？
これから先はお時間もかかりますので自分で調べてみたいと思いますが
できるかできないかだけでもお答えいただけないでしょうか。
favsAll.map(x=>x.name).join("")
とかでしょうか。試してないですが。
最後までご丁寧にありがとうございます！
ベストアンサーで締めたいと思います！
関連した質問
Q&A
Railsで発生した「undefined local variable or method」エラーを直したいです。
Q&A
spring boot でのthymeleafでの値の受渡し時にエラー
Q&A
Symfonyのセレクトボックスを選択しても値が空のまま送信される
Q&A
Vueの子コンポーネントで「Uncaught (in promise) TypeError: Cannot read properties of undefined」
Q&A
Chrome拡張機能開発 v3にて、options_pageで vue.jsを使用したい
Q&A
特定の日付のレコードを表示したい
Q&A
undefined method `errors' for nil:NilClassを解決したい。
Q&A