如何打印 javascript 对象的元素答案

【问题标题】：how to print a javascript object's elements如何打印 javascript 对象的元素
【发布时间】：2017-07-27 20:13:13
【问题描述】：

我是 javascript 新手，当我使用以下代码时，我目前有一个 object 打印到控制台：

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

当我查看控制台时，我可以看到以下对象：

我正在用头撞墙来编写代码，该代码使用.append() 方法将对象打印到一个div。我对使用 javascript 对象非常陌生，如果尝试梳理对象和/或打印对象数据，我将不胜感激。

events 是对象名称吗？我会使用events->eventDate 之类的东西来梳理一下 eventDate 吗？

【问题讨论】：

会做类似console.log(target.events[0].eventDate)
您要打印整个对象吗？对象由包括其他对象、数组、字符串和数字的属性组成。
我对 javascript 非常陌生。我需要学习如何梳理出 html 中对象的主要数据元素
我可以使用 .append(target.events[0].eventDate) 并显示该数据 - 但这是首选方法吗？
@HollerTrain 除非你能让你的对象更简单。如果您的 target 对象中需要超过 1 个事件，那么是的，这将是首选方式。

标签： javascript jquery arrays object

【解决方案1】：

我已经做了大约 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。

任何问题都会在 cmets 中弹出 :-)

【讨论】：

【解决方案2】：

我不确定你是否已经有一个想要追加的 div，但你会做这样的事情 ->

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

append() 是 jquery 函数，而不是 javascript 函数。

它没有任何格式，只是一个 div 中的字符串值07-28-2017。

【讨论】：

只是好奇——您以前从未参加过 SO 并且您是一名开发人员？您是否大部分时间只是阅读问题而不创建帐户？
是的。我已经使用了该网站很多次，但直到现在还没有对其做出贡献（或注册）。也许我担心我会用错误的答案出丑？我不知道那是什么。
实际上令人印象深刻，如果我能够在不询问任何内容的情况下学习的话，我想知道。向你致敬。