将 Javascript 数组自定义为计划文本并填充到文本区域中

Question

我正在尝试将我的数组解析为这种格式。 我有一个这样的数组

0: {name: "client_name", type: "INPUT", value: "John Doe"}
1: {name: "detail_note_editor", type: "TEXTAREA", value: "Verbal consent obtained↵MH checked and any changes…/ Medium/ Low↵Oral Cancer Risk: High/ Medium/ Low"}
2: {name: "option_title", type: "INPUT", value: "HPC"}
3: {name: "customDropDown", type: "SELECT", value: "For the last few weeks"}
4: {name: "option_title", type: "INPUT", value: "Diagnosis"}
5: {name: "customDropDown", type: "SELECT", value: "peridontal disease"}
6: {name: "detail_note_editor", type: "TEXTAREA", value: "Skeletal  : ↵Lips : comp / Incomp↵Crowding :↵Incisor class :↵OJ :↵Overbite :↵X bites :"}
7: {name: "option_title", type: "INPUT", value: "Toothbrushing"}
8: {name: "customDropDown", type: "SELECT", value: "0x per day"}

我想要这种格式的计划数据并直接填充到单个文本区域中

Client Name: John Doe 
Verbal consent obtained
HPC: For the last few weeks
Diagnosis: peridontal disease
Skeletal  : Skeletal  : ↵Lips : comp / Incomp↵Crowding :↵Incisor class :↵OJ :↵Overbite :↵X bites :
Toothbrushing: 0x per day

尝试后我得到这个结果

["Verbal consent obtained↵MH checked and any changes…/ Medium/ Low↵Oral Cancer Risk: High/ Medium/ Low", Array(2), Array(2), Array(2), Array(2), "Skeletal  : ↵Lips : comp / Incomp↵Crowding :↵Incisor class :↵OJ :↵Overbite :↵X bites :", Array(2), Array(2)]
0: "Verbal consent obtained↵MH checked and any changes required have been noted↵PCO: nil / pain / tenderness↵HPC: nil/ for the last few days / for the last few weeks↵diet: eats no sugar/ regularly has sugar↵alcohol consumption: 5 units per week/ 10 units per week↵smoking: 5 per day"
1: (2) ["", "HPC: "]
2: (2) ["", ": For the last few weeks"]
3: (2) ["", "Diagnosis: "]
4: (2) ["", ": peridontal disease"]
5: "Skeletal  : ↵Lips : comp / Incomp↵Crowding :↵Incisor class :↵OJ :↵Overbite :↵X bites :"
6: (2) ["", "Toothbrushing: "]
7: (2) ["", ": 0x per day"]
length: 8

let Arr = [{name: "client_name", type: "INPUT", value: "John Doe"},{name: "detail_note_editor", type: "TEXTAREA", value: "Verbal consent obtained↵MH checked and any changes…/ Medium/ Low↵Oral Cancer Risk: High/ Medium/ Low"},{name: "option_title", type: "INPUT", value: "HPC"},{name: "customDropDown", type: "SELECT", value: "For the last few weeks"},{name: "option_title", type: "INPUT", value: "Diagnosis"},{name: "customDropDown", type: "SELECT", value: "peridontal disease"},{name: "detail_note_editor", type: "TEXTAREA", value: "Skeletal  : ↵Lips : comp / Incomp↵Crowding :↵Incisor class :↵OJ :↵Overbite :↵X bites :"},{name: "option_title", type: "INPUT", value: "Toothbrushing"},{name: "customDropDown", type: "SELECT", value: "0x per day"}];
let newArr = [];
$.each(Arr, function(key, value){
if(value.name == "detail_note_editor"){
newArr.push(value.value);
}
if(value.name == "option_title" || value.name == "customDropDown"){
let textarea = "";
let input = "";
let select = "";
if(value.type == 'TEXTAREA'){
textarea += value.value;
}
if(value.type == 'INPUT'){
input += value.value;
}
if(value.type == 'SELECT'){
select += value.value;
}
let newData = input + ": " + select;
console.log(newData);
newArr.push([textarea, newData]);
}
console.log(value);
});
console.log(newArr);

Answer 1

您可以进行一些检查并组合输入和选择。

var array = [{ name: "client_name", type: "INPUT", value: "John Doe" }, { name: "detail_note_editor", type: "TEXTAREA", value: "Verbal consent obtained↵MH checked and any changes…/ Medium/ Low↵Oral Cancer Risk: High/ Medium/ Low" }, { name: "option_title", type: "INPUT", value: "HPC" }, { name: "customDropDown", type: "SELECT", value: "For the last few weeks" }, { name: "option_title", type: "INPUT", value: "Diagnosis" }, { name: "customDropDown", type: "SELECT", value: "peridontal disease" }, { name: "detail_note_editor", type: "TEXTAREA", value: "Skeletal  : ↵Lips : comp / Incomp↵Crowding :↵Incisor class :↵OJ :↵Overbite :↵X bites :" }, { name: "option_title", type: "INPUT", value: "Toothbrushing" }, { name: "customDropDown", type: "SELECT", value: "0x per day" }]
result = [],
row = [];
for (const { name, type, value } of array) {
if (name == "detail_note_editor") {
result.push(value);
continue;
}
if (name == "option_title" || name == "customDropDown") {
if (type == 'INPUT') result.push(row = [value]);
if (type == 'SELECT') row[1] = value;
continue;
}
result.push([name.replace(/(^|_)(.)/g, (_, $1, $2) => ($1 && ' ') + $2.toUpperCase()), value])
}
result = result.map(v => Array.isArray(v) ? v.join(': ') : v);
console.log(result);

Answer 2

我不确定你是否正在使用任何框架。因此，您可以执行以下操作：

var data = [{name: "client_name", type: "INPUT", value: "John Doe"},
{name: "detail_note_editor", type: "TEXTAREA", value: "Verbal consent obtained↵MH checked and any changes…/ Medium/ Low↵Oral Cancer Risk: High/ Medium/ Low"}]
var div = document.createElement('div')
data.forEach(i=>{
var span1 = document.createElement('span');
span1.innerText = i.name + ' : '
div.appendChild(span1)
var span2 = document.createElement('span');
span2.innerText = i.value;
div.appendChild(span2);
div.appendChild(document.createElemeent(br))
})
document.body.appendChild(div)