2e:null 2f:["$","title",null,{"children":"Simple combination of two arrays in JavaScript | Christophe Yamahata | Observable"}] 34:[] 32:{"id":"143e5d28e4515fc6","slug":"simple-manipulation-of-two-arrays-in-javascript","title":"Simple combination of two arrays in JavaScript","thumbnail":"0c4fad6d7b57e4bf17ae44c25abd5a23508f7d811b8a2ed427e5ad0bd780e0ad","access_level":"public","create_time":"$D2023-07-09T19:16:23.932Z","update_time":"$D2023-07-10T05:53:10.462Z","view_time":null,"first_public_time":"$D2023-07-09T19:16:23.932Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024"},"version":428,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null}],"members":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"a4317cf9df48c2f1","slug":"sandbox","title":"Sandbox","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"type":"notebook","body":{"title":"Simple combination of two arrays in JavaScript","cells":[{"id":0,"value":"# Simple combination of two arrays in JavaScript","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":322,"value":"

In JavaScript, we can use the map() function along with other array methods such as reduce() or find() to combine objects based on a common key.

In the following example, the common key is the ASCII string used to create text emoticons.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":270,"value":"

Meaning of emoticon ASCII strings

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":241,"value":"Inputs.table(emoticon_ASCII_meaning, {maxWidth: 280})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"emoticon_ASCII_meaning = [\n { String: ':-)', Meaning: 'happy face' },\n { String: ':-(', Meaning: 'sad' },\n { String: ':‑D', Meaning: 'laughing' },\n { String: ':‑P', Meaning: 'tongue sticking out' }, \n { String: '>:(', Meaning: 'angry' }, \n { String: '~:>', Meaning: 'chicken' },\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"

Emoticon ASCII characters vs. emoji pictogram

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":239,"value":"Inputs.table(ASCII_vs_emoji, {maxWidth: 280})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"ASCII_vs_emoji = [\n { String: '>:(', Pictogram: '😡' },\n { String: ':-)', Pictogram: '🙂' },\n { String: ':‑D', Pictogram: '😃' },\n { String: ':-(', Pictogram: '☹️' },\n { String: '~:>', Pictogram: '🐔' },\n { String: ':‑P', Pictogram: '🤑' },\n ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"

Emoticon ASCII characters / emoji pictograms / Meaning

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":371,"value":"The following array is obtained using the find() method.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":227,"value":"Inputs.table(emojis, { width: {String: 60, Meaning: 150}, maxWidth: 380})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"emojis = emoticon_ASCII_meaning.map(obj1 => { \n let obj2 = ASCII_vs_emoji.find(obj2 => obj1.String === obj2.String); \n return { ...obj1, ...obj2 }; \n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"
\n

Useful reference

\nHow to map two arrays of objects in JavaScript [Visited: July 10, 2023]\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"