Getting a complete string from server, when assigned to variable in JS it is not complete

Question

so I sent a response from my backend to my JS. Server responded with

{id: 347, name: "Dummy One", date: "July 14, 2020", status: "APPROVED"}

When using val.name to a table, it displays the complete value but when I assigned it to a variable, I am only getting the "Dummy" value.

Here's my JS:

btns = "<td><button class='btn' data-name="+val.name+"</button></td>";

$('.btn').click(function(){
     var name = $(this).attr('data-name');
     console.log(name);
});

Answer 1

In your button HTML, you are missing > after the data-name attribute

As @adiga mentioned in his comment try to change the button HTML according to the comment.

After that, you are assigning the data-name attribute value to the name variable

try to change it with var name = $(this).data('name');