Настройте массив 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)