1

Might be a silly question but here it is. I am trying to insert some html inside my div based on data received from my backing java controller. It all works fine but I am not aware how to interpolate strings from the data I receive into the paragraph tag of my jsp.

Here is the code

<script>
    $(document).ready(function() {
        var url = "${context}/support/ajax";
        $.ajax({
            type : 'GET',
            url : url,
            dataType : 'json',
            success : function(data, status, xhr) {

                data.forEach(function(data) {
                    if (data.userType == 'O') {
                        $( ".chats" ).append(`
                                <div class='chat-avatar'>


                                <a class='avatar' data-toggle='tooltip' href='#'
                                    data-placement='right' title='' data-original-title=''> <img
                                    src='<c:url value = '/app-assets/images/portrait/small/avatar-s-1.png'/>'
                                    alt='avatar'>
                                </a>
                            </div>
                            <div class='chat-body'>
                                <div class='chat-content'>
                                    <p>{data.comment}</p> // **This is what I want to achieve**
                                </div>
                            </div>
                                `);

                    } 

                });
            }
        });

    });
</script>

The above ajax call works fine an I do receive data. Also, I am able to insert this html into the appropriate div element. Now I want to insert the data.comment value inside the p element .

How do I do this ?

EDIT --1

After using `${expression}` syntax, the <p> tag comes as blank in the broswer console while clearly the value is present.

dev tools

EDIT--2

I don't know why but "<p>"+d.comment+"</p>" is working. But not interpolation.

Naxi
  • 1,504
  • 5
  • 33
  • 72
  • So close. Template strings (or template literals; the backtick version of strings) use the syntax `${expression}` to interpolate expressions. So you're just missing the `$` prepended to your current interpolation syntax :) – IceMetalPunk Jul 19 '19 at 18:41
  • Note that not all browsers support template literals – charlietfl Jul 19 '19 at 18:42
  • When I do this (backtick)...

    ${data.comment}

    ....(backtick) nothing comes up on the UI. Running this on chrome.a     – Naxi Jul 19 '19 at 18:48

2 Answers2

0

Because you are using the back-tick (`) you are close to using template strings. You just need to use placeholders correctly:

const data = {comment: 'The comment'};
const result = `...<p>${ data.comment }</p>...`;

console.log(result);

Documentation on Template Strings

KevBot
  • 17,900
  • 5
  • 50
  • 68
  • When I do this (backtick)...

    ${data.comment}

    ....(backtick) nothing comes up on the UI. Running this on chrome.a     – Naxi Jul 19 '19 at 18:48
  • @Naxi, if you console.log(data.comment) at the beginning of the success function, is it possible the value is an empty string? – KevBot Jul 19 '19 at 19:06
  • 2
    I checked and it's not. It shows the values correctly in console.log but not in template literal. – Naxi Jul 20 '19 at 06:36
0

I can see you're using the data variable for both the ajax response and the current value of data in the loop. Are you sure you're referencing the correct object?

Ilyas Assainov
  • 1,901
  • 13
  • 15