javascript 显示在div上的数组中的文本值

z18hc3ub  于 2023-03-21  发布在  Java
关注(0)|答案(3)|浏览(115)

我一直在徘徊,但不能使它工作。我从localStorage上的数组中获取文本值,但我在简单的部分失败了,在div上显示这个值。
这是我的代码:
javascript语言

function loadLastSell() {
var contacts = JSON.parse(localStorage.getItem("f7Contacts")) || {};
for (var k = 0; k < contacts.length; k++) {
var Sellings = contacts[k].sellings;
}console.log(Sellings);
var sellings = Sellings;
for (var x = 0; x < sellings.length; x++) {
var lselling = document.getElementById("lselling");
var lSelling = sellings[x].vdate;
}console.log(lSelling);
}

超文本标记语言

<div class="item-title">Fecha de confección:</div>
    <div class="item-inner">
        <div class="item-subtitle" id="lselling"></div>
    </div>

这是调试结果:

但是我无法在div上显示文本值,如下图所示:

我想要的是获取数组的最后一个元素并将其显示在div上。我的代码可以工作,但我无法在div上显示该元素。我需要获取sellings中的最后一个对象并将vdate的值显示在#lselling上。只是.console.log(lSelling);显示19/03/2023 05:34 AM,这就是我想要显示的内容。我已经在contact中,现在我需要获取此联系人的最后一个selling并显示vdate的值。
我的代码有什么问题?

rqqzpn5f

rqqzpn5f1#

正如我所理解的那样,您已经将文本值存储在“lSelling”var中。“lselling”var保存了您想要显示此文本的div。
要将文本放入div中,您可以使用“innerHTML”作为选项:

// ...
for (var x = 0; x < sellings.length; x++) {
var lselling = document.getElementById("lselling");
var lSelling = sellings[x].vdate;
}console.log(lSelling);
// putting your var into the innerHTML of the div:
lselling.innerHTML = lSelling
}

实际上,你不需要循环,可以这样写:

const isellingElm = document.getElementById("lselling");
const lastSelling = sellings[sellings.length - 1];
isellingElm.innerHTML = lastSelling.vdate;

UPD:为了让JS代码工作,它必须在HTML内容加载后执行。最简单的方法是将标签放在lselling div之后:

<script>
// FAIL: your div is not the part of the document yet
loadLastSell();
</script>

<div class="item-title">Fecha de confección:</div>
<div class="item-inner">
  <div class="item-subtitle" id="lselling"></div>
</div>

<script>
// CORRECT: will be executed after the content is loaded
loadLastSell();
</script>
uhry853o

uhry853o2#

你没有在任何地方使用lselling。你用getElementById获取元素,然后重新分配变量lselling

var lselling = document.getElementById("lselling");
lSelling.textContent = sellings[x].vdate;

顺便说一句,这段代码需要大量的优化。

siv3szwd

siv3szwd3#

你的循环内容是错误的

var Sellings = contacts[k].sellings;

反复设置相同的变量
这是错误的:

var lselling = document.getElementById("lselling");
var lSelling = sellings[x].vdate;

你一遍又一遍地替换lSelling,而不更新lSelling元素的内容。lSelling(element)和lSelling(value)这两个名字的选择也很糟糕。
如果我的测试数据看起来像你的数据,你可能会有更多的运气。如果不是,显示一个数据的例子,而不是它的图片
如果缺少vdate,我使用可选/条件链接运算符](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining.?nullish coalescing operator??给予“No sales
一个一个二个一个一个一个三个一个一个一个一个一个四个一个
如果只想显示最后一个:

//const contacts = JSON.parse(localStorage.getItem("f7Contacts")) || [];
const listSelling = document.getElementById("lselling");

const loadLastSell = () => {
  listSelling.innerHTML = contacts
    .map(contact => `<div class="contact">${contact.sellings[contact.sellings.length-1]?.vdate ?? "No sales"}</div>`).join("");
}
window.addEventListener("DOMContentLoaded",loadLastSell);
.contact { padding:2px; border:1px solid black;}
<div id="lselling"></div>

<script>
// testdata
const contacts = [{
    "sellings": [{
        vdate: "2022-03-20",
        "pdcb": "A"
      },
      {
        vdate: "2022-03-21",
        "pdcb": "B"
      },
      {
        vdate: "2022-03-22",
        "pdcb": "C"
      }
    ]
  },
  {
    "sellings": [{
      vdate: "2022-03-24",
      "pdcb": "D"
    }, ]
  },
  {
    "sellings": [{
      /* Missing vdate */
      "pdcb": "E"
    }, ]
  },

];</script>

相关问题