javascript object field set input value [object Object] instead of float

Question

iam having little problem with jquery (javascript) creating HTML input.. it sets value [object Object] instead of float.. but only on array field in object..

console.log of mine object

31:
  x: 31
  y:
    cutView: Array(3)
      0: {0: 5.5, 1: 7.9}
      1: {0: 5.5, 1: 7.9}
      2: {0: 5.5, 1: 7.9}
      length: 3
      : Array(0)
    foldEnded: 17.7
    foldStarted: 2.9
  : Object
: Object

$.each(coords, function (coord) {
   $("#tablePattern").append(
      '<tr id="'+ coords[coord].x +'">' +
         '<td class="index">' +
            '<button type="button" class="btn-danger" style="width: 20px; height: 20px;border-radius: .25rem;border: 1px solid transparent; display: block;" onclick="removeLine( '+ coords[coord].x +' )">-</button>' +
               '<button type="button" class="btn-success" style="width: 20px; height: 20px;border-radius: .25rem;border: 1px solid transparent;" onclick="addNewLine( '+ coords[coord].x +', '+ method +', '+ height +' )">+</button>' +
               coords[coord].x +
               '<input id="sheet" hidden type="number" value="'+ coords[coord].x +'">' +
          '</td>' +
          '<td>' +
             '<input class="foldEnd" step="0.1" id="foldEnd-'+ coords[coord].x +'" type="number" onchange="changeFold( '+ coords[coord].x +', '+ height +' )" value="'+ coords[coord].y.foldEnded +'"> ' +
          '</td>' +
          '<td class="cutTd">' +
             $.each(coords[coord].y.cutView, function (index) {
                $("#cutTd").append(
                   '<div class="cut" style="border-color: #FFFFFF">' +
                      '<input class="cutEnd" step="0.1" id="cutEnd-'+ coords[coord].x +'-'+ index +'" type="number" onchange="changeCut('+ coords[coord].x +', '+ index +', '+ height +')" value="'+ coords[coord].y.cutView[index][1] +'">' +
                      '<input class="cutStart" step="0.1" id="cutStart-'+ coords[coord].x +'-'+ index +'" type="number" onchange="changeCut('+ coords[coord].x +', '+ index +', '+ height +')" value="'+ coords[coord].y.cutView[index][0] +'">' +
                   '</div>'
                 );
              }) +
           '</td>' +
           '<td>' +
              '<input class="foldStart" step="0.1" id="foldStart-'+ coords[coord].x +'" type="number" onchange="changeFold( '+ coords[coord].x +', '+ height +' )" value="'+ coords[coord].y.foldStarted +'"> ' +
           '</td>' +
           '<td style="position: relative">' +
              '<div id="fold-'+ coords[coord].x +'" style="top: 0; right: '+ (coords[coord].y.foldStarted / 0.02645) / height +'%; width: '+ ((coords[coord].y.foldEnded / 0.02645) - (coords[coord].y.foldStarted / 0.02645))/height +'%; position: absolute;background-color: black; height: 20px"></div>' +
           '</td>' +
       '</tr>'
   );
});

What output i get

Output should be

Thanks for helping

Does this answer your question? [what does \[object Object\] mean?](https://stackoverflow.com/questions/4750225/what-does-object-object-mean) — Kashinath Patekar, May 18 '20 at 18:20
Looks like this code is coords[coord].y.cutView[index][1] is responsible to show the desired output. Here, 1 is a property instead of an index. Can try like this coords[coord].y.cutView[index].1 or coords[coord].y.cutView[index]['1']. I am curious if 1 is a valid property in Javascript. — Prateek Kumar Dalbehera, May 18 '20 at 18:20
@PrateekKumarDalbehera coords[coord].y.cutView[index].1 is not valid property. coords[coord].y.cutView[index]['1'] is giving me [object Object] too — Daniel Sympho Weiss, May 18 '20 at 18:23
Can you put cutView.length for testing purpose? It should come 3 — Prateek Kumar Dalbehera, May 18 '20 at 18:30
See this to know more - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors Can you write the value in console.log and then debug it in console first — Prateek Kumar Dalbehera, May 18 '20 at 18:53

Tomage · Accepted Answer · 2020-05-18T19:52:45.870

The problem is in your $("#cutTd").append(...) call. It's not coords[coord].y.cutView[index][1] that returns [object Object]. It's the append function itself that returns a jQuery object (see https://api.jquery.com/append/).

Instead of trying to append your inputs to #cutTd, you need to split your code into sections, use each loop to append inputs to your string and then append the entire string to $("#tablePattern").

Something like:

let str = '<tr id="'+ coords[coord].x +'">' +
..... +
'<td class="cutTd">';

$.each(coords[coord].y.cutView, function (index) {
    str += '<div class="cut" style="border-color: #FFFFFF">' +
    '<input class="cutEnd" step="0.1" id="cutEnd-'+ coords[coord].x +'-'+ index +'" type="number" onchange="changeCut('+ coords[coord].x +', '+ index +', '+ height +')" value="'+ coords[coord].y.cutView[index][1] +'">' +
    '<input class="cutStart" step="0.1" id="cutStart-'+ coords[coord].x +'-'+ index +'" type="number" onchange="changeCut('+ coords[coord].x +', '+ index +', '+ height +')" value="'+ coords[coord].y.cutView[index][0] +'">' +
    '</div>'
});

str += '</td>' +
.... +
'</tr>';

$("#tablePattern").append(str);

javascript object field set input value [object Object] instead of float

1 Answers1