typescript or JavaScript convert nested array of objects to key,value pair

Question

Below array is the input and expecting respective O/P. How to achieve it as a Key-Value pair using Typescript

let arr = [
  {id: "1",
   questions: [
     {question: "HTML Tutorial" },
     {question: "HTML References" }
   ],
    answer : "Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript and VBScript."
  },
  {id: "2",
   questions: [
     {question: "HTML Element Reference" },
     {question: "HTML Reference - Browser Support" }
   ],
   answer : "An HTML element is a type of HTML document component, one of several types of HTML nodes. HTML document is composed of a tree of simple HTML nodes, such as text nodes, and HTML elements, which add semantics and formatting to parts of document. Each element can have HTML attributes specified."
  }
];

// Expected Output using Typescript

Array [{ Key: "1", value: "HTML Tutorial, HTML References: Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript and VBScript." },
{ Key: "2", value: "HTML Element Reference,HTML Reference - Browser Support : An HTML element is a type of HTML document component, one of several types of HTML nodes. HTML document is composed of a tree of simple HTML nodes, such as text nodes, and HTML elements, which add semantics and formatting to parts of document. Each element can have HTML attributes specified." }]

User863 · Accepted Answer · 2020-06-24 11:52:30Z

Using map()

let arr = [{id:"1",questions:[{question:"HTML Tutorial"},{question:"HTML References"}],answer:"Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript and VBScript."},{id:"2",questions:[{question:"HTML Element Reference"},{question:"HTML Reference - Browser Support"}],answer:"An HTML element is a type of HTML document component, one of several types of HTML nodes. HTML document is composed of a tree of simple HTML nodes, such as text nodes, and HTML elements, which add semantics and formatting to parts of document. Each element can have HTML attributes specified."}];

let res = arr.map(i => {
  let q = i.questions.map(q => q.question).join(', ')
  return { Key: i.id, value: q + ' : ' + i.answer }
});

console.log(res)

morteify · Accepted Answer · 2020-06-24 11:59:36Z

0

As already it has been answered, map() is quite suitable for solving the problem.

interface Output {
    key: string;
    value: string;
}

const result: Output[] = arr.map((item) => {
    const output = {
        key: item.id,
        value: `${item.questions.map(elem => elem.question).join(', ')}: ${item.answer}`
    };

    return output;
});

console.log(result)

answered Jun 24, 2020 at 11:59

morteify

1814 silver badges13 bronze badges

Comments

Mister Jojo · Accepted Answer · 2020-06-24 12:13:35Z

Using map()
and Destructuring assignment
and also template literals

let arr =
[ { id: "1"
  , questions: [ {question: "HTML Tutorial" }, {question: "HTML References" } ]
  , answer : "Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript and VBScript."
  }
, { id: "2"
  , questions: [  {question: "HTML Element Reference" },  {question: "HTML Reference - Browser Support" } ]
  , answer : "An HTML element is a type of HTML document component, one of several types of HTML nodes. HTML document is composed of a tree of simple HTML nodes, such as text nodes, and HTML elements, which add semantics and formatting to parts of document. Each element can have HTML attributes specified."
  }
]


let arr2 = arr.map(({id,questions,answer})=>
            ({ Key:id, value: `${questions.join(', ')} : ${answer}`}))



console.log( arr2 )

.as-console-wrapper { max-height: 100% !important; top: 0; }

Collectives™ on Stack Overflow

typescript or JavaScript convert nested array of objects to key,value pair

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related