Javascript 需要帮助从对象数组中创建数字列表吗_Javascript_Html_Typescript_List_Object

Javascript 需要帮助从对象数组中创建数字列表吗

javascript html typescript list object

Javascript 需要帮助从对象数组中创建数字列表吗,javascript,html,typescript,list,object,Javascript,Html,Typescript,List,Object,我无法从对象数组中创建一个编号的对象列表。下面是我包含这些对象的代码。添加必要的TS代码，以使用ol和li在编号列表中显示这些原子名称及其权重。列表中的每一行应以以下格式显示原子名称及其权重： xxxxx（重量：xxxxx） xxxxxxxxx（重量：xxxxxx）这是我的另一个javascript文件 // Find the placeholder node in the HTML document const div2 = document.getElementById("

我无法从对象数组中创建一个编号的对象列表。下面是我包含这些对象的代码。添加必要的TS代码，以使用ol和li在编号列表中显示这些原子名称及其权重。列表中的每一行应以以下格式显示原子名称及其权重：

xxxxx（重量：xxxxx）

xxxxxxxxx（重量：xxxxxx）

这是我的另一个javascript文件

  // Find the placeholder node in the HTML document
const div2 = document.getElementById("part2");

// Create a new H2 and its text
const h2: HTMLHeadingElement = document.createElement("h2");
const h2text: Text = document.createTextNode("Part 2");
h2.appendChild(h2text);
div1?.appendChild(h2);

// create list from array object
const ol1 = document.createElement("ol");
let li1;

let result = atomObjects.map(({name,weight}) => ([name,weight]));
for (let j = 0; j < result.length;j++){
    li1 = document.createElement("li");
      li1.innerText = result[i];
    ol.appendChild(li1);
  }
  div1?.appendChild(ol1);

//在HTML文档中查找占位符节点
const div2=document.getElementById（“part2”）；
//创建新的H2及其文本
常量h2:HTMLHeadingElement=document.createElement（“h2”）；
const h2text:Text=document.createTextNode（“第2部分”）；
h2.追加子项（h2文本）；
第1部分？子项（h2）；
//从数组对象创建列表
const ol1=document.createElement（“ol”）；
让li1；
让result=atomObjects.map（（{name，weight}）=>（[name，weight]）；
for（设j=0；j


HTML代码

摩卡咖啡设置（“bdd”）；
摩卡。检查泄漏（）；
mocha.run（）；
在代码中使用前端侧编号是可以的
e、 g
除非您想在实际对象中存储索引号，否则您必须向Atom类添加另一个属性。也许可以澄清为什么索引很重要？你用它来参考吗？或者只是为了显示？
如果您只想在HTML
页面中显示数据，您可以执行以下操作


原子
常量原子对象=[
{名称：“铝”，重量：26.982}，
{名称：“钡”，重量：137.33}，
{名称：“碳”，重量：12.011}，
{名称：“Dubinium”，重量：268}，
{名称：“铒”，重量：167.26}，
{名称：“氟”，重量：18.988}，
{名称：“镓”，重量：69.723}，
{名称：“氢”，重量：1.008}，
{名称：“氦”，重量：4.0026}，
{名称：“铁”，重量：55.845}，
{名称：“氪”，重量：83.798}，
{名称：“锂”，重量：6.94}，
{名称：“镁”，重量：24.305}，
{名称：“氮”，重量：14.007}，
{名称：“氧气”，重量：15.999}，
{名称：“钯”，重量：106.42}，
{名称：“氡”，重量：222}，
{名称：“硅”，重量：28.085}，
{名称：“钛”，重量：47.867}，
{名称：“铀”，重量：238.03}，
{名称：“钒”，重量：50.942}，
{名称：“氙”，重量：131.29}，
{名称：“锌”，重量：65.38}，
];
const container=document.getElementById（“原子”）；
atomObjects.forEach（（项目，索引）=>{
const row=document.createElement（'div'）；
row.innerHTML=`${index+1}.${item.name}（权重：${item.Weight}）`；
container.appendChild（行）；
});
我想使用索引的唯一原因是在对象数组中循环以显示每个名称和权重，而不必对每个名称执行{atombject}然后我最好的建议是为每个对象添加一个id属性。否则，无论如何，您必须通过使用数组的索引添加一个数字来完成某种for循环的迭代（如果有意义的话）：）@josunenez
  // Find the placeholder node in the HTML document
const div2 = document.getElementById("part2");

// Create a new H2 and its text
const h2: HTMLHeadingElement = document.createElement("h2");
const h2text: Text = document.createTextNode("Part 2");
h2.appendChild(h2text);
div1?.appendChild(h2);

// create list from array object
const ol1 = document.createElement("ol");
let li1;

let result = atomObjects.map(({name,weight}) => ([name,weight]));
for (let j = 0; j < result.length;j++){
    li1 = document.createElement("li");
      li1.innerText = result[i];
    ol.appendChild(li1);
  }
  div1?.appendChild(ol1);

<html>
  <head>
    <script src="./part0.ts" defer> </script>
    <script src="./nunezjo.ts" defer> </script>
    <link rel="stylesheet" href="https://unpkg.com/mocha/mocha.css" />
    <link rel="stylesheet" href="mystyle.css" />
  </head>
  <body>
    <div id="mocha"></div>
    <div id="part0" class="result"></div>
    <div id="part1" class="result"></div>
    <div id="part2" class="result"></div>
    <div id="part3" class="result"></div>
    <script src="https://unpkg.com/chai/chai.js"></script>
    <script src="https://unpkg.com/chai-dom/chai-dom.js"></script>
    <script src="https://unpkg.com/mocha/mocha.js"></script>
    <script class="mocha-init">
      mocha.setup("bdd");
      mocha.checkLeaks();
    </script>
    <script src="./mocha-checker.ts"></script>
    <script class="mocha-exec">
      mocha.run();
    </script>
  </body>
</html>

<ol>
   <li>{atomObject}</li>
</ol>

1. Atom (weight)