CODEWITHSUNDEEP
javascripttypescript
Kartik Behera
Kartik Behera

Reputation: 33

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

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." }]

Upvotes: 2

Views: 563

Answers (3)

Mister Jojo
Mister Jojo

Reputation: 22320

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; }

Upvotes: 0

morteify
morteify

Reputation: 182

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)

Upvotes: 0

User863
User863

Reputation: 20039

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)

Upvotes: 2

Related Questions