JavaScript小ネタ集 - グローバルリンク

JSONデータや配列のキーを条件にして、条件に合う配列を作るfilter関数の使い方

var json_string = JSON.parse('<?php echo $json_string; ?>;');   //PHPから配列データを受け取る
//配列のキーとして「pl_color」がありその中に「ゴールド」がある
var color = 'ゴールド' //ゴールドと同じものを抽出

var filter_color_ary = json_string.filter(x =>; x.pl_color === color)

//又は

var filter_color_ary = json_string.filter(function(item){
    return item.type=="color";         
});

JSONデータを読み込み、キーを指定して1行ずつデータを取得する

var json_string = JSON.parse('<;?php echo $json_string; ?>;');   //PHPから配列データを受け取る
  json_string.forEach( function( value ) {
    console.log( value.capacity ); //capacityというキーのでーたを取得
  });

1番目を指定して読み取るのは簡単

data= json[0]['key_name']; //たとえ1件しかなくても1件目を取得と明示する必要がある

jQueryからHTMLの要素を制御する

jQueryのメソッド「append()」を使います。削除するには「remove」を使いますが、リストの内容を削除するには、子要素を削除する「empty()」メソッドを使います。

$('#volume_list').append('<li>リスト追加</li>');  //#volume_listは要素のid又はclassに#を追加

$('#volume_list').empty(); // volume_listのid又はclassの子要素を削除

JavaScriptでは、「appendChild」メソッドを使うと同じ事ができます。

var list = document.createElement("li");
abe.setAttribute("id", "volume_list");
abe.innerHTML  = "リスト追加";
var volume_list = document.getElementById("volume_list");
volume_list.appendChild(list);

JSONデータをキーごとに1っ件ずつ読み込む

PHPでデータベースから読み込んだデータをJSON形式でJavaScriptに渡して、プルダウンを作る処理。

var data = [
    { "pl_model": "iPhone" },
    { "pl_model": "iPad" },
    { "pl_model": "iWatch" }
]

var obj = JSON.parse(data);
$('#model').append($('<option>').val('').text('モデルを選択してください'));
for(var i in obj){
	$("#model").append("<option>" + obj[i].pl_model + "</option>");
}

参考サイトURL
jQueryでjsonデータを扱ってみる【入門編】

jQueryで、CSSの書き換えやイベントの削除変更など

CSSの書き換え

//一つの時
$('.add-data-to-cart').css('color','#fff');

//2つ以上の時
$('.add-data-to-cart').css({
   'background-color' : '#777',
   'border-bottom' : '0px',
});

onclickイベントの削除

<button class="add-data-to-cart" onclick="addDataToCart()">カートに入れる</button>


//削除
$('.add-data-to-cart').get(0).onclick = '';

JavaScriptの記述場所と方法

タグの属性を使ってレンダリングの処理とJavaScriptの処理を非同期にしたり、JavaScriptの処理を遅らせたりできます。

<script src="sample.js" async></script>

async属性は非同期に対象スクリプトの読み込みと実行をします。

<script src="sample.js" defer></script>

defer属性は対象スクリプトの読み込み後、実行はDOMのレンダリング後に行います。

これら属性を使うことでhead内に記述しても動作に悪影響を及ぼさずにbody内で記述したときと同じ結果を出しパフォーマンスの向上が期待できます。

参考URL：https://codeaid.jp/js-load/