Requesting data id from an element to use for Json

Question

I am trying to get the list id from a different element when a form is submitted so that I can associate the list to the 'todo' item and create that 'todo' with the list id it is under. I keep getting the integrityError due to not having the list_id when form is submitted. So how do I get the data-id from the other element? I have tried document.querySelectorAll('lists') but nothing is coming through it. Javscript for attempting to retrieve the data-id

'''

    document.getElementById('form').onsubmit = function(e) {
    e.preventDefault();
    const desc = descInput.value;
    const id1 = document.querySelectorAll('#lists');
    const id = id1.dataset.id;
    console.log(id);
    fetch('/todos/create', {
      method: 'POST',
      body: JSON.stringify({
        'description': desc,
        'list_id' : id,

      }),
      headers: {
        'Content-Type': 'application/json',
      }
    })

'''

element I am trying to get the id from

'''

         <ul id='lists'>
     {% for list in lists %}
    <li><input class="list-completed" data-id='{{ list.id }}' 
    type="checkbox"
     {% if list.completed %} checked {% endif %}>
    <a href="/lists/{{ list.id }}">
      {{ list.name }}
    </a><button class="deletelist" data-id='{{ list.id }}' 
    type="button">&cross;</button>
  </li>
  {% endfor %}
</ul>

'''

form that will be submitted to create a 'todo' item

'''

  <form id="form" method="post" action="/todos/create">
  <input type="text" id="description" name="description" />
  <input class="something" type="submit" value="Create" />
</form>

'''

The other element is the lists that I put in the description — Roughcaster, Dec 18 '19 at 22:01
I am trying to get data-id from the lists element so that when the form is submitted it gets the input from the form and the id from the lists to associate the newly made todo item created from the form with its parent which is the list — Roughcaster, Dec 18 '19 at 22:03
[`querySelectorAll` returns a `NodeList`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll). A `NodeList` does not have a `datalist` property. You likely want `querySelector` since IDs should be unique to the document anyway. — Heretic Monkey, Dec 18 '19 at 22:09
Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Heretic Monkey, Dec 18 '19 at 22:10
@EmielZuurbier Oh man, you're right since the id is only applied through the loop. How would I get around that? Since the list's displayed will vary id's. — Roughcaster, Dec 18 '19 at 22:15
"Since the list's displayed will vary id's." Your code does not reflect that at the moment. The `#lists` element stays static. Only the `li` inside the list vary. Correct? — Emiel Zuurbier, Dec 18 '19 at 22:24
The data-id in the lists element is a loop that will display each list in the database so the data-id will change each iteration right? Which is why I am not getting data from the id since its in a loop — Roughcaster, Dec 18 '19 at 22:32
Would there be a way to retrieve data from the url? Since I have it set that the url shows what the current list id is. By the way this is a project in Udacity's Full stack dev course and they dont go through this portion of it. — Roughcaster, Dec 18 '19 at 22:37
Sure. And in case of there being 5 lists in that loop, meaning you have 5 different `data-id`'s in the loop. How would you know which one of those `data-id`'s to use in your form? — Emiel Zuurbier, Dec 18 '19 at 22:40
Yeah I had not thought of that when trying this part of the project. I think pulling from the url would be the better option — Roughcaster, Dec 18 '19 at 22:42

score 0 · Answer 1 · answered Dec 18 '19 at 21:56

0

When you would do

const test = document.querySelectorAll('li')

you will get an array of all LI DOM elements, then you can grab data-id attribute from each one by iterating over.

// print data-id attributes for all LI
test.map(item => console.log(item.dataset.id));

didn't test it. but this should be a good start for you

answered Dec 18 '19 at 21:56

crtag

2,018
2
14
13

I have two different forms. They both have id's. I need the id from the 'lists'. I have another list for the 'todos' if I do all of the li's I will get an id from the 'todos' when I need the id from 'lists' to use when creating a new 'todo' to associate them – Roughcaster Dec 18 '19 at 21:59
@Roughcaster if you have two lists you can fetch individual ones by looking up in two host forms, ie ```const list1 = getElementById('form1').querySelectorAll('li')``` and the same for the second one. This will be vanilla JS where you have all control over your list contents and up to you how you sync those up – crtag Dec 19 '19 at 02:05

Requesting data id from an element to use for Json

1 Answers1