主页 / 问题 / 990010
Accepted
Alisa Bondarchuk
Asked:2020-06-06 22:03:20 +0000 UTC2020-06-06 22:03:20 +0000 UTC

如何将对象从js文件传递到html页面？

  • 772

我有一个有点复杂的问题，我会尽量描述清楚。因此，我从服务器中为我的两个模型获取了两个对象。这些对象包含类别字段、姓氏、模型元素标识符等。通过过滤，我得到 4 个数组。第一个和第二个数组存储唯一标识符，而第三个和第四个数组存储重复标识符。第一个数组包含第一个模型的唯一标识符。在第二个中 - 第二个数组是唯一的，在第三个和第四个中 - 分别是它们的共同元素。

为了说明这一点，我将给出以下示例。

const dataFirstModel = [{"revitid": "1"},{"revitid": "2"},{"revitid": "3"},{"revitid": "4"}];
const dataSecondModel = [{"revitid": "1"},{"revitid": "2"},{"revitid": "5"},{"revitid": "6"}];

从代码中可以看出，前两个revitids是一样的，最后一个是不同的。结果，通过过滤，我收到了以下数组：

[ //first array(difference)
  { 
    revitid: 3
    building: ""
    level: ""
    room: ""
    viewid: 3302
    category: "Walls"
    family: "Basic Wall"
    symbol: "Wall-Ext_102"
  },{
    revitid: 4
    building: ""
    level: ""
    room: ""
    viewid: 3303
    category: "Walls"
    family: "Basic Wall"
    symbol: "Wall-Ext_102"
  }
];

[ //second array(difference)
  { 
    revitid: 5
    building: ""
    level: ""
    room: ""
    viewid: 3304
    category: "Walls"
    family: "Basic Wall"
    symbol: "Wall-Ext_102"
  },{
    revitid: 6
    building: ""
    level: ""
    room: ""
    viewid: 3305
    category: "Walls"
    family: "Basic Wall"
    symbol: "Wall-Ext_102"
  }
];
[ //first array(similar)
  { 
    revitid: 1
    building: ""
    level: ""
    room: ""
    viewid: 3300
    category: "Walls"
    family: "Basic Wall"
    symbol: "Wall-Ext_102"
  },{
    revitid: 2
    building: ""
    level: ""
    room: ""
    viewid: 3301
    category: "Walls"
    family: "Basic Wall"
    symbol: "Wall-Ext_102"
  }
];

[ //second array(similar)
  { 
    revitid: 1
    building: ""
    level: ""
    room: ""
    viewid: 3300
    category: "Walls"
    family: "Basic Wall"
    symbol: "Wall-Ext_102"
  },{
    revitid: 2
    building: ""
    level: ""
    room: ""
    viewid: 3301
    category: "Walls"
    family: "Basic Wall"
    symbol: "Wall-Ext_102"
  }
];

现在我需要将这些数组传递给 html 页面，我无法处理这个任务。

你需要像这样发送它。

  1. 单击时打开的类别按钮。可能有几个类别，例如，可能有一个类别的墙壁和屋顶。
  2. 打开的类别应该有一个打开的家庭财产按钮。
  3. 开放族必须具有符号属性的按钮。
  4. 单击具有符号属性的按钮后，应打开一个按钮列表，根据以下特征：
    1. 在最顶部应该有一个来自第一个数组的按钮，即 第一个模型的差异。这些按钮应具有紫色背景色和onclick="firstModel(${viewid})".
    2. 第一个数组中的按钮应位于第二个数组的按钮下方，但它们应具有绿色背景和onclick="secondModel(${viewid})".
    3. 接下来，第三个数组中的按钮应该紧随其后，具有橙色背景色和onclick="firstModel(${viewid})".
    4. 最后会有来自第四个数组的按钮，也是橙色背景，但带有onclick="secondModel(${viewid})".

最终结果应该是这样的列表：

类别

家庭

符号

按钮 按钮 按钮 按钮

其他类别

家庭

符号

按钮按钮

我将非常感谢您的帮助。感谢您的宝贵时间，如果您有任何问题，请随时联系。

javascript

1 个回答

  1. Best Answer

    对于此类任务，最好使用允许您进行模板化的框架，例如VueJs，特别是如果这不是单个任务，而是更复杂系统的一部分。

    如果您需要完全在 Js 中完成，那么在 JS 中有一个用于动态创建 DOM 的 API。

    https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

    上面链接的文档中的一个示例：

    document.body.onload = addElement;

function addElement () { 
  // создаём новый div элемент
  var newDiv = document.createElement("div"); 
  // создаём текстовый узел
  var newContent = document.createTextNode("Hi there and greetings!"); 
  // добавляем внутрь
  newDiv.appendChild(newContent);  

  // новый элемент будем добавлять в эллемент с id div1
  var currentDiv = document.getElementById("div1"); 
  // добавляем
  document.body.insertBefore(newDiv, currentDiv); 
}

    此代码是如何动态创建 html 标记的示例。通过这个 API，您可以动态地创建标签、属性、更改和添加到任何地方。

    const parent = document.getElementById("main");

const data = {
  one: {
    info: "Hello1",
    text: "Text1",
    btn: "Btn1"
  },
  two: {
    info: "Two info",
    text: "Text2",
    btn: "Btn2"
  },
  next: {
    info: "Next info",
    text: "Text3",
    btn: "Btn3"
  }
}

for (const key in data) {
  const div = document.createElement("div");
  div.classList.add("my-class");
  div.innerText = `info: ${data[key].info}, text: ${data[key].text} `;
  const btn = document.createElement("button");
  btn.innerText = data[key].btn;
  div.appendChild(btn);
  parent.appendChild(div);
}
    .my-class {
  padding: 10px;
  background-color: #BFFFA4;
  margin: 5px 0;
}

button {
  margin-left: 20px;
}
    Some content

<div id="main"></div>

    • 1

相关问题