Javascript outputs [Object object] to textbox (Works in console not in textbox)

Question

for some reason when I output to a textbox it writes [Object object]

here is my code below although it is a array.

This is not a duplicate question because in console.log it shows an array of all the scraped data but when putting that data into a text box it just shows [Object object]

const request = require('request');
const cheerio = require('cheerio');

var options = {
  headers: {
    'user-agent': 'request'
  }
};

function somefunction() {
  request('https://kith.com/collections/footwear/products/jbaq4160-140', options, (error, response, html) => {

    if (!error && response.statusCode == 200) {
      const $ = cheerio.load(html);

      var output = $('form[action="/cart/add"] select#productSelect > option').map((i, elem) => ({
        size: $(elem).text(),
        val: $(elem).attr('value')
      })).get().reduce((acc, cur, i, arr) => {
        arr.obj = arr.obj || {};
        arr.obj[cur.size] = cur.val;
        return arr.obj
      }, {});

      document.querySelector('#out').innerHTML = output;
      console.log(output);
      console.log('done');
    }
  });
}

In texbox it just outputs [Object object] no idea what to do from here.

Answer 1

You have to access the values in the specific index.

Try placing a bugger in your browsers Developer Console, and checkout the indexes of what you're logging.

Then access them.

Answer 2

You do map and then reduce ... you accumulator in the reduce is an object. Then you put an object in a textbox and what you get is [Object object]

Look at your reduce output. [Object object] simply means that Javascript is unboxing an object to a String and the result is what you see.

Just figure out which property of that object you want in the textbox and pass that instead of the entire object.

Answer 3

Use document.querySelector('#out').innerHTML = JSON.stringify(output); if you want to write it as a string