如何打印javascript对象的元素

Question

i am new to javascript and i currently have an object printed to console when i use the following code:

clickEvents: {
    click:function(target) {
        console.log(target);
    }
}

when i view console i can see the following object:

i am banging my head against a wall to write code that takes the object and prints it to a div using the .append() method. i am extermely new to working with javascript objects, and would appreciate any help trying to tease out an object and/or print the object data.

is events the object name? would i tease out the eventDate using something like events->eventDate ?

Answer 1

I'm not sure if you have a div that you want to append to already, but you would do something like this ->

document.getElementById("toBeAppendedTo").innerHTML = target.events[0].eventDate; where toBeAppendedTo is the id of the div you're trying to add this text to.

append() is a jquery function, not a javascript function.

That won't have any formatting and will just be the string value 07-28-2017 in a div.

Answer 2

I've made this over ~15 minutes so it's imperfect; there are types and edge cases surely unaccounted for and the design of the function could be better - not to mention that performing all of this as a giant string and then setting that as HTML is likely bad practice (I'm used to React now, ha!). Regardless, this will iterate over any array or object you pass to it and print it all in a big <ul> recursively.

const targetEl = document.querySelector('.js-target')

if (!targetEl) return

// Small helper functions
const isObj = data => typeof data === 'object' && !Array.isArray(data) && data !== null
const isArr = data => Array.isArray(data)

const dataToHTML = (data, noNode = false) => {
  if (isObj(data)) {
    const accumulator = Object.entries(data).reduce((acc, set) => acc + `<li><strong>${set[0]}</strong>: ${dataToHTML(set[1], true)}</li>`, '')

    return `<ul>${accumulator}</ul>`
  }

  else if (isArr(data)) {
    const accumulator = data.reduce((acc, item) => acc + dataToHTML(item), '')

    return `<ul>${accumulator}</ul>`
  }

  else return noNode ? data : `<li>${data}</li>`
}

const logHTML = dataToHTML(exampleData)

targetEl.innerHTML = logHTML

Assuming that your data/variable is named exampleData .

Any questions pop them in the comments :-)