常連

jsonファイルから抽出したデータを、
連想配列に格納し、さらに取得したデータ分、
1データごとに別配列に格納したいのですが、
配列の追加がうまくいかず、困っています。
以下、該当コードです。

```ここに言語を入力
$.ajax({
  data: {
		dataType: "jsonp",
		success: function(data) {
		var nArray = new Object;
		var nStrArray = new Object;

	for (var i = 0; i < data['data'].length; i++) {
		var n = data['data'].length;

		//data抽出
		//link
		var keyurl = "link";
		var linkurl = data['data'][i]['link'];
		nStrArray[keyurl] = linkurl;

		//srcurl
		var keysrc = "src";
		var srcurl = data['data'][i]['images']['thumbnail']['url'];
		nStrArray[keysrc] = linkurl;

		//日付
		var keydata = "key";
		var d = new Date(data['data'][i]['created_time'] * 1000);
		var year  = d.getFullYear();
		var month = d.getMonth() + 1;
		var day  = d.getDate();
		var ndata = year + '/' + month + '/' + day;
		nStrArray[keydata] = ndata;

		//キャプション
		if(data['data'][i]['caption'] != null) {
		var keycaptext = "text";
		var captext = data['data'][i]['caption']['text'];
		nStrArray[keycaptext] = captext;
		}

		//nArray[i].push(nStrArray);
		nArray[i] += nStrArray;
	};
});
```

上記のコードで、nArrayにループされるごとに、nStrArrayごとを格納したいのですが、
データが全て上書きされてしまいnArrayの配列の中身が全て同じものという、
現象に陥っております。

検索し、配列の追加はpush関数を使用するという記述を見つけたので、
それも試してみたのですが、うまく配列の中に格納されずに困っております。
初歩的なご質問で申し訳ありませんが、javaScriptの配列操作に詳しい方ご教授の程お願い致します。

【javascript】配列に連想配列を格納する

### 前提

家電をコントロールできるWebアプリのフロントエンド側をReact.jsを使用し作成しています。

### 実現したいこと

バックエンドの状態をトグルに反映させたい。

### 発生している問題・エラーメッセージ

機器(sensor)にはarmedというフィールドがあるのですが
そこがtrueの時はトグルがON、falseの時はOFFにしたいと考えていますが
反映がされません。。。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-01-04/ba1bb277-944c-4c36-b95f-a51c7dd88e99.png)

### 該当のソースコード

```Json
{
    "attributes": {
        "sensor": [
            {
                "object_id": "0x0082_38",
                "armed": true,
            },
        ],
    }
}
```

```ToggleSwitchButton.js
import React from 'react'
import styled from 'styled-components'

const StyledToggleSwitchButton = styled.div`
	& input {
		display: none;
		&:checked + label {
			background-color: #7CFC00;
			&::before {
				left: 2em;
			}
		}
	}

	& label {
		background-color: #062863;
		border-radius: 2em;
		border: 2px solid var(--text-color);
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 2em;
		position: relative;
		transition: .5s;
		width: 3.75em;

		&::before {
			background: #fff;
			border-radius: 100%;
			content: '';
			display: inline-block;
			height: 1.5em;
			position: absolute;
			left: 0.25em;
			transition: .5s ease-out;
			width: 1.5em;
			z-index: 2;
		}
	}

	@media(max-width:751px){
		& input {
			display: none;
			&:checked + label {
				background-color: #7CFC00;
				&::before {
					left: 1em;
				}
			}
		}
	
		& label {
			background-color: #062863;
			border-radius: 1em;
			border: 1px solid var(--text-color);
			display: flex;
			align-items: center;
			justify-content: space-around;
			height: 1em;
			position: relative;
			transition: .5s;
			width: 1.75em;
	
			&::before {
				background: #fff;
				border-radius: 100%;
				content: '';
				display: inline-block;
				height: 1em;
				position: absolute;
				left: 0.2em;
				transition: .5s ease-out;
				width: 1em;
				z-index: 2;
			}
		}

	}
	
	
	@media(max-width:282px){
		@media(max-width:751px){
			& input {
				display: none;
				&:checked + label {
					background-color: #7CFC00;
					&::before {
						left: 1em;
					}
				}
			}
		
			& label {
				background-color: #062863;
				border-radius: 1em;
				border: 1px solid var(--text-color);
				display: flex;
				align-items: center;
				justify-content: space-around;
				height: 1em;
				position: relative;
				transition: .5s;
				width: 1.75em;
		
				&::before {
					background: #fff;
					border-radius: 100%;
					content: '';
					display: inline-block;
					height: 1em;
					position: absolute;
					left: 0.2em;
					transition: .5s ease-out;
					width: 1em;
					z-index: 2;
				}
			}
	
	}
	
`

const ToggleSwitchButton = ({ className, handleChange }) => (
	<StyledToggleSwitchButton className={className}>
		<input id="btn-mode" type="checkbox" onChange={handleChange} />
		<label htmlFor="btn-mode">
    </label>
  </StyledToggleSwitchButton>
)

export default ToggleSwitchButton;
```


```SensorDetail.js
import ToggleSwitchButton from '../../ToggleSwitchButton'

const SensorDetail = (props) => {

    const { object_id } = useParams();
    
    const [sensor, setSensor] = useState([]);
    
    const [isToggle, setIsToggle] = useState();
    const [toggle_status, setToggleStatus] = useState();
  
    const handleChange = useCallback(() => {
      // Executed when the toggle switch is turned on or off
    	if(isToggle) {
    	  setIsToggle(false);
          alert('switch off!');
          setDisarm();
        }
        else{
          setIsToggle(true);
          alert('switch on!');
          setArm();
        }
    }, [isToggle]);


    const getDevices = async(data) => {
      await axios.get('xxx.com',
        {
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${cookies.get('accesstoken')}`
          },
        })
        .then(result => {
          setSensor(result.data.attributes.sensor);  
          // get the arm status
          setToggleStatus(result.data.attributes.sensor.filter(c => c.object_id === object_id).map((item,i) =>  item.armed)[0]);  
           // toggle_status contains the backend toggle status (armed is true, disarmed is false).
           // If toggle status is true here, setIsToggle(true) to true isToggle,
           // If the toggle status is false here, setIsToggle(false) sets isToggle to false.
           // (setIsToggle(true) toggles ON, setIsToggle(false) toggles OFF)
          if (result.data.attributes.sensor.filter(c => c.object_id === object_id).map((item,i) =>  item.armed)[0] == true) {
            setIsToggle(true);
          }
          else {
            setIsToggle(false);
          };
    
        })
        .catch(err => {
          console.log(err);
        });
    }
    
    useEffect(() => {
      getDevices();
    },[]);

    return (
        <div>
            <p>Device Status</p>
            <div>
            {item.armed == true ?
              <p>Armed</p>
            :
              <p>Disarmed</p>
            }
            <ToggleSwitchButton handleChange={handleChange} />
    
        </div>
    );
}
export default SensorDetail;
```




React.jsにてバックエンドの状態（ture, false）をトグルに反映させたい。

### 前提・実現したいこと

Google App Scripts でWebAPIを作り、pythonからURLアクセスし、レスポンス（text）を受け取りたい。

参考サイト：https://qiita.com/satto_sann/items/be4177360a0bc3691fdf


### 現状
URLアクセスすればコード200とレスポンスをブラウザに表示されるようになりました。

サイト紹介のAPIのURL:https://script.google.com/macros/s/AKfycbzZtvOvf14TaMdRIYzocRcf3mktzGgXvlFvyczo/exec?text=Hello&source=en&target=ja

![イメージ説明](f2c1e07ed5c9c066c4eb08bcd5e7d58c.png)

もしくは、Operaブラウザでのアクセス後の表示
![イメージ説明](0f1c129cee5de8cc22c811d4814ca0e7.png)


### source code
今回python側のJSON受け取りの問題なのですが念のためGAS側も掲載します。

```GAS
function doGet(e) {
    // リクエストパラメータを取得する
    var p = e.parameter;
    //  LanguageAppクラスを用いて翻訳を実行
    var translatedText = LanguageApp.translate(p.text, p.source, p.target);
    
    // レスポンスボディの作成
    var body;
    if (translatedText) {
        body = {
          code: 200,
          text: translatedText
        };
    } else {
        body = {
          code: 400,
          text: "Bad Request"
        };
    }
    // レスポンスの作成
    var response = ContentService.createTextOutput();
    // Mime TypeをJSONに設定
    response.setMimeType(ContentService.MimeType.JSON);
    // JSONテキストをセットする
    response.setContent(JSON.stringify(body));

    return response;
}
```


```python
import urllib
import urllib.request
import pdb
response = urllib.request.urlopen('https://script.google.com/macros/s/AKfycbzZtvOvf14TaMdRIYzocRcf3mktzGgXvlFvyczo/exec?text=Hello&source=en&target=ja')

print('url:', response.geturl())
print('code:', response.getcode())
print('text:', response.info()['body'])
print('text3:', response.info())
print('text4', response.headers['Content-Type'])
print('text4', response.headers)

print('text4', response.body['text'])
print('Content-Type:', response.info()['Content-Type'])
content = response.read()
print(content)
response.close()
```

### 発生している問題・エラーメッセージ
しかし、そのままprint表示しますとResponse<200>のみで”こんにちは"のみを返却して利用したいのですが、目当てのものが取得できないでおります。

かなりたくさんの方法でレスポンスからtextの結果のこんにちはを受け取ろうとしましたが、他のものがprint表示されています。


### 試したこと
①
```python
import json
import urlopen
import pdb
jsons  = urlopen("https://script.google.com/macros/s/AKfycbzZtvOvf14TaMdRIYzocRcf3mktzGgXvlFvyczo/exec?text=Hello&source=en&target=ja").read().decode('utf-8').split('\n')

result = []
for v in jsons :
    try:
        js = json.loads(v)
        result.append( js['info'] )
    except Exception:
        pass
pdb.set_trace()
print(result)
```

②
```python
from urllib.request import Request, urlopen
from urllib.error import URLError
req = Request("https://script.google.com/macros/s/AKfycbzZtvOvf14TaMdRIYzocRcf3mktzGgXvlFvyczo/exec?text=Hello&source=en&target=ja")
try:
    response = urlopen(req)
except URLError as e:
    if hasattr(e, 'reason'):
        print('We failed to reach a server.')
        print('Reason: ', e.reason)
    elif hasattr(e, 'code'):
        print('The server couldn\'t fulfill the request.')
        print('Error code: ', e.code)
print(response)
```
③
```python
import requests
import json

#GET先URL
# url = "https://script.google.com/macros/s/AKfycbzZtvOvf14TaMdRIYzocRcf3mktzGgXvlFvyczo/exec"

#JSON形式のデータ
jsonData = {
    "text": "Hello",
    "source": "en",
    "target": "ja"
}    

#GET送信
response = requests.post(
    url = "https://script.google.com/macros/s/AKfycbzZtvOvf14TaMdRIYzocRcf3mktzGgXvlFvyczo/exec",
    params = jsonData
    )

resDatas = response.json()

print(resDatas)
```

④
```python
import execjs
print(execjs.eval("'red yellow blue'.split(' ')"))

ctx = execjs.compile("""function add(x, y) {return x + y;}""")
print(ctx.call("add", 1, 2))

import requests
get_url_info = requests.get('https://script.google.com/macros/s/AKfycbzZtvOvf14TaMdRIYzocRcf3mktzGgXvlFvyczo/exec?text=Hello&source=en&target=ja')
print(get_url_info)


payload = {'text': 'Hello', 'source': 'en', 'target': 'ja'}
r = requests.get('https://script.google.com/macros/s/AKfycbzZtvOvf14TaMdRIYzocRcf3mktzGgXvlFvyczo/exec', params=payload)
print(r.args['text'])
```

どのようにすればレスポンスコード200ではなくtextのこんにちはを取得できるのでしょうか。
pythonのHTTPGET時のJSONのパラメータ受け取りについてアドバイス頂けないでしょうか。
よろしくお願い致します。

### 補足情報（FW/ツールのバージョンなど）

python3.7
windows10 home
GAS

### 2020/05/24 10:56 追記
GAS側で公開設定しなければレスポンスのContentTypeがJSONにならずデコードエラーになってしまう（API実行後のpython受け取り時）ため、しっかりと公開をしているか再度確認しました。
エラーの際の画面
![イメージ説明](aee32bf2304b84dcda090206ca3f87c5.png)

対応としてアドバイス頂いたGAS公開設定。
![イメージ説明](a0d5b3b2553b506f0348c09d8591636a.png)

しかし再度API実行したところ状況変わらずでした。
ひとつ懸念点は、どうやらGASは唯一のデメリットとして反映するまでに時間がかかるとのことでした。でもすぐに反映できたと言われたため私は他に原因があるのでしょうか。

GASのAPIへpythonからURLアクセスGet送信し特定のレスポンスを受け取りたい。

クロスドメインかつBASIC認証のかかったリソースにajaxでアクセスする方法を、いろいろと試しておりますがなかなかうまくいきません。

データは、パラメータ等をつけてアクセスするとJSONP形式で吐かれるAPIです。

```JavaScript
$.ajax({
	type:'GET',
	url:APIurl,
	dataType:'jsonp',
	jsonpCallback:'callback',
	cache:false,
	async:true,
	beforeSend: function(xhr){
		xhr.setRequestHeader('Authorization', 'Basic ' + btoa('username:password'));
	}
}).done(
	function(data){
		～以下、成功時の処理～
```

のような書き方をしています。
xhrの中身を見てみると、setRequestHeader 内に値はセットされていますが、認証の ID/Password を求められます。

JavaScriptだけで解決する方法はありますでしょうか？

何卒宜しくお願い申し上げます。

クロスドメインかつBASIC認証のかかったリソースにajaxでアクセスする方法

###前提・実現したいこと
javascriptでapiを使って簡単なサイトを作ってみようとしたのですが、どうやらjsonpデータを受け取れていないようです。
jQueryでコーディングした場合はできましたので、zipcloud自体には問題はないはずです（当たり前ですが）

簡単なサイトとは具体的には、郵便番号を入力し、それに対応する住所をapiを使って持って来て、それを表示するというものです。

###発生している問題・エラーメッセージ
コンソールに表示されたエラー
```
js1.js:12 GET https://zipcloud.ibsnet.co.jp/api/search?zipcode=113-0043&callback=jsonData net::ERR_CONNECTION_CLOSED
(anonymous) @ js1.js:12

```

###該当のソースコード
```html
<DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="stylesheet.css" type="text/css">
		<script type="text/javascript" src="js1.js"></script>
	</head>
		<body>
			<h3>Address Search</h3>
			<label>Postal Code<input id="postalcode" type="text" 
			size="13" maxlength="8" placeholder="example: xxx-xxxx"></label>
			<button id="btn">Search</button>
			<div id="result">
				<p><label>Prefectures<input id="pref" type="text" size="6"></label></p>
				<p><label>Cities<input id="city" type="text" size="6"></label></p>
				<p><label>Street address<input id="saddress" type="text"></label></p>
			</div>
		</body>
</html>
```
```javascript
document.addEventListener("DOMContentLoaded", function () {
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
	var postalcode = document.getElementById('postalcode');
	var pref = document.getElementById('pref');
	var city = document.getElementById('city');
	var address = document.getElementById('saddress');
	var script = document.createElement('script');
	
	script.src = "https://zipcloud.ibsnet.co.jp/api/search?zipcode="
	+ postalcode.value + "&callback=jsonData";
	document.body.appendChild(script);
	document.body.removeChild(script);
})
})

function jsonData(data) {
	pref.value = data.result[0].address1;
	city.value = data.result[0].address2;
	address.value = data.result[0].address3;
}
```
```css
#result {
	margin-top: 30px;
}
```
###補足情報(言語/FW/ツール等のバージョンなど)
コードは上から順に
sample.html
js1.js
stylesheet.css
となっております。

回答よろしくお願いします。

javascriptでjsonpデータを受け取りたい(zipcloud 郵便番号)

Promise.allを利用してjsonpデータを並行で取得しようとしたのですが、最後に記述したPromise以外は"Uncaught ReferenceError: callback is not defined"とcallbackが未定義扱いのエラーが発生してしまいます。

```javascript
$(function() {
  Promise.all([promise(), promise()]).then(function(values) {
    console.log(values);
  });
});

function promise() {
  var def = $.Deferred();

  $.ajax({
    type: 'GET',
    url: './js/data.jsonp',
    dataType: 'jsonp',
    jsonpCallback: 'callback'
  }).fail(function(jqXHR, textStatus, errorThrown) {
    def.resolve("fail");
  }).done(function(data) {
    def.resolve("done");
  });

  return def.promise();
}
```
jsonpのデータは次のものを読み込んでいます。
```jsonp
callback(
{
	"hoge": "foo"
}
);

```

JQueryのバージョン3.1.1です。

jsonデータであれば、問題なく読み込めるのですが、jsonpだとエラーが発生してしまいます。
不足している処理内容がありましたら、ご教授のほどよろしくお願いいたします。

Promise.allでjsonpデータを取得しようとすると、callbackが未定義扱いされてしまう

###やりたいこと
最寄駅情報取得の外部APIを叩いて、JSONデータを取得したい。

この辺を参考に、クロスドメインでのデータ取得方法を実装しました。
https://www.webprofessional.jp/jsonp-examples/

###コードと困っていること
```
var url = "http://express.heartrails.com/api/json?method=getStations&x=" + longitude + "&y=" + latitude + "callback=?"

$.getJSON(
  url,
  function(json){
    console.log("OK");
});
```

上記コードでアクセスし、DeveloperToolのNetworkを見てみるとstatus_code: 200とresponseもJSON形式で返ってくるのですが、

```
Uncaught SyntaxError: Unexpected token :
```
コンソール上には上記のエラーが出て、コールバック関数が実行されません。
返却されたJSONの値にアクセスしたいのですが、どうしたらよいでしょうか。

レスポンス
```
Cache-Control:private, max-age=0, must-revalidate
Connection:close
Content-Length:897
Content-Type:application/json; charset=utf-8
ETag:"441d2962e4d44847439b76038593d690"
Expires:Thu, 01 Dec 1994 16:00:00 GMT
Pragma:no-cache
Server:nginx/0.8.54 + Phusion Passenger 3.0.0 (mod_rails/mod_rack)
Status:200
X-Powered-By:Phusion Passenger (mod_rails/mod_rack) 3.0.0
X-Runtime:3
```
レスポンスデータ
```
{"response":{"station":[{"distance":"230m","postal":"1410031","x":139.724069,"next":"大崎広小路","prev":null,"y":35.625069,"line":"東急池上線","prefecture":"東京都","name":"五反田"},{"distance":"240m","postal":"1410022","x":139.723909,"next":"目黒","prev":"大崎","y":35.625805,"line":"JR山手線","prefecture":"東京都","name":"五反田"},{"distance":"300m","postal":"1410032","x":139.722357,"next":"戸越銀座","prev":"五反田","y":35.622303,"line":"東急池上線","prefecture":"東京都","name":"大崎広小路"},{"distance":"340m","postal":"1410022","x":139.724181,"next":"高輪台","prev":"戸越","y":35.627111,"line":"都営浅草線","prefecture":"東京都","name":"五反田"},{"distance":"760m","postal":"1410031","x":139.713149,"next":"武蔵小山","prev":"目黒","y":35.625421,"line":"東急目黒線","prefecture":"東京都","name":"不動前"}]}}

```

解決方法がわかる方いらっしゃいましたら、よろしくお願いします。
ブラウザ： GoogleChrome

JSONPで外部APIからJSONデータ取得後にunexpected token : のエラー

### 前提・実現したいこと
データクラスから任意の文字列を取得したいと考えております。
できればfor文で｛words.length｝まで繰り返し処理をして、”text”を配列に格納していき、最終的には文字列として表示させたいと考えております。しかし実装方法が分からず苦戦しております。
### 発生している問題・エラーメッセージ
var text =result.regions.lines.word.get(0).text
linesが赤字のエラーになっています
エラーメッセージ：Function invocation 'lines(...)' expected
原因は分かっているのですが、解決方法が分かりません。

**JSON**
```ここに言語を入力
{
    "language": "ja",
    "textAngle": 0.0,
    "orientation": "Up",
    "regions": [
        {
            "boundingBox": "181,56,1235,2696",
            "lines": [
                {
                    "boundingBox": "560,368,304,2256",
                    "words": [
                        {
                            "boundingBox": "568,368,296,376",
                            "text": "A"
                        },
                        {
                            "boundingBox": "592,2448,184,176",
                            "text": "B"
                        }
                    ]
                },
                {
                    "boundingBox": "1001,1518,86,1232",
                    "words": [
                        {
                            "boundingBox": "1041,1518,35,43",
                            "text": "C"
                        },
                        {
                            "boundingBox": "1001,2648,33,102",
                            "text": "D"
                        }
                    ]
                }
            ]
        }
    ],
    "modelVersion": "2021-04-01"
}
```
**データクラス**
```ここに言語を入力
**Example.java**

@Generated("jsonschema2pojo")
public class Example {

    @SerializedName("language")
    @Expose
    public String language;
    @SerializedName("textAngle")
    @Expose
    public Float textAngle;
    @SerializedName("orientation")
    @Expose
    public String orientation;
    @SerializedName("regions")
    @Expose
    public List<Region> regions = null;
    @SerializedName("modelVersion")
    @Expose
    public String modelVersion;

}
```
```ここに言語を入力
**Line.java**

@Generated("jsonschema2pojo")
public class Line {

    @SerializedName("boundingBox")
    @Expose
    public String boundingBox;
    @SerializedName("words")
    @Expose
    public List<Word> words = null;

}
```
```ここに言語を入力
**Region.java**

@Generated("jsonschema2pojo")
public class Region {

    @SerializedName("boundingBox")
    @Expose
    public String boundingBox;
    @SerializedName("lines")
    @Expose
    public List<Line> lines = null;

}
```
```ここに言語を入力
@Generated("jsonschema2pojo")
public class Word {

    @SerializedName("boundingBox")
    @Expose
    public String boundingBox;
    @SerializedName("text")
    @Expose
    public String text;

}
```
該当ソースコード
```ここに言語を入力
val result = Gson().fromJson(result, Example::class.java)

var text =result.regions.lines.word.get(0).text
//このコードに不備があります
         
 txt_result.text = text
```
ご協力よろしくお願いいたします。


