我希望提供一個有四個複選按鈕,點下計算時,程式會依照使用者所選,撈出所選按鈕的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>
修改之前的做法,這次以盡量不更動原本的程式碼,
希望你看得懂~
/* 以上省略 */
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 示範
了解,謝謝你~~
也謝謝你的建議!!
不好意思想再請教一下,如果今天我的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條件式?
若有時候又會變成多組的時候呢?
是可以用 if 下條件~但治標不治本,這只是解決眼前的問題。
其實可以更優化這個功能,把功能獨立封裝成一個 function 來使用。