从数组中显示在一个div上的文本数值

huangapple
go评论97阅读模式
英文:

Text value from an array displayed on a div

问题

我已经漫游了一阵子，但无法使其工作。我从localStorage中的数组中获取了一个文本值，但在简单的部分上失败了，无法将该值显示在一个div中。

这是我的代码：

  1. function loadLastSell() {
  2. 	var contacts = JSON.parse(localStorage.getItem("f7Contacts")) || {};
  3. 	for (var k = 0; k < contacts.length; k++) {
  4. 	var Sellings = contacts[k].sellings;
  5. 	}console.log(Sellings);
  6. 	var sellings = Sellings;
  7. 	for (var x = 0; x < sellings.length; x++) {
  8. 	var lselling = document.getElementById("lselling");
  9. 	var lSelling = sellings[x].vdate;
  10. 	}console.log(lSelling);
  11. 	}
  1. <div class="item-title">Fecha de confección:</div>
  2. 		<div class="item-inner">
  3. 			<div class="item-subtitle" id="lselling"></div>
  4. 		</div>

这是调试结果：

从数组中显示在一个div上的文本数值

但我无法将文本值显示在div中，如图所示：

从数组中显示在一个div上的文本数值

我想要的是获取数组的最后一个元素并显示在div上。我的代码正在运行，但我无法将元素显示在div上。我需要获取sellings中的最后一个对象，并在#lselling上显示vdate的值。就这样。console.log(lSelling); 显示 19/03/2023 05:34 AM，这就是我想要显示的。我已经在一个contact中，现在我需要获取该联系人的最后一个selling并显示vdate的值。

我的代码有什么问题？

更新

对于未来的提问者，我通过将函数转为 async 来解决了这个问题，就像这样：

  1. async function loadLastSell() {
  2. 	var contacts = JSON.parse(localStorage.getItem("f7Contacts")) || {};
  3. 	for (var k = 0; k &lt; contacts.length; k++) {
  4. 	var Sellings = contacts[k].sellings;
  5. 	}
  6. 	var sellings = Sellings;
  7. 	for (var x = 0; x &lt; sellings.length; x++) {
  8. 	await 2;
  9. 	lselling = document.getElementById("lselling")
  10. 	lSelling = sellings[x].vdate;
  11. 	}
  12. 	lselling.innerHTML = lSelling
  13. 	}

现在 vdate 的最后一个 selling 的值在 div 上正确显示了。

英文:

I have being wandering around this but can't make it work. I am getting a text value from an array on localStorage but I am failing with the easy part, display this value on a div.

This is my code:

javascript

  1. function loadLastSell() {
  2. var contacts = JSON.parse(localStorage.getItem(&quot;f7Contacts&quot;)) || {};
  3. for (var k = 0; k &lt; contacts.length; k++) {
  4. var Sellings = contacts[k].sellings;
  5. }console.log(Sellings);
  6. var sellings = Sellings;
  7. for (var x = 0; x &lt; sellings.length; x++) {
  8. var lselling = document.getElementById(&quot;lselling&quot;);
  9. var lSelling = sellings[x].vdate;
  10. }console.log(lSelling);
  11. }

html

  1. &lt;div class=&quot;item-title&quot;&gt;Fecha de confecci&#243;n:&lt;/div&gt;
  2. 	&lt;div class=&quot;item-inner&quot;&gt;
  3. 		&lt;div class=&quot;item-subtitle&quot; id=&quot;lselling&quot;&gt;&lt;/div&gt;
  4. 	&lt;/div&gt;

This is the debuging result:

从数组中显示在一个div上的文本数值

But I can't manage to display the text value on the div as shown in this image:

从数组中显示在一个div上的文本数值

What I want is to get the last element of the array and display it on the div. My code is working but I can't manage to diplay the element on the div. I need to get the last object withing sellings and display the value of vdate on #lselling. Just that. console.log(lSelling); is showing 19/03/2023 05:34 AM, and this is what I want to be displayed there. I'm already within a contact, now I need to get the last selling of this contact and display the value of vdate.

What's wrong within my code?

UPDATE

For future askers I solved it turning the function to async just like this:

  1. async function loadLastSell() {
  2. var contacts = JSON.parse(localStorage.getItem(&quot;f7Contacts&quot;)) || {};
  3. for (var k = 0; k &lt; contacts.length; k++) {
  4. var Sellings = contacts[k].sellings;
  5. }
  6. var sellings = Sellings;
  7. for (var x = 0; x &lt; sellings.length; x++) {
  8. await 2;
  9. lselling = document.getElementById(&quot;lselling&quot;)
  10. lSelling = sellings[x].vdate;
  11. }
  12. lselling.innerHTML = lSelling
  13. }

Now the value of vdate last selling ise properly displayed on the div.

答案1

得分: 0

根据我的理解，您已经在变量“lSelling”中存储了文本值。
而“lselling”变量保留了您想要显示此文本的 div 元素。

要将文本放入 div 元素中，您可以使用“innerHTML”作为选项：

  1. // ...
  2. for (var x = 0; x < sellings.length; x++) {
  3. var lselling = document.getElementById("lselling");
  4. var lSelling = sellings[x].vdate;
  5. }console.log(lSelling);
  6. // 将您的变量放入 div 的 innerHTML 中：
  7. lselling.innerHTML = lSelling
  8. }

实际上，您不需要循环，可以这样编写：

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

更新：
要使 JS 代码正常工作，必须在加载 HTML 内容后执行。
最简单的方法是将“ :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定