【Java script問題集】2-4 「2-2.」からfromが同じ人の情報を括りだしてみよう
2-4.html
<html>
<head>
<title>2-4</title>
</head>
<body>
<ul id="tokyo">東京出身</ul>
<ul id="fukuoka">福岡出身</ul>
</script>
</body>
</html>
2-4.js
var members = [
{ "name": 'suzuki', "age": 27, "from": 'tokyo' },
{ "name": 'tanaka', "age": 32, "from": 'fukuoka' },
{ "name": 'takahashi', "age": 30, "from": 'fukuoka' },
{ "name": 'yamamoto', "age": 28, "from": 'tokyo' }
];
// fromがtokyoの要素の配列を返す
var tokyo_members = members.filter(item => item.from === 'tokyo');
// fromがfukuokaの要素の配列を返す
var fukuoka_members = members.filter(item => item.from === 'fukuoka');
// 東京出身メンバー情報を「名前（年齢）」の形式でリストに整形
$.each(tokyo_members,
function(s, elem) {
$('<li></li>').append(elem.name + '（' + elem.age + ')').appendTo('#tokyo');
}
);
// 福岡出身メンバー情報を「名前（年齢）」の形式でリストに整形
$.each(fukuoka_members,
function(s, elem) {
$('<li></li>').append(elem.name + '（' + elem.age + '）') .appendTo('#fukuoka');
}
);
実行結果
