回答編集履歴
1
テキスト修正
answer
CHANGED
|
@@ -45,4 +45,29 @@
|
|
|
45
45
|
（※上記のサンプルで使っているmockableのエンドポイントは、このご質問の解決後、削除します。ご了承ください）
|
|
46
46
|
|
|
47
47
|
|
|
48
|
-
以上、参考になれば幸いです。
|
|
48
|
+
以上、参考になれば幸いです。
|
|
49
|
+
|
|
50
|
+
### 追記
|
|
51
|
+
|
|
52
|
+
以下のような関数（の入っている変数）`addPerson`
|
|
53
|
+
|
|
54
|
+
```javascript
|
|
55
|
+
const addPerson = ({ name, imgUrl, personalUrl }) => {
|
|
56
|
+
$('#display').append(
|
|
57
|
+
`<div class="main-wrapper">
|
|
58
|
+
<h2>
|
|
59
|
+
<span class="name">${name}</span>
|
|
60
|
+
さん
|
|
61
|
+
</h2>
|
|
62
|
+
<a class="personalUrl" href="${personalUrl}">
|
|
63
|
+
<img class="imgUrl" src="${imgUrl}" alt="自画像">
|
|
64
|
+
</a>
|
|
65
|
+
</div>`);
|
|
66
|
+
};
|
|
67
|
+
```
|
|
68
|
+
を作っておくと、`$.getJSON` の成功時は、以下のようにさらに手短に書けます。
|
|
69
|
+
```javascript
|
|
70
|
+
$.getJSON(url).then(addPerson);
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
- **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/yLeLaVE?editors=1010](https://codepen.io/jun68ykt/pen/yLeLaVE?editors=1010)
|