json形式のデータの取り出し方

前提・実現したいこと

選択内容に応じて次のセレクトボックスの内容を動的に変化させる際に、optionの値を指定したいです。
以下のサイトを参考にして、セレクトボックスを動的に変化させるとこまでは、完成しました。
[jQuery] セレクトボックスの切り替えに応じて、次のセレクトボックスの選択肢を切り替える

valueの値をjson形式で取得したデータよりセットしようと試みましたが、以下の連想配列より'code'もしくは'name'部分のみ取り出す方法が分かりません。

取り出すために実施したこと

javascript
1for (var key in b_options) {
2  console.log(b_options);
3  console.log("b_options[key].code");
4  console.log("b_options[key].name");
5}
6
7//出力結果
8var b_options =[[{"code":"001","name":"営業A"},{"code":"002","name":"営業B"},{"code":"003","name":"営業C"},{"code":"004","name":"開発"}],[{"code":"001","name":"営業A"},{"code":"002","name":"営業B"},{"code":"003","name":"開発"}],
9[{"code":"001","name":"営業A",{"code":"002","name":"営業B"},{"code":"003","name":"開発A"},{"code":"004","name":"開発B"}]]
10undefined
11undefined

最終的には以下のような表示を実現したいです。

html
1<select id="select_a">東日本</select> 
2<select　id="select_b">
3 <option value="001">営業A</option>
4 <option value="002">営業B</option>
5 <option value="003">開発</option>
6</select>

現在の完成したコード

html
1<html>
2 <head>
3  <title>PHP Test</title>
4   <!-- Bootstrap CDN 読込-->
5   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
6   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
7   <link rel="stylesheet" href="style.css">
8 </head>
9 <body>
10  <select id="select_a"></select> 
11  <select id="select_b"></select> 
12 </body>
13</html>

javascript
1<script>
2var a_options = ['東日本', '西日本','海外'];
3var b_options = JSON.parse('<?php echo $json; ?>');
4
5$(function() {
6 
7  //
8  // select要素を予め取得しておく
9  //
10  var $select_a = $('#select_a');
11  var $select_b = $('#select_b');
12 
13  //
14  // セレクトボックス①決定時にセレクトボックス②に選択肢を設定
15  //
16  $select_a.change(function(e) {
17    var selected_a = $select_a.val();
18    $('#select_b option').remove();
19    b_options[selected_a].forEach(function(option_b, idx) {
20      var $option_tag = $('<option>').val(idx).text(option_b);
21      $select_b.append($option_tag);
22    });
23    $select_b.change();
24  });
25 
26  //
27  // セレクトボックス①は固定なので最初に選択肢に追加する
28  //
29  a_options.forEach(function(option_a, idx) {
30    var $option_tag = $('<option>').val(idx).text(option_a);
31    $select_a.append($option_tag);
32    $select_a.change();
33  });
34 
35});

azuapricot

2019/11/07 08:24

現状のコードを全て載せればよいというわけではなくて、関連する部分だけ絞らないと何がわからないのか不明瞭な質問になってしまいます。例えば「$sqla ="select code,name from amas";」　これとか実際に聞きたいこととは関係ないですよね？ PHPもいらないんじゃないでしょうか。今困ってるのは、PHPで作ったJSON形式の配列を、javaScriptで連想配列に戻してselectに詰めなおす方法ですよね？質問がとにかく分かりにくいので、修正することをお勧めします。第三者がこれを見て答えられそうか、すぐにわかりそうか確認してから質問をあげるといいです。

azuapricot

2019/11/07 08:26

javaScriptでJSON形式から変換した連想配列はどうなっているのか、など今困っているところを具体的に書きましょう

muramurako15

2019/11/07 09:16 編集

ご指摘ありがとうございます。指摘いただいた点を参考にして、質問内容を修正しました。

kei344

2019/11/07 09:27

ご自身で試された「配列から取り出す」コードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

muramurako15

2019/11/07 10:10

ご指摘ありがとうございます。実際に取り出すために書いたコードとその出力結果を記載しました。

行動規範の内容に同意します

回答2件

ベストアンサー

'code'もしくは'name'部分のみ取り出す方法が分かりません。

まず、下記は「連想配列」ではなく、codeとnameというプロパティをもったオブジェクトの配列が3つ入った配列です。（提示されたJSONは}が一つ足りないので構文エラーになりますが）

JSON
1[[{"code":"001","name":"営業A"},{"code":"002","name":"営業B"},{"code":"003","name":"営業C"},{"code":"004","name":"開発"}],[{"code":"001","name":"営業A"},{"code":"002","name":"営業B"},{"code":"003","name":"開発"}],
2[{"code":"001","name":"営業A"},{"code":"002","name":"営業B"},{"code":"003","name":"開発A"},{"code":"004","name":"開発B"}]]

最初に出てくる"001"にアクセスするだけならb_options[0][0].codeでアクセスできます。
必要に応じて配列用のメソッド（forEachなど）を組み合わせるなどして使用します。

【Array - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array

【配列 · JavaScript Primer #jsprimer】
https://jsprimer.net/basic/array/

【ループと反復処理 · JavaScript Primer #jsprimer】
https://jsprimer.net/basic/loop/#for-statement

投稿2019/11/07 16:00

kei344

総合スコア69596

サーバー側でSQLでも走らせているのでしょか？
であればselect_aのchangeイベントでajax(or fetch)でselect_bのリストを
もってくればいいでしょう

mypage.html

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  const s_a=document.querySelector('#select_a');
4  const s_b=document.querySelector('#select_b');
5  const url="json.php";
6  s_b.disabled=true;
7  s_a.addEventListener('change',e=>{
8    s_b.disabled=s_a.selectedIndex==0;
9    fetch(url+'?select_a='+s_a.value).then(res=>res.json()).then(res=>{
10      const dom=res.map(x=>Object.assign(document.createElement('option'),{value:x.code,textContent:x.name}));
11      while(s_b.querySelectorAll('option').length>1){
12        s_b.removeChild(s_b.querySelector('option:nth-child(2)'));
13      }
14      dom.forEach(x=>s_b.appendChild(x));
15    });
16  });
17});
18</script>
19<select id="select_a" name="select_a">
20<option value="">= 選択 =</option>
21<option value="0">東日本</option>
22<option value="1">西日本</option>
23<option value="2">海外</option>
24<option value="3">ダミー</option> <!-- select_bは空になる -->
25</select> 
26<select id="select_b"name="select_b">
27<option value="">= 選択 =</option>
28</select>

json.php

PHP
1<?PHP
2$select_a=filter_input(INPUT_GET,"select_a",FILTER_VALIDATE_INT);
3$a=[
4  [
5    ["code"=>"001","name"=>"営業A"],
6    ["code"=>"002","name"=>"営業B"],
7    ["code"=>"003","name"=>"営業C"],
8    ["code"=>"004","name"=>"開発"],
9    ],
10  [
11    ["code"=>"001","name"=>"営業A"],
12    ["code"=>"002","name"=>"営業B"],
13    ["code"=>"003","name"=>"開発"]
14    ],
15  [
16    ["code"=>"001","name"=>"営業A"],
17    ["code"=>"002","name"=>"営業B"],
18    ["code"=>"003","name"=>"開発A"],
19    ["code"=>"004","name"=>"開発B"],
20    ],
21  ];
22$list_a=array_keys($a);
23if(in_array($select_a,$list_a,true)===false){
24  $select_a=null;
25}
26
27if(!is_null($select_a)){
28  print json_encode($a[$select_a]);
29}else{
30  print "[]";
31}
32?>