CODEWITHSUNDEEP
javascriptjqueryhtml
John
John

Reputation: 275

Javascript json data gets trimmed on append inside each

The json data gets trimmed passing to the element of the input I want to be able to pass the data as an input and be able to edit it, but the data getting trimmed. 

Example:        
Expected in input: John Lemon - Class 2018 (with 12 of 12 subj) 
Output: John 


$.each(jsonData, (index, value) => {
            tbrow = $("<tr class='some-click'></tr>");
            tbrow.append("<td><input class='some-control'type='text' value="+value.Description+"></td>");
            $("#edit-person").append(tbrow);        
});

Sample JSON Data

"Class": [
    {
      "ID": "1",
      "Description": "John Lemon - Class 2018 (with 12 of 12 subj)",
      "Class": "0",
    },
    {
      "ID": "2",
      "Description": "Jane Hathaway - Class 2017 (with 11 of 11 subj)",
      "Class": "0",
    }
  ]

How can I pass the json data in the value attribute without being trimmed? When I console the data its gets the data but when passed to the attribute it gets trimmed, is it because of the white spaces?

Upvotes: 0

Views: 55

Answers (1)

Shilly
Shilly

Reputation: 8589

Your quotes are not correct when constructing the HTML string.

Try:

'<td><input class="some-control" type="text" value="' + value.Description + '"></td>'

You can see that in your original code you had this: value="+value.Description+", but you also used " to start the HTML string, so the value tag became value=John Lemon - Class 2018 (with 12 of 12 subj) instead of value="John Lemon - Class 2018 (with 12 of 12 subj)", so the HTML engine tried inserting quotes itself, resulting in the mangled HTML you had.

Upvotes: 2

Related Questions