0

I am trying parse the unicode data from http response for emoji etc and response is coming as a property - value pair of an object in the form of message content JSON data ("messageContent":"hello \\ud83d\\ude31"). but as an object form it is displaying:

data:{...
messageContent:"hello \ud83d\ude31"
}

then after assigning messageContent data to template it is displaying same unicode (hello \ud83d\ude31), it did not change to any corresponding emoji or character but if I am just using chrome's dev tool console like:

var msg  = "hello \ud83d\ude31";

then msg value will be "hello <some emoji or character>" and even if using "textContent" using javascript for that element, it is working fine but in case of angular2 assigning data to template it is not working, please suggest something.

Sᴀᴍ Onᴇᴌᴀ
  • 8,218
  • 8
  • 36
  • 58
Vaibhav Rai
  • 1

1 Answers1

1

The twemoji library will convert Unicode to Emoji gifs: Their canned example:

twemoji.parse(
  'I \u2764\uFE0F emoji!',
  function(icon, options, variant) {
    return '/assets/' + options.size + '/' + icon + '.gif';
  }
);

// will produce
/*
I <img
  class="emoji"
  draggable="false"
  alt="❤️"
  src="/assets/36x36/2764.gif"/> emoji!
*/

By default, the options.size parameter will be the string "36x36"

JGFMK
  • 8,425
  • 4
  • 58
  • 92
  • and in component fetchMsgContent(msg){ var d = document.querySelector('li > article > section'); d.textContent = (msg.messageContent;); } same procedure working on dev tool console but not in code. actually i am using angular 2 cli so, is there any chance that cli changing the formate – Vaibhav Rai Jul 26 '17 at 06:57
  • Is your assets folder setup correctly? Also why not just use interpolation directly in the html template markup. No need for jQuery. Syntax {{twemoji.parse(this.text)}} . This link may help if you run into snafus https://stackoverflow.com/questions/37385535/calling-method-from-a-angular-2-class-inside-template – JGFMK Jul 26 '17 at 07:32
  • assets folder stepup is fine and i have tried interpolation it did not work so tried javascript way – Vaibhav Rai Jul 26 '17 at 08:58
  • I'm not a plunker expert.. But if you could setup a project that includes angular and twemoji including assets.. Then having other eyes being able to console.log stuff and see things might get you your answer. I'm not sure, maybe you can import a github project.. Maybe that's the easiest way to setup the assets folder... Others with plunker expertise feel free to advise. – JGFMK Jul 26 '17 at 10:15