We Keep Coding

How to get the subordinate list via javascript

I have a problem. I get the receive information from my firestore database. This information I would like to be shown. The first function getOrders(...) shows the parent information, for example "All Prouct", "Date", "Amount". The function getOrdersDetail(...) shows the subordinate information. So every order has its order details. I would like to show no these information in a list.
For example
<ul id="list">
<li>Order 1</li>
<ul>
<li>Information 1</li>
<li>Information 2</li>
</ul>
<li>Order 1</li>
<ul>
<li>Information 1</li>
</ul>
</ul>
My idea was to split the function showOrders(...) in showOrders(...) and showOrdersDetails(...). But I don't know how to create subordinate li elements. ( May my Idea is not good and you have a better Idea ). I hope you can help me. I would be happy to read some answers! :) Thanks in advance.
index.html
<ul id="list">
</ul>
script.js
function showOrdersDetail(produkt, datum, summe) {
var text = produkt + " " + datum + " " + summe;
listNode = document.getElementById('test'),
liNode = document.createElement("li"),
txtNode = document.createTextNode(text),
liNode.appendChild(txtNode);
listNode.appendChild(liNode);
}
/**
* Get all orders of the user
* #param {user.uid} userid
*/
function getOrders(userid) {
db.collection("users").doc(userid).collection("bestellungen").get().then(function(querySnapshot) {
if(querySnapshot.empty) {
console.log("empty");
}
else {
querySnapshot.forEach(function(doc) {
showOrders(doc.data().produkte, doc.data().datum, doc.data().summe)
//console.log(doc.id, " => ", doc.data());
console.log(doc.id);
//console.log(doc.data().datum);
//console.log(doc.data().produkte);
//console.log(doc.data().summe);
getOrdersDetail(doc.id, userid);
});
}
});
}
function getOrdersDetail(docid, userid) {
db.collection("users").doc(userid).collection("bestellungen").doc(docid).collection("gesamtbestellungen").get().then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
console.log(doc.id, " => ", doc.data());
//console.log(doc.data().produkt);
//console.log(doc.data().preis);
//console.log(doc.data().anzahl);
//console.log(doc.data().summe);
});
});
}

See the section Nesting a list within ul: The Unordered List element
Sub-lists should be INSIDE the individual list items (in your case for the orders).
<ul>
<li>first item</li>
<li>second item
<!-- Look, the closing </li> tag is not placed here! -->
<ul>
<li>second item first subitem</li>
<li>second item second subitem
<!-- Same for the second nested unordered list! -->
<ul>
<li>second item second subitem first sub-subitem</li>
<li>second item second subitem second sub-subitem</li>
<li>second item second subitem third sub-subitem</li>
</ul>
</li> <!-- Closing </li> tag for the li that
contains the third unordered list -->
<li>second item third subitem</li>
</ul>
<!-- Here is the closing </li> tag -->
</li>
<li>third item</li>
</ul>

Javascript NodeList.forEach() not updating all found items

I don't understand why this function only seems to update the last item in the nodelist. I want the function to add the indicator element to all li elements that have a child ul element. The function finds all the elements, but only the last one seems to get updated.
var ulElementsWithChildren = document.querySelectorAll('ul.test>li ul');
var indicator = document.createElement('span');
indicator.innerHTML = '+';
ulElementsWithChildren.forEach(function(item) {
item.parentElement.appendChild(indicator);
});
html
<ul class="test">
<li>Item 1</li>
<li>Item 2
<ul>
<li>Child Item</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4
<ul>
<li>Child Item</li>
</ul>
</li>
<li>Item 5
<ul>
<li>Child Item</li>
</ul>
</li>
</ul>
JS Fiddle

You create one <span>.
You then append it in lots of different places.
Since an element can only appear in one place, you move it each time until you get to the end of the loop.
You need to create a new span each time you go around the loop.

Move your indicator declaration inside of your foreach and it will work.
example:
ulElementsWithChildren.forEach(function(item) {
var indicator = document.createElement('span');
indicator.innerHTML = '+';
item.parentElement.appendChild(indicator);
});
You're only creating a single span element.

Find if there is any repeat content in a list and remove repeated instances

Basically what I'm trying to do is identify if there is any duplicate content from a list of items that all share the same class, and then remove any duplicates.
Here's my attempt so far but has been unsuccessful:
var listItemContent = $(".featured-listing").textContent;
if (listItemContent === listItemContent) {
$('.featured-listing').hide();
}
This isn't really working, and I'm not surprised as js is not my strong suit and even reading it it looks like it would take the content of an instance of ".featured-listing", compare it to itself and then hide it, resulting in all instances of that class being hidden. The problem is I'm not really sure how to:
Check if DIFFERENT instances of that class have matching text content
Remove any duplicated content

Try this snippet:
var listItemContents = [];
$(".featured-listing li").each(function() {
var text = $(this).text();
if (listItemContents.indexOf(text) == -1) {
listItemContents.push(text);
}
else {
$(this).remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="featured-listing">
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 1</li>
<li>Text 4</li>
<li>Text 2</li>
</ul>
It just loop through all items checking their content by an array. If the text isn't found in the array, it adds the item. If it is found, it removes the list item.
I'm not sure if that html is like yours since you didn't added it in your post. If you do, we can have a clearer idea of what would works better for you.

Get all the featured-listings. Define a main object which holds all the texts and then delete an element if there is the same text:
var elements = {};
$('.featured-listsing').each(function () {
var currentText = $(this).text();
if ( elements[currentText] )
$(this).remove();
else
elements[currentText] = true;
});

You can filter your jQuery list object taking those that are repeated and hide them. Check the next fiddle, the technique is to check those items that have a previous sibling with the same text content and create a new jQuery list with them:
let items = $(".featured-listing li");
let repes = items.filter((ind, itm) => $(itm).prevAll(`:contains(${itm.innerText})`).length);
repes.remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="featured-listing">
<li>1 - Content 01</li>
<li>2 - Content 02</li>
<li>1 - Content 01</li>
<li>3 - Content 03</li>
<li>4 - Content 04</li>
<li>2 - Content 02</li>
<li>5 - Content 05</li>
<li>6 - Content 06</li>
<li>2 - Content 02</li>
<li>7 - Content 07</li>
</ul>

Trying to parse tag element

I am trying to parse a web page with JavaScript targeting list <li> without class.
<ul id="cartItems">
<li class="heading">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>

Use querySelectorAll to get all li elements without a class.
var liWithoutClass = document.querySelectorAll('#cartItems > li:not([class])');
console.log(liWithoutClass);
document.write(liWithoutClass[0].textContent); // Output the first li
document.write('<br />' + liWithoutClass[3].textContent); // Output the last li
<ul id="cartItems">
<li class="heading">Heading</li>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
</ul>

var elems = document.querySelector(".heading");
console.log(elems);
//Now we strip the class out like this:
elems.setAttribute(class, "none");
//Now we display the updated values below
console.log(elems);
// This won't work in Stack's editor, so you'll have to validate it against the page you want.
//Now, just grab the entire element by id from the page as below:
var updatedContent = document.getElementById("cartItems");
console.log(updatedContent);
//Again, stack's editor is limited, but overall this should work fine on your page.
<ul id="cartItems">
<li class="heading">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>

Nested lists - selecting path using Javascript

I have Javascript function that is adding css class "current" to selected link <a>. This function looks like that:
function markActiveLink() {
var path = location.pathname;
var links = null;
if (path) {
links = $("a[href^='" + path + "']");
} else {
links = $("a[href='/']");
}
links.parents("li").each(function () {
$(this).addClass("current");
});
}
And I have nested list wchich looks similar to that list:
<ul class="menu">
<li>menu item
<ul>
<li>menu item </li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul>
<li>menu item </li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
</ul>
I want to add class "current" (using Javascript function) not to link <a> like it is now working but to <li> element and it's parent <li>. So it would look like that:
<ul class="menu">
<li class="current">menu item
<ul>
<li>menu item </li>
<li class="current">menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul>
<li>menu item </li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
</ul>
Question: How can I modify my function markActiveLink() so that it would add class "current" both to <li> element and it's parent <li> element?
Any help here much appreciated!

Try:
links.parent().addClass('current')
.closest('li').addClass('current');
jQuery Docs

Seems to me like it's working. I only changed the hrefs in your links so they wouldn't be duplicates and added some CSS to show the highlighted elements in this JSFiddle

Use the .parent() api to do it
Docs
EDIT
Something like this:
$(this).parent().parent().addClass("current")