[JS]Radio Buttons複選撈多個JSON資料，依照選擇條件組合成一個JSON

js json radiobutton

希希寶 2021-10-15 16:26:03 ‧ 1233 瀏覽

分享至

我希望提供一個有四個複選按鈕，點下計算時，程式會依照使用者所選，撈出所選按鈕的JSON，再將這些JSON彙整成一個JSON，

例如：
我今天選擇A與C，點下計算後，我希望得到的console.log為

//rad A
var A = [{"Year":"2021","Subject":"one","A_Value":"123"},{"Year":"2021","Subject":"two","A_Value":"135"}]  

//rad C
var C = [{"Year":"2021","Subject":"one","C_Value":"168"},{"Year":"2021","Subject":"two","C_Value":"320"}]  
        
//合併後得到
[{"Year":"2021","Subject":"one","A_Value":"123","C_Value":"168"},{"Year":"2021","Subject":"two","A_Value":"135","C_Value":"320"}]

若選擇A、B與C，我希望得到的console.log為

//rad A
var A = [{"Year":"2021","Subject":"one","A_Value":"123"},{"Year":"2021","Subject":"two","A_Value":"135"}]  
        
//rad B
var B = [{"Year":"2021","Subject":"one","B_Value":"259"},{"Year":"2021","Subject":"two","B_Value":"342"}]  

//rad C
var C = [{"Year":"2021","Subject":"one","C_Value":"168"},{"Year":"2021","Subject":"two","C_Value":"320"}]  
        
//合併後得到
[{"Year":"2021","Subject":"one","A_Value":"123","B_Value":"259","C_Value":"168"},{"Year":"2021","Subject":"two","A_Value":"135","B_Value":"342","C_Value":"320"}]

以下是我目前撰寫到一半的程式碼，現在可以撈出使用者勾選的按鈕value與網頁上顯示的值，但彙整JSON這邊卡關了...。

<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<script>

	function btnSubmit(){

		var A = [{"Year":"2021","Subject":"one","A_Value":"123"},{"Year":"2021","Subject":"two","A_Value":"135"}]  
		var B = [{"Year":"2021","Subject":"one","B_Value":"259"},{"Year":"2021","Subject":"two","B_Value":"342"}]  
		var C = [{"Year":"2021","Subject":"one","C_Value":"168"},{"Year":"2021","Subject":"two","C_Value":"320"}]  
		var D = [{"Year":"2021","Subject":"one","D_Value":"352"},{"Year":"2021","Subject":"two","D_Value":"254"}] 
		
		var checkboxValue = new Array();
		var checkboxText = new Array();
		var checkboxStr = document.getElementsByName("tab1rad");
		var i;
		
		for(i=0; i<checkboxStr.length; i++){
			if(checkboxStr[i].checked){
				checkboxValue.push(checkboxStr[i].value);
				checkboxText.push(checkboxStr[i].nextSibling.nodeValue);
				//console.log(checkboxStr[i].value);
				//console.log(checkboxStr[i].nextSibling.nodeValue);
			}
		}
		
		
		console.log("checkboxValue="+checkboxValue);
		console.log("checkboxText="+checkboxText);
		
		//組合成一個JSON
		console.log();

	}
</script>
<body>
	<input type="checkbox" id="tab1_A" name="tab1rad" value="1" >A
	<input type="checkbox" id="tab1_B" name="tab1rad" value="2" >B
	<input type="checkbox" id="tab1_C" name="tab1rad" value="3" >C
	<input type="checkbox" id="tab1_D" name="tab1rad" value="4" >D
	
	<button onClick=btnSubmit() name="btnSubmit" id="btnSubmit">  計 算  </button>
</body>

</html>

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

Mao

iT邦新手 1 級 ‧ 2021-10-15 18:23:47

最佳解答

修改之前的做法，這次以盡量不更動原本的程式碼，
希望你看得懂～

  /*  以上省略  */
  var total = checkboxValue.length;  // 獲取勾選 list 的長度
  var data = [ A, B, C, D ];  // 資料集中管理，方便處理
  console.log(data[(checkboxValue[0] - 1)])  // 檢查選取資料是否正確
  var data_1 = [];  // 資料一
  var data_2 = [];  // 資料二

  for(let i = 0; i < total; i++){
    data_1.push(data[(checkboxValue[i] - 1)][0]) // 資料一的放一起
    data_2.push(data[(checkboxValue[i] - 1)][1]) // 資料二的放一起
  }
  data_1 = Object.assign(...data_1);  // 物件合併
  data_2 = Object.assign(...data_2);  // 物件合併

  const data_json = [ data_1, data_2 ]  // 資料一與資料二合併
  //組合成一個JSON
  console.log(data_json);  // 解答
}

利用 Object.assign 與展開運算符 ... 進行物件合併
會建議你學習 ES6 語法會更好進行資料處理
Codepen 示範

回應 3
分享
檢舉

希希寶 iT邦新手 4 級 ‧ 2021-10-18 09:04:23 檢舉

了解，謝謝你~~
也謝謝你的建議!!

希希寶 iT邦新手 4 級 ‧ 2021-10-19 15:07:32 檢舉

不好意思想再請教一下，如果今天我的JSON格式變成只有一組或是多組

var A = [{"Year":"2021","Subject":"one","A_Value":"123"}]  
var B = [{"Year":"2021","Subject":"one","B_Value":"259"}]  

//or
        
var A = [{"Year":"2021","Subject":"one","A_Value":"123"},{"Year":"2021","Subject":"two","A_Value":"135"},{"Year":"2021","Subject":"three","A_Value":"32"}]  
var B = [{"Year":"2021","Subject":"one","B_Value":"259"},{"Year":"2021","Subject":"two","B_Value":"342"},{"Year":"2021","Subject":"three","B_Value":"35"}]

若只有一組時，是不是只要在for迴圈前先去判斷變數的JSON長度，下if條件式？

若有時候又會變成多組的時候呢？