undefined object in loop result

Question

I have my code below here and I noticed that when I display it in my html, I get a [object Object] result in my index 0 which is actually supposed to give me 153826-00.
Weirdly in my console.log, I get the result wanted.
Can someone please explain to me what's happening?

var db = {"Root":{"DataPage":[{"Record":{"PPS_NUM":"3207987   ","PO_NUM":"153826-00                     ","OB_TYPE":"SOLK","SHIPMENT":"S258028   "}},{"Record":{"PPS_NUM":"3207500   ","PO_NUM":"10086398                      ","OB_TYPE":"SOLK","SHIPMENT":"S257877   "}},{"Record":{"PPS_NUM":"3207562   ","PO_NUM":"","OB_TYPE":"XFLK","SHIPMENT":"S257881X  "}},{"Record":{"PPS_NUM":"3198033   ","PO_NUM":"SAMPLES 6-14-17               ","OB_TYPE":"SOLK","SHIPMENT":"S255956   "}},{"Record":{"PPS_NUM":"3207443   ","PO_NUM":"491754-2279                   ","OB_TYPE":"SOLK","SHIPMENT":"S257873   "}},{"Record":{"PPS_NUM":"3204961   ","PO_NUM":"","OB_TYPE":"XFLK","SHIPMENT":"S257368   "}},{"Record":{"PPS_NUM":"3207635   ","PO_NUM":"","OB_TYPE":"XFLK","SHIPMENT":"S257904   "}},{"Record":{"PPS_NUM":"3205331   ","PO_NUM":"0188502                       ","OB_TYPE":"SOLK","SHIPMENT":"S257450   "}}]}};
var p = db.Root.DataPage;
for (var key in p) {
  if (p.hasOwnProperty(key)) {
     db+='<p>'+p[key].Record.PO_NUM+'</p>';
     $('#display').html(db);
      console.log(p[key].Record.PO_NUM);
 }
 }
$('#display').html(db);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="display"></p>

Nicolas · Accepted Answer · 2017-07-06 14:02:19Z

That's because you allready defined db as your first array, so when you += it just add the data. just change your second db for output and it works.

var db = {"Root":{"DataPage":[{"Record":{"PPS_NUM":"3207987   ","PO_NUM":"153826-00                     ","OB_TYPE":"SOLK","SHIPMENT":"S258028   "}},{"Record":{"PPS_NUM":"3207500   ","PO_NUM":"10086398                      ","OB_TYPE":"SOLK","SHIPMENT":"S257877   "}},{"Record":{"PPS_NUM":"3207562   ","PO_NUM":"","OB_TYPE":"XFLK","SHIPMENT":"S257881X  "}},{"Record":{"PPS_NUM":"3198033   ","PO_NUM":"SAMPLES 6-14-17               ","OB_TYPE":"SOLK","SHIPMENT":"S255956   "}},{"Record":{"PPS_NUM":"3207443   ","PO_NUM":"491754-2279                   ","OB_TYPE":"SOLK","SHIPMENT":"S257873   "}},{"Record":{"PPS_NUM":"3204961   ","PO_NUM":"","OB_TYPE":"XFLK","SHIPMENT":"S257368   "}},{"Record":{"PPS_NUM":"3207635   ","PO_NUM":"","OB_TYPE":"XFLK","SHIPMENT":"S257904   "}},{"Record":{"PPS_NUM":"3205331   ","PO_NUM":"0188502                       ","OB_TYPE":"SOLK","SHIPMENT":"S257450   "}}]}};
var p = db.Root.DataPage;
var output = "";
for (var key in p) {
  if (p.hasOwnProperty(key)) {
     output+='<p>'+p[key].Record.PO_NUM+'</p>';
     $('#display').html(output);
      console.log(p[key].Record.PO_NUM);
 }
 }
$('#display').html(output);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="display"></p>

Farnabaz · Accepted Answer · 2017-07-06 14:03:15Z

db variable is an object and when you append string to this variable, it converts to string and you get [object Object].
Just change your variable name

var db = {"Root":{"DataPage":[{"Record":{"PPS_NUM":"3207987   ","PO_NUM":"153826-00                     ","OB_TYPE":"SOLK","SHIPMENT":"S258028   "}},{"Record":{"PPS_NUM":"3207500   ","PO_NUM":"10086398                      ","OB_TYPE":"SOLK","SHIPMENT":"S257877   "}},{"Record":{"PPS_NUM":"3207562   ","PO_NUM":"","OB_TYPE":"XFLK","SHIPMENT":"S257881X  "}},{"Record":{"PPS_NUM":"3198033   ","PO_NUM":"SAMPLES 6-14-17               ","OB_TYPE":"SOLK","SHIPMENT":"S255956   "}},{"Record":{"PPS_NUM":"3207443   ","PO_NUM":"491754-2279                   ","OB_TYPE":"SOLK","SHIPMENT":"S257873   "}},{"Record":{"PPS_NUM":"3204961   ","PO_NUM":"","OB_TYPE":"XFLK","SHIPMENT":"S257368   "}},{"Record":{"PPS_NUM":"3207635   ","PO_NUM":"","OB_TYPE":"XFLK","SHIPMENT":"S257904   "}},{"Record":{"PPS_NUM":"3205331   ","PO_NUM":"0188502                       ","OB_TYPE":"SOLK","SHIPMENT":"S257450   "}}]}};
var p = db.Root.DataPage;
var htmlValue = "";
for (var key in p) {
  if (p.hasOwnProperty(key)) {
     htmlValue +='<p>'+p[key].Record.PO_NUM+'</p>';
     $('#display').html(htmlValue);
      console.log(p[key].Record.PO_NUM);
 }
 }
$('#display').html(htmlValue);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="display"></p>

Milan Chheda · Accepted Answer · 2017-07-06 14:07:36Z

0

You need to initialise your variable to empty string. Its considering it as an array and with + sign, it's adding to an array. Hence, you are getting [object Object]

var db = {
  "Root": {
    "DataPage": [{
      "Record": {
        "PPS_NUM": "3207987   ",
        "PO_NUM": "153826-00                     ",
        "OB_TYPE": "SOLK",
        "SHIPMENT": "S258028   "
      }
    }, {
      "Record": {
        "PPS_NUM": "3207500   ",
        "PO_NUM": "10086398                      ",
        "OB_TYPE": "SOLK",
        "SHIPMENT": "S257877   "
      }
    }, {
      "Record": {
        "PPS_NUM": "3207562   ",
        "PO_NUM": "",
        "OB_TYPE": "XFLK",
        "SHIPMENT": "S257881X  "
      }
    }, {
      "Record": {
        "PPS_NUM": "3198033   ",
        "PO_NUM": "SAMPLES 6-14-17               ",
        "OB_TYPE": "SOLK",
        "SHIPMENT": "S255956   "
      }
    }, {
      "Record": {
        "PPS_NUM": "3207443   ",
        "PO_NUM": "491754-2279                   ",
        "OB_TYPE": "SOLK",
        "SHIPMENT": "S257873   "
      }
    }, {
      "Record": {
        "PPS_NUM": "3204961   ",
        "PO_NUM": "",
        "OB_TYPE": "XFLK",
        "SHIPMENT": "S257368   "
      }
    }, {
      "Record": {
        "PPS_NUM": "3207635   ",
        "PO_NUM": "",
        "OB_TYPE": "XFLK",
        "SHIPMENT": "S257904   "
      }
    }, {
      "Record": {
        "PPS_NUM": "3205331   ",
        "PO_NUM": "0188502                       ",
        "OB_TYPE": "SOLK",
        "SHIPMENT": "S257450   "
      }
    }]
  }
};
var p = db.Root.DataPage;
var htmlToAppend = '';
for (var key in p) {
  if (p.hasOwnProperty(key)) {
    htmlToAppend += '<p>' + p[key].Record.PO_NUM + '</p>';
    console.log(p[key].Record.PO_NUM);
  }
}
$('#display').html(htmlToAppend);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="display"></p>

edited Jul 6, 2017 at 14:07

answered Jul 6, 2017 at 14:03

Milan Chheda

8,2593 gold badges23 silver badges35 bronze badges

6 Comments

Nicolas Over a year ago

You did not stated anythings, you can't just paste code .

Milan Chheda Over a year ago

Adding explanation, my friend. its hardly a minute. and that doesn't mean you down-vote.

Milan Chheda Over a year ago

Well, it takes time to get the words and correct explanation. Secondly, down-votes shouldn't be given for efforts and answers.

James Over a year ago

This is bad. db is already defined on ln 1 so shouldn't be re-defined on ln 79.

Milan Chheda Over a year ago

Sure @Nicolas. I appreciate that.

|

Collectives™ on Stack Overflow

undefined object in loop result

3 Answers 3

1 Comment

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related