常連

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を使ってみたいと思い勉強を始めましたが、FetchでAPIを叩こうとした際に同一オリジンポリシーの問題で、APIが叩けませんでした。

なのでCORSについて、詳細なことを調べてみたのですが、分からない箇所が複数あり、その分からない箇所について教えて欲しいです。


### 同一オリジンポリシーは何の為にあるのか？

クライアントがAというオリジンのウェブサイトを表示している時、そこからBというオリジンのサーバーにはセキュリティの保護上通信が行うことが出来ないというのが、同一オリジンポリシーだと解釈しています。

そこでセキュリティ上、どうして問題があるのかということが気になり調べてみました。すると二つの記事がヒットしたので、スクリーンショットを貼ります。

![イメージ説明](1f4e0b1402cd4d3ea60b0851de166aa9.png)

こちらの記事ではウェブサイトの情報が悪用されるのを防ぐ為に、つまり上の例でいうとBというオリジンが持つウェブサイトの情報を守る為に同一オリジンポリシーがあると書かれています。

![イメージ説明](37836fedda8a7374dcb838cb061efbe3.png)

こちらの記事ではクライアント側の個人情報を守る為と書かれています。


同一オリジンポリシーがセキュリティ上どうして必要なのか、他のサイトでも調べてみたのですが、説明がまちまちだったり、解説が今の私には難しいレベルだったりして、疑問の解決には至りませんでした。

同一オリジンポリシーは、クライアント側や別オリジンのサイトが持つ情報が悪用されない為、二つの役割があるということなのでしょうか。

教えて欲しいです。


### APIがなぜか叩けた。

```ここに言語を入力

fetch('https://holidays-jp.github.io/api/v1/date.json')
  .then(response => response.text())
  .then(text => {
    console.log(text);
  });

```

ローカルに保存された、htmlからAPIを叩いたら、jsonが返ってきました。

私のブラウザはローカルに保存されたファイルを開いており、そのファイルから「https://holidays-jp.github.io/api/v1/date.json」
へと通信を行おうとすると、同一オリジンポリシーの問題で通信ができないはずです。

一体どうしてAPIを叩けたのでしょうか？

CORSについて分からないことがあります。教えて欲しいです。

### 前提・実現したいこと
データクラスから任意の文字列を取得したいと考えております。
できれば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
```
ご協力よろしくお願いいたします。


