How to get the subordinate list via javascript - 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>

Related

Need to list the items by hiding method

I have a heading to list the items
List Name
List 1
List 2
List 3
List 4
but i need to display the listed items after click the "List Name". The Listed Items are to be hidden until click the "List Name". What is the coding for it in HTML
Need Coding for HTML
it's works for me :
document.getElementById("list-name").addEventListener("click", function() {
var listItems = document.getElementById("list-items");
if (listItems.style.display === "none") {
listItems.style.display = "block";
} else {
listItems.style.display = "none";
}
});
<button id="list-name">List Name</button>
<ul id="list-items" style="display:none;">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ul>
You can use jquery or javascript for this.
<script>
$(document).ready(function(){
$(".list-name").click(function(){
$(".list").toggle();
});
});
</script>
<ul class="list">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
List Name
You can use this script to hide and show the list item on click.

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>

Jquery - Filtering cascaded list based on class (Seprate list and nested list)

This is my sample HTML trying achieve some filtering logic for business functionality. We have a Complex structure HTML and i just hard coded some sample HTML to make some example out of it
<ol class="list_1">
<li class="page_1">one</li>
<li class="page_1">two</li>
<li><span class="ing_page_1">three
</span><ol class="list_2">
<li class="page_1">sub 1</li>
<li class="page__1">sub 2</li>
<li class="page__2">sub 3</li>
</ol>
</li>
<li class="page_2">four</li>
<li class="page_2">five</li>
</ol>
Am trying to Filter the list to get below results(DOM Elements).
Query to get DOM elements as results so i can add some attribute for each list
List 1 and its pages(List 1 - One, Two , Three , Four , Five)
List 2 and its pages(List 2 - Sub 1,Sub 2 , Sub 3)
Class 'ing_page_1' also belongs to page 1 but when i have nested structure i have some special class created with ing_ to process some other logic and it is a constant
have added my fiddle(https://jsfiddle.net/pjagana/ubk8ngha/6/) with console statements as my filter always result in sub list as well. Any help would be helpful
You must iterate through all immediate child lis and remove non span (or attr*=ing_page) then get the text.
Maybe you can try this:
function getList(parent) {
var temp = parent + " and its pages (" + parent + " - ";
$("." + parent + ' > li').each(function() { // Find all immediate li children
// Create a clone
var $clone = $(this).clone();
// remove non-span elements and remove them so only span elements would be left (you can replace this with ':not([class&=ing_page])' or something similar if needed)
$clone.find(':not(span)').remove();
// clean the text
temp += $.trim($clone.text().replace(/\s{2,}/gim, " "));
if ($(this).is(':not(:last-child)'))
temp += ", ";
});
return temp + ")";
}
console.log(getList('list_1') + "\n" + getList('list_2'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class="list_1">
<li class="page_1">one</li>
<li class="page_1">two</li>
<li>
<span class="ing_page_1">three</span>
<ol class="list_2">
<li class="page_1">sub 1</li>
<li class="page__1">sub 2</li>
<li class="page__2">sub 3</li>
</ol>
</li>
<li class="page_2">four</li>
<li class="page_2">five</li>
</ol>

Exacly search in javascript

How I can search text in javascript only if is match perfectly. For example I have this structure:
<ul class="item-options">
<li>First Item</li>
<li>item Name</li>
<li>product 1</li>
<li>Item Description</li>
<li>product description</li>
<li>Additional Info</li>
<li>Red</li>
<li>Color</li>
<li>Red</li>
</ul>
<ul class="item-options">
<li>Second Item</li>
<li>item Name Blue</li>
<li>product 2</li>
<li>Item Description</li>
<li>product2 description</li>
<li>Additional Info</li>
<li>-----</li>
<li>Color</li>
<li>Blue</li>
</ul>
<ul class="item-options">
<li>Third Item</li>
<li>item Name Purple</li>
<li>product 3</li>
<li>Item Description</li>
<li>-------</li>
<li>Additional Info</li>
<li>-----</li>
<li>Color</li>
<li>------</li>
</ul>
For example I want to check if the text item Name exist in the page then if the item Name text exist remove associated children. So for the first item Name I need to remove only the color:
<li>Color</li>
<li>Red</li>
Then if item Name Blue text exist I need to remove associated children
<li>Additional Info</li>
<li>-----</li>
and if the third item Name Purple text exist then remove associated children:
<li>Item Description</li>
<li>-------</li>
<li>Additional Info</li>
<li>-----</li>
<li>Color</li>
<li>------</li>
I create this script but for example the name Color is deleted everywhere. Even if in the item Name or in item Name Purple must remain there. I think the problem is because the first product have the name item Name and in the second product the name is start with item Name Purple.
<script type="text/javascript">
jQuery(document).ready(function() {
if (jQuery('.items-class li:contains("item Name")').length > 0)
{
var parent = jQuery('.items-class');
var children = jQuery('.items-class').find("li");
jQuery(children).each(function(i,e){
if(~jQuery(e).text().indexOf("item Name Blue")){
jQuery(parent).find('li:contains("Additional Info")').html('');
jQuery(parent).find('li:contains("-----")').html('');
}
if(~jQuery(e).text().indexOf("item Name Purple")){
jQuery(parent).find('li:contains("Item Description")').html('');
jQuery(parent).find('li:contains("-------")').html('');
jQuery(parent).find('li:contains("Additional Info")').html('');
jQuery(parent).find('li:contains("-----")').html('');
jQuery(parent).find('li:contains("Color")').html('');
jQuery(parent).find('li:contains("-----")').html('');
}
else if(~jQuery(e).text().indexOf("item Name")){
jQuery(parent).find('li:contains("Color")').html('');
jQuery(parent).find('li:contains("Red")').html('');
}
});
}
});
</script>
I'm not exactly sure what you are asking, but I hope this helps.
function removeAdditionalInfo(searchCriteria){
var interestingTagSelector = "ul.item-options > li";
var additionInfoHeader = "Additional Info";
var getFilter = function(criteria){
return function(index, item){ return (item.innerHTML === criteria); };
};
// find the potentially interesting li tags
$(interestingTagSelector)
// filter out those that are not in fact interesting
.filter(getFilter(searchCriteria))
// get siblings following an interesting li tag
.nextAll()
// ignore those not starting the additional info section
.filter(getFilter(additionInfoHeader))
// get siblings following the AddInfo header
.nextAll()
// removed them
.remove();
}
removeAdditionalInfo("item Name");
the removeAdditionalInfo() function below and:
removeAdditionalInfo("item Name");
removeAdditionalInfo("item Name Blue");
removeAdditionalInfo("item Name Purple");
will remove the additional info items.

Categories