APIで取得したデータを加工し、出力したい

現在apiから取得したデータを加工して文字列として出力するプログラムを作りたいのですが、APIについて素人に毛が生えた程度しか知識がないので、質問させていただきます。

実現したい事

{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},

例えばこのデータの"name", "username", "email" を取得し、

名前：Leanne Graham
ユーザーネーム：Bret
メールアドレス：Sincere@april.biz

このように出力したいです。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7</head>
8<body>
9    <script>
10        const USERS_API ="https://jsonplaceholder.typicode.com/users";
11        async function callApi() {
12            const res = await window.fetch(USERS_API);
13            const users = await res.json();
14            console.log('名前：'.users['name']);
15        }
16
17        callApi();
18    </script>
19</body>
20</html>

試した事

console.log(users['name'])などとしましたが、「'name'プロパティが見つかりません」と出てきました。

数時間程度検索を欠けたのですが、自分が望むような記事に出会えず、質問させていただきました。
また自分は普段PHPを使用しているのjavascriptにも疎く、知識がないので質問させていただきました。

わかる方がいらしたらご回答よろしくお願いします。

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

回答1件

ベストアンサー

状況がわかりません

現在apiから取得したデータ

PHPがjsonを吐いてそれをajaxかなにかで受ける前提でしょうか？
dataをすでにうけているなら

javascript
1var data={
2  "id": 1,
3  "name": "Leanne Graham",
4  "username": "Bret",
5  "email": "Sincere@april.biz",
6  "address": {
7    "street": "Kulas Light",
8    "suite": "Apt. 556",
9    "city": "Gwenborough",
10    "zipcode": "92998-3874",
11    "geo": {
12      "lat": "-37.3159",
13      "lng": "81.1496"
14      }
15  }
16}
17var name=data.name;
18var username=data.username;
19var email=data.email;
20console.log([name,username,email]);