Question

我使用textarea来显示数组及其元素。因此我使用JSON.stringify函数。它像这样工作得很好

 [
    {
        "content": {
            "objectTypeID": "FGHD",
            "_id": "singlePro"
    },
    {
        "content": {
            "objectTypeID": "KLM",
            "_id": "singlePro"
    }
]

我可以使用textarea显示类似Chrome控制台的数组吗？实施例;

1.  Array(2)
1.  0:{content: {…}}
2.  1:{content: {…}}
3.  length:2

然后当我点击数组元素时，它会变为打开并显示自己的元素。

如果我不能用textarea做到这一点，我该怎么做？

Answer 1

常规div或list元素可能更适合您想要实现的目标。然后，您可以使用像jquery这样的库来切换您想要从底部看到的部分的显示以及您想要隐藏的部分，直到它被点击为止

或者，您可以使用vanilla（core）Javascript来切换显示属性。虽然可能会困难得多。

或者，你也可以学习一个更现代的javascript前端库，如Vue或angular来实现你的目标，虽然只有你有一些基本Javascript的先验知识才有可能

Answer 2

当我回答stackoverflow问题以帮助以更友好的方式呈现数据时，我做了类似的事情。

https://codepen.io/synthet1c/pen/KyQQmL

它并不复杂，但你需要递归地遍历你的对象逐步构建嵌套它的html。而且你不会＆＃39;能够在textarea中呈现数据，它必须是样式化的本机元素。如果你想让它可编辑，我建议你只使用像codemirror这样的东西，因为它真的很复杂。

我使用列表来帮助格式化，然后如果我想要折叠内容，我只需在父display:none上使用<ul>

＆＃13;

const data = [{
    "content": {
      "objectTypeID": "FGHD",
      "_id": "singlePro"
    }
  },
  {
    "content": {
      "objectTypeID": "KLM",
      "_id": "singlePro"
    }
  }
]
console.log(data)

＆＃13;

<script src="https://codepen.io/synthet1c/pen/KyQQmL.js?objectTypes=true"></script>

＆＃13;

以下是实现目标的最低代码示例，您可以添加事件来更改显示，并添加额外的细节。

＆＃13;

const output = document.querySelector('#output')
const data = [{
    "content": {
      "objectTypeID": "FGHD",
      "_id": "singlePro"
    }
  },
  {
    "content": {
      "objectTypeID": "KLM",
      "_id": 666
    }
  }
]

// get the type of thing
const type = thing => 
  Object.prototype.toString.call(thing)
    .replace(/\[object\s([^\]]+)\]/, '$1')
    .toLowerCase()

// element factory
const el = (name, className) => (...children) => {
  const el = document.createElement(name)
  el.className = `${className}`
  children.forEach(child => {
    if (typeof child === 'string' || typeof child === 'number') {
      child = document.createTextNode(child)
    }
    if (typeof child != null) {
      el.appendChild(child)
    }
  })
  return el
}

// elements for the app
const objectEl = el('ul', 'object')
const arrayEl = el('ul', 'array')
const propertyEl = el('li', 'property')
const keyEl = el('span', 'key')
const valueEl = el('span', 'value')

// parse object to html recursively
const parseHTML = val => {
  switch (type(val)) {
    case 'array':
      // wrap with ul.array and recursively call parse on the items
      return arrayEl(...val.map(x => parseHTML(x)))
    case 'object':
      // wrap with ul.object and recursively call parse on the properties
      return objectEl(
        ...Object.keys(val)
          .map(key => 
            propertyEl(
              keyEl(key),
              valueEl(parseHTML(val[key]))
            )
          )
      )
    case 'string':
      return el('span', 'string')(`"${val}"`)
    default:
      return el('span', type(val))(val)
  }
}

// parse the object and append it to the dom
output.appendChild(
  parseHTML(data)
)

＆＃13;

html {
  font-family: monospace;
}
ul {
  list-style-type: none;
  padding-left: 1em;
}

.key {
  color: blue;
  margin-right: 1em;
}

.key::after {
  content: ':';
}

.value .string {
  color: #a11;
}

.value .number {
  color: #164;
}

＆＃13;

<div id="output"></div>

＆＃13;

如何制作互动文本区域？

2 个答案: