showing encoded emoji in Angular2

Question

I am performing a loop on angular2 with dynamic emoji values encoded with org.apache.commons:commons-lang3 library in android like \uD83D\uDEB5\uD83D\uDEB5\uD83D\uDEB5. I need to decode them in angular2 frontend. In itemsArr[index]['Posted Content'] = item[0]['document']['post_content']; I get the encoded content from backend. And this is how I am trying to show them

Code as follows

    ngOnInit() {
    this.loading = true;
    var itemsArr = [];

    var reporterPromiseArr = [];
    var postPromiseArr = [];
    var posts = this._cb.getRelationalDataFromTable('reportPost').then(res => {
      res.forEach(item => {
        itemsArr.push({ 'Reported On': item.document.createdAt, 'Posted By': '', 'Posted On': '', 'postId': item.document.post_id });
        postPromiseArr.push(this._cb.getRelationalDataFromTableNew('userActivityStream', [{ key: '_id', value: item.document.post_id }], ['product_id', 'user_id']));
        reporterPromiseArr.push(this._cb.getRelationalDataFromTable('registration', [{ key: '_id', value: item.document.user_id }]));
      });

      return Promise.all(postPromiseArr);
    }).then(res => {
      res.forEach((item, index) => {

        itemsArr[index]['Posted By'] = (item[0]['document']['user_id'] !== null) ? item[0]['document']['user_id']['document']['user_name'] : '';
        itemsArr[index]['Posted On'] = item[0]['document']['createdAt'];
        itemsArr[index]['Posted Type'] = item[0]['document']['type'];
        itemsArr[index]['Total Likes'] = item[0]['document']['total_like'];
        itemsArr[index]['Posted Content'] = item[0]['document']['post_content'];

        itemsArr[index]['Image'] = decodeURI(item[0]['document']['image']);

      });

      //console.log(reporterPromiseArr);
      return Promise.all(reporterPromiseArr);
    }).then(res => {
      res.forEach((item, index) => {
        itemsArr[index]['Reported By'] = item[0]['document']['user_name'];
      });

      this.listingArr = itemsArr;
      this.loading = false;

    }).catch(err => {
      this.loading = false;
      console.log(err)
    });
    console.log(itemsArr);
    //return Promise.all(reporterPromiseArr);


  }

   html as follows where i tried to show them in innerHTML but not working

<form class="tr" #requestData="ngForm" (ngSubmit)="onSubmit(requestData)" *ngFor="let item of listingArr; let i = index">
                                            <div class="td">{{i + 1}}</div>
                                            <div class="td">{{ item['Reported By'] }}</div>
                                            <div class="td">{{item['Reported On'] | date: yMMMdjms }}</div>
                                            <div class="td">{{ item['Posted By'] }}</div>
                                            <div class="td">{{ item['Posted On'] | date: yMMMdjms }}</div>
                                            <div class="td">{{ (item['Total Likes'] == null)?0:item['Total Likes'] }}</div>
                                            <div class="td">{{ item['Posted Type'] }}</div>
                                            <div [innerHTML]="item['Posted Content']"></div>


                                            </div>
                                        </form>

Maybe the issue is not with decodeURIComponent but with something else... Hard to tell without seeing the actual code. — epascarello, Aug 02 '17 at 14:22
Thanks for the quick replies. Original code is in angular2. I edited my post with it. As you see on itemsArr[index]['Posted Content'] = this.doSomething(item[0]['document']['post_content']); line I call dosomething function — Abhishek Mitra, Aug 02 '17 at 14:24
What do you mean "it's not decoding"? Are you sure that your `doSomething` function is being called with what you think it's being called with? — Jared Smith, Aug 02 '17 at 14:24
well it would never work with a timeout.... and the only way that would not work is if str is not what you think it is.... and why would you need to fo unicode escape sequences with decode? — epascarello, Aug 02 '17 at 14:24
`decodeURIComponent('\uD83D\uDEB5\uD83D\uDEB5\uD83D\uDEB5') === '\uD83D\uDEB5\uD83D\uDEB5\uD83D\uDEB5'` — `decodeURIComponent` doesn't seem to have anything to do with this. — Quentin, Aug 02 '17 at 14:26
yes doSomething is calling successfully. I also tried typeof str which returns string type. — Abhishek Mitra, Aug 02 '17 at 14:27
if you hit decodeURIComponent('\uD83D\uDEB5\uD83D\uDEB5\uD83D\uDEB5') this in console it returns some emoji "" — Abhishek Mitra, Aug 02 '17 at 14:28
`decodeURIComponent` is for percent encoded values. What you have are JavaScript escape sequences. — zzzzBov, Aug 02 '17 at 14:29
um, you can just type in `'\uD83D\uDEB5\uD83D\uDEB5\uD83D\uDEB5'` in the console and it will do it also.... — epascarello, Aug 02 '17 at 14:29
`decodeURIComponent("foo%3Dbar%20world")` is what URL encoding looks like — epascarello, Aug 02 '17 at 14:31
upss you are right @epascarello. I just saw that.These strings are actually encoded with apache lang3 library and I am trying to decode them. Any idea how that should go? — Abhishek Mitra, Aug 02 '17 at 14:32
What do you mean decode them? Is the issue they do not display on the screen when you output it? — epascarello, Aug 02 '17 at 14:33
No. They just look like the string is. encoded with org.apache.commons:commons-lang3 in java. trying to decode them — Abhishek Mitra, Aug 02 '17 at 14:34

score 0 · Answer 1 · answered Aug 02 '17 at 14:36

0

If you need them to be displayed properly on the page, you need to bind them with innerHTML in Angular2

<div [innerHTML]="the.path.to.property"></div>

answered Aug 02 '17 at 14:36

epascarello

204,599
20
195
236

I try with this
but sorry nothing happens.
– Abhishek Mitra Aug 02 '17 at 14:43

showing encoded emoji in Angular2

1 Answers1