Question

我声明了一个对象，并且我有一个带有一些匹配字段的html表单。表单中的所有字段都在对象中，但该对象还有一些额外的变量和函数。

我想用表格中输入的数据填充对象，我现在正在尝试覆盖声明的对象，因此没有函数或其他变量。

对象：

sudo sh -c "echo /usr/lib/oracle/11.2/client64/lib > /etc/ld.so.conf.d/oracle-instantclient.conf"
sudo ldconfig

我如何填写表格：

var Container = {
nodes: [],
Contains: function (Node) {
    for (var i = 0; i < this.nodes.length; i++) {
        if (this.nodes[i].nodeID === Node.nodeID)
            return (i);
    }
    return (-1);
}

表单将ID，标题，文件夹，图片和描述作为字段，因此最后const handleContainerForm = event => { event.preventDefault(); ContainerFormToJSON(form.elements); var i = JSONData.Contains(Container); if (i === -1) JSONData.containers.push(Container); else JSONData.container[i] = Container; output = JSON.stringify(JSONData, null, " "); displayContents(output); };个对象不具有Container函数或Contains()数组。< / p>

如何最终获得我声明的对象的完整填充版本？

Answer 1

在 ContainerFormToJSON 函数中，在语句

之前

return Container

定义：

//container.nodes and container.contains

Answer 2

你是对的，JavaScript与C＃非常不同，特别是在OOP方面。但这并没有使它变得更好或更糟。

在JavaScript中，您不需要声明对象的属性，就像使用类时一样。我认为您只想将表单的输入值序列化为JSON。我建议不要使用另外具有nodes属性和Contains方法的对象。

如果需要保留反序列化对象的副本，请创建两个对象：

class Container {
  constructor () {
    this.nodes = [];
  }
  indexOf (node) {
    return this.nodes.findIndex(n => n.nodeID === node.nodeID);
  }
}
Container.nodeID = 0; // think of it as a static property

function extractValues (elements) {
  // 'elements' is an array of <input> elements
  // the 'container' will be filled and serialized
  var container = new Container();
  for (var index in elements) {
    var element = elements[index];
    container[element.name] = element.value;
  }
  container.nodeID = Container.nodeID++; // give the container a unique ID
  return container;
}

var inputs = document.querySelectorAll('input');
var jsonData = new Container();

document.querySelector('button').addEventListener('click', function () {
  var newContainer = extractValues(inputs);
  var index = jsonData.indexOf(newContainer);
  if (index === -1) {
    jsonData.nodes.push(newContainer);
  } else {
    jsonData.nodes[index] = newContainer;
  }
  var jsonString = JSON.stringify(jsonData, null, ' ');
  console.log(jsonString);
});

<input name="containerID">
<input name="containerTitle">
<!-- ... -->
<button>Serialize</button>

请注意：仅设置对象的属性不会使其成为JSON。如果它被序列化为一个字符串，它只是JSON。我推荐this文章。要序列化JavaScript对象，请使用JSON.stringify。

编辑：

查看问题的编辑，我认为最好创建一个Container类。 jsonData和表单数据的容器都是该类的实例。它可以包含其他容器（nodes），并且可以使用indexOf方法获取此类嵌套容器的索引。我在上面的代码片段中实现了这一点。每当您点击“序列化”按钮时，具有当前<input> s'内容的新容器将添加到jsonData。 jsonData的JSON格式将记录到控制台。

我希望这就是你要找的东西。为了更好地理解JavaScript OOP，看一下MDN的一些文章。

用表单数据填充javascript对象

2 个答案:

编辑：