LoginSignup
0
0

More than 5 years have passed since last update.

filterとかを使って関数を組み合わせたメモ(個人的)

Last updated at Posted at 2019-03-20

formで取得したものを全取得したかった

最初はこういう風にやった
$('form').val()

だがしかし、これだとあまりうまく行かず行き着いた先が

var $form = $('form');
var param = $form.serializeArray();

こっち、もともと背景はajaxでapiにpostするもので、今回はこれを使ったらうまくいった

基本的にはこういうオブジェクトになって返ってきていて


var obj = [
  { name: "conversion[id]", value: "ssss" },
  { name: "conversion[original_params]", value: "" },
  { name: "conversion[referrer]", value: "http://xxx.localhost.local:3001/lp/xxx" },
  { name: "conversion[conversion_at]", value: "" },
  { name: "conversion[url]", value: "http://solar.localhost.local:3001/lp/xxxx" },
  { name: "conversion[items_1]", value: "種別:土地・その他" },
  { name: "conversion[items_2]", value: "" },
  { name: "conversion[items_3]", value: "" },
  { name: "conversion[items_4]", value: "" },
  { name: "conversion[items_5]", value: "面積:999㎡" },
  { name: "conversion[items_6]", value: "状態:xxxx" },
  { name: "conversion[items_7]", value: "都道府県:xxx県" },
  { name: "conversion[items_8]", value: "メールアドレス:m@xxx.com" },
  { name: "conversion[items_9]", value: "電話番号:07070707070" }
]

//まずこれでvalueだけをマップして全部返す
var result = obj.map( fil => {
  return fil.value
})

//そうするとだいたいこんな形で出る
console.log(result, 222);
//["ssss", "", "http://xxx.localhost.local:3001/lp/xxx", "", "http://xxx.localhost.local:3001/lp/xxxx", "種別:土地・その他", "", "", "", "面積:999㎡", "状態:xxxx", "都道府県:xxx県", "メールアドレス:m@xxx.com", "電話番号:07070707070"] 222

//そしてそれをさらにfilterを使って "" ←文字なし以外を列挙する
var fil = result.filter(num => num !== '')
//["ssss", "http://xxx.localhost.local:3001/lp/xxx", "http://xxx.localhost.local:3001/lp/xxxx", "種別:土地・その他", "面積:999㎡", "状態:xxxx", "都道府県:xxx県", "メールアドレス:m@xxx.com", "電話番号:07070707070"] 

//そしてさらにそれをsliceを使って削除
var f = fil.slice(3)

console.log(f, 3333);
//["種別:土地・その他", "面積:999㎡", "状態:xxxx", "都道府県:xxx県", "メールアドレス:m@xxx.com", "電話番号:07070707070"] 

//でこれをレンダリングforEach使ったがこれ他にできる方法があるなら教えてほしい
 f.forEach((value) => {
   $('#confirm-table dl').append(`<div>${value}</div>`);
 });

今回はURLの部分は削除したかったのでこの方法でできた
やってて気づいたのが、今回メモしたのは関数で処理した結果を関数で返すという例だったので忘れないようにメモ
これが関数型??なのかなという感じ?なのかはちょっと自信がないが、少し成長した感じだったので一旦忘れないようにメモ

  • filter
  • map
  • slice

を使ったがもう少し配列の操作、slice等を使って技術を高めていきたいとおもいまーす
※書いてて思いましたが変数目くそですね、この辺もリーダブル読んで勉強します

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0