iT邦幫忙

0

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

我希望提供一個有四個複選按鈕,點下計算時,程式會依照使用者所選,撈出所選按鈕的JSON,再將這些JSON彙整成一個JSON,
https://ithelp.ithome.com.tw/upload/images/20211015/20135967rpFkambw9N.jpg

例如:
我今天選擇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>

1 個回答

2
Mao
iT邦新手 2 級 ‧ 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 示範

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

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

希希寶 iT邦新手 5 級 ‧ 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條件式?

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

Mao iT邦新手 2 級 ‧ 2021-10-19 16:44:25 檢舉

是可以用 if 下條件~但治標不治本,這只是解決眼前的問題。
其實可以更優化這個功能,把功能獨立封裝成一個 function 來使用。

我要發表回答

立即登入回答