如何打印javascript對象的元素

Question

我是javascript新手，當我使用以下代碼時，當前有一個打印到控制台的object ：

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

當我查看控制台時，我可以看到以下對象：

我將頭撞在牆上以編寫代碼，該代碼使用該對象，並使用.append()方法將其打印到div。 我是剛接觸javascript對象的新手，並且非常感謝嘗試挑逗對象和/或打印對象數據的任何幫助。

events是對象名稱嗎？ 我會使用events->eventDate類的東西來挑逗events->eventDate嗎？

Answer 1

我不確定您是否要添加一個div，但是您會執行以下操作->

document.getElementById("toBeAppendedTo").innerHTML = target.events[0].eventDate; toBeAppendedTo是您要向其中添加文本的div的ID。

append()是一個jquery函數，不是javascript函數。

那將沒有任何格式，而只是div中的字符串值07-28-2017 。

Answer 2

我已經完成了大約15分鍾，所以它並不完美； 肯定沒有說明類型和邊緣情況，函數的設計可能會更好-更不用說將所有這些都作為一個巨大的字符串執行，然后將其設置為HTML可能是不好的做法（我已經習慣了React，哈！）。 無論如何，這將遍歷傳遞給它的任何數組或對象，並以大<ul>遞歸方式將其全部打印出來。

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

假設您的數據/變量名為exampleData 。

任何問題都會在評論中彈出：-)