Question 43743 in Html Question posted in
Some basic documentation can be found here.

Text value from an array displayed on a div – Html

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

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);
}

html

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

This is the debuging result:

Debuging

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

div image

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:

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

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

Tags:

3

Answers


  1. 0

    Your loop contents are wrong

    var Sellings = contacts[k].sellings;

    is setting the same var over and over

    This is wrong:

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

    you replace lSelling over and over and do not update the content of the lselling element. Also very poor choice of names lselling (element) and lSelling (value)

    You might have more luck with this assuming my testdata looks like your data. If not show an example of the data instead of a picture of it

    I have used the optional/conditional chaining operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) .? and the nullish coalescing operator ?? to give a "No sales" if vdate is missing

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

const loadLastSell = () => {
  listSelling.innerHTML = contacts
    .map(contact => `<div class="contact">
      ${contact.sellings
        .map(selling => `<span class="date">${new Date(selling.vdate).toLocaleDateString()}</span>`).join("<br/>")}
    </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": [{
      vdate: "2022-03-25",
      "pdcb": "E"
    }, ]
  },

];</script>

    If you only want to show the last one:

    //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>
    Login or Signup to reply.
  2. 0

    You are not working with lselling anywhere. You are getting the element with getElementById and then just reasigning the variable lselling. Just do

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

    Btw this code needs tons of optimizations.

    Login or Signup to reply.
  3. 0

    As I get it you already have the text value stored in the "lSelling" var.
    And the "lselling" var keeps the div you want to show this text in.

    To put your text into the div, you may use "innerHTML" as an option:

    // ...
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
}

    In fact, you don’t need the loop there, can be written like:

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

    UPD:
    For the JS code to work, it has to be executed after the HTML content is loaded.
    The easiest for this is placing the tag after the 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search