I need to know how to select a specific value in a form of a query.
Under the Content.join('');, I need to select like 2 values which is the Hello and Lorem ipsum... then Hi and Nullam fringilla..., and so on.
Sorry, kinda new to this stuff as well.
<script>
var Count = 0;
var title = document.getElementById("getTitle");
var desc = document.getElementById("getDescription");
var Content = [
["Option1", "Hello", "Lorem ipsum dolor sit amet"],
["Option2", "Hi", "Nullam fringilla imperdiet eleifend"],
["Option3", "Greetings", "Cras dapibus ipsum a consequat tincidunt"]];
function previewImg(DibsSrc){
document.getElementById("Dibs").src =DibsSrc.src;
Content[Count][0] = DibsSrc.id;
title.innerhtml = Content.join('');
desc.innerhtml = Content.join('');
}
</script>
Content[0][1] or Content[Count][1] = Hello
Content[0][2] or Content[Count][2] = Lorem ipsum dolor sit amet
To check the next item you need to update the Count var with a +1.
Content[1][1] or Content[Count][1] = Hi
Content[1][2] or Content[Count][2] = Nullam fringilla imperdiet eleifend
Note that the count starts with 0, so your first item is 0 instead of 1.
I want to make my js program read from a txt file whose location is hardcoded. Every time the txt file is update, I want to store the new data as a new variable.
For example, when the txt file changes from blank to the following:
Lorem ipsum dolor sit amet
it will store newInfo = "Lorem ipsum dolor sit amet"
Then if the txt file is updated to the following:
Lorem ipsum dolor sit amet
consectetur adipiscing elit
It will store newInfo = "consectetur adipiscing elit"
How to generate nested ordered lists from the following content? I have searched the forum and worked for a few hours now to generate ordered lists based on the different classes from the source content. The content may have up to 6 nesting
level.
What I need is to generate ordered lists based on the different classes. As shown in the sample content to get something like below outlined example content.
.firstclass => 1.
.secondclass => 1.
.thirdclass => 1.
.fourthclass => 1.
The code:
var cheerio = require('cheerio');
var $ = cheerio.load('<h1 class="header">First Header</h1><p class="firstclass">First Lorem ipsum dolor sit.</p><p class="firstclass">First Qui consequatur labore at.</p><p class="secondclass">Second Lorem ipsum dolor sit amet.</p> <p class="thirdclass">Third Lorem ipsum dolor sit amet.</p><p class="thirdclass">Third Molestias optio quasi ipsam unde!</p><p class="secondclass">Second Lorem ipsum dolor sit amet, consectetur.</p><p class="fourthclass">Fourth Lorem ipsum dolor sit.</p><p class="firstclass">First Lorem ipsum dolor sit amet.</p>', {
normalizeWhitespace: true,
xmlMode: true,
decodeEntities: false,
});
var myContent = $('p').each(function() {
var para = $(this).text();
return para;
});
var olClass = ['.firstclass', '.secondclass', '.thirdclass', '.fourthclass'];
function arrToOl(arr) {
var ol = $('<ol />'),
li = $('<li />');
for (var i = 0; i < arr.length; i++) {
if (Array.isArray(arr[i])) {
li.append(arrToOl(arr[i]));
} else {
li = $('<li />');
li.append($(arr[i]));
ol.append(li);
}
}
return $.html(ol);
}
console.dir(arrToOl(olClass));
The above code produces the following:
'<ol><li><p class="firstclass">First Lorem ipsum dolor sit.</p><p class="firstclass">First Qui consequatur labore at.</p><p class="firstclass">First Lorem ipsum dolor sit amet.</p></li><li><p class="secondclass">Second Lorem ipsum dolor sit amet.</p><p class="secondclass">Second Lorem ipsum dolor sit amet, consectetur.</p></li><li><p class="thirdclass">Third Lorem ipsum dolor sit amet.</p><p class="thirdclass">Third Molestias optio quasi ipsam unde!</p></li><li><p class="fourthclass">Fourth Lorem ipsum dolor sit.</p></li></ol>'
The desired result should be:
<ol>
<li>
<p class="firstclass">First Lorem ipsum dolor sit.</p>
</li>
<li>
<p class="firstclass">First Qui consequatur labore at.</p>
</li>
<li>
<p class="firstclass">First Lorem ipsum dolor sit amet.</p>
<ol>
<li>
<p class="secondclass">Second Lorem ipsum dolor sit amet.</p>
</li>
<li>
<p class="secondclass">Second Lorem ipsum dolor sit amet, consectetur.</p>
<ol>
<li>
<p class="thirdclass">Third Lorem ipsum dolor sit amet.</p>
</li>
<li>
<p class="thirdclass">Third Molestias optio quasi ipsam unde!</p>
<ol>
<li>
<p class="fourthclass">Fourth Lorem ipsum dolor sit.</p>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ol>
Your help is really appreciated.
Here's what I got.
let array = ["a", "b", "c", "d"];
var nested;
function create_nested()
{
var old_ol;
for (let i = 0; i < array.length; i++)
{
let new_ol = document.createElement("ol");
let new_li = document.createElement("li");
new_li.innerHTML = array[i];
new_ol.appendChild(new_li);
if (i !== 0)
{
let nest_li = document.createElement("li");
let new_p = document.createElement("p");
new_p.innerHTML = "new stuff";
nest_li.appendChild(new_p);
nest_li.appendChild(old_ol);
new_ol.appendChild(nest_li);
}
old_ol = new_ol;
nested = new_ol;
}
}
create_nested();
document.getElementById('main').appendChild( nested);
<div id='main'>
</div>
This is just an example and not exactly the data that you have (you can figure that out).
What's happening is that I'm creating new elements using document.createElement, after which I am inserting them into their corresponding ol/li using appendChild.
The most important part is the if (i !== 0) (Change this to suit whether you want to start from the beginning or end of your array). This is the part where I am creating the nests.
I am creating a new li, which has the <p> and the old_ol which is the nesting li. So what this function is doing, is creating the innermost ol, and expanding it upward.
There might be a clear/better way of doing this, but this is as far as I know in vanilla JS. I hope everything is clear enough.
I can't seem to figure out how to merge the two Video bullet points into one bullet point that contains the two drivers.
Collection Data
"drivers":[
{"title":"Nvidia Video Driver","category":"Video","version":"331.82","description":"Lorem ipsum dolor sit amet","filename":"nvidia.exe"},
{"title":"Intel Video Driver","category":"Video","version":"10.4.4740","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies.","filename":"intel.exe"},
{"title":"Realtek Audio","category":"Audio","version":"1.25.21","description":"consectetur adipiscing elit. Suspendisse ultricies.","filename":"audio.exe"},
{"title":"Storage controller","category":"chipset","version":"23.13.412","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.","filename":"chip.exe"}
]
deviceDetails.helpers
Template.deviceDetails.helpers({
deviceDrivers:function(drivers) {
var driverArray = drivers.sort(function(a, b) {
if (a.category.toLowerCase() < b.category.toLowerCase()) return -1;
if (a.category.toLowerCase() > b.category.toLowerCase()) return 1;
return 0;
});
console.log(driverArray);
return driverArray;
}
});
DeviceDetails.html
<ul>
{{#each deviceDrivers device.drivers}}
<li class="text-capitalize list-unstyled">{{category}}<ul>
<li>{{title}} -> {{version}}<br>
{{description}}
</li></ul>
</li>
{{/each}}
</ul>
Result
- Audio
- Realtek Audio -> 1.25.21
- Consectetur Adipiscing Elit. Suspendisse Ultricies.
- Chipset
- Storage Controller -> 23.13.412
- Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.
- Video
- Nvidia Video Driver -> 331.82
- Lorem Ipsum Dolor Sit Amet
- Video (!REMOVE! line)
- Intel Video Driver -> 10.4.4740
- Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit. Suspendisse Ultricies.
Desired Result
- Audio
- Realtek Audio -> 1.25.21
- Consectetur Adipiscing Elit. Suspendisse Ultricies.
- Chipset
- Storage Controller -> 23.13.412
- Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.
- Video
- Nvidia Video Driver -> 331.82
- Lorem Ipsum Dolor Sit Amet
- Intel Video Driver -> 10.4.4740
- Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit. Suspendisse Ultricies.
Update
I was able to get the desired result using Julien Answer.
deviceDrivers:function(drivers) {
var driverArray = drivers.reduce(function(result, driver){
var category = result.find(function(search){
return search.category === driver.category;
});
if(category){
category.drivers.push(driver);
} else {
result.push({
category:driver.category,
drivers: [driver]
});
}
return result
},[]).sort(function(a, b) {
if (a.category.toLowerCase() < b.category.toLowerCase()) return -1;
if (a.category.toLowerCase() > b.category.toLowerCase()) return 1;
return 0;
});
console.log(driverArray);
return driverArray;
}
Update 2
Christian Fritz Answer worked perfectly after his edit.
deviceDrivers:function(drivers) {
var test = _.map(
_.sortBy(
_.groupBy(drivers, 'category'), function(value, key) {
return key.toLowerCase();
}), function(value, key) {
return {category:value[0].category,drivers: value};
});
console.log(test);
return test;
}
You can use Array.prototype.reduce :
drivers.reduce(function(result, driver){
var category = result.find(function(search){
return search.category === driver.category;
});
if(category){
category.drivers.push(driver);
} else {
result.push({
category:driver.category,
drivers: [driver]
});
}
return result
},[]);
I've learned that from this tutorial series, the guy is brilliant and very funny.
This will give you an array looking like:
[
{
"category": "Video",
"drivers": [
{
"title": "Nvidia Video Driver",
// ...
},
{
"title": "Intel Video Driver",
// ... }
]
},
{
"category": "Audio",
"drivers": [
{
"title": "Realtek Audio",
// ... }
]
},
{
"category": "chipset",
"drivers": [
{
"title": "Storage controller",
// ...
}
]
}
]
And then in your template, you should try something like:
<ul>
{{#each deviceDrivers}}
<li class="text-capitalize list-unstyled">{{category}}
{{#each deviceDrivers}}
<ul>
<li>{{title}} -> {{version}}<br>
{{description}}
</li>
</ul>
{{/each}}
</li>
{{/each}}
</ul>
I would suggest pre-grouping:
JS:
Template.deviceDetails.helpers({
deviceDrivers:function(drivers) {
var driverGroups =
_.map(
_.sortBy(
_.groupBy(drivers, 'category'), function(value, key) {
return key.toLower();
}), function(value, key) {
return {key: key, value: value};
});
console.log(driverGroups);
return driverGroups;
}
});
HTML:
<ul>
{{#each deviceDrivers device.drivers}}
<li class="text-capitalize list-unstyled">{{key}}<ul>
{{#with value}}
<li>{{title}} -> {{version}}<br>
{{description}}
</li></ul>
{{/with}}
</li>
{{/each}}
</ul>
I am looking for a way to separately process the lines in a <div> that are wrapped due to a narrow width. That is, if my text is "Lorem ipsum dolor sit amet lorem \n ipsum dolor sit amet" and it is seen as below:
Lorem ipsum dolor
sit amet lorem
ipsum dolor sit
amet
Then I should be able to encapsulate each 'line' in a, say, <span> tag, such as:
<span id="line0">Lorem ipsum dolor<span>
<span id="line1">sit amet lorem</span>
... etc.
Edit: We can assume that the width and height of the div is fixed and known.
I couldn't find a proposed solution, if any exists; although there is a good suggestion for counting the lines for a fixed line-height: How to check for # of lines using jQuery
Starting with this:
<div class="narrow">Lorem ipsum dolor sit amet lorem ipsum dolor sit amet</div>
css:
.narrow {
width:60px;
}
Insert some placeholders where there are spaces:
$('.narrow').html($('.narrow').html().replace(/ /g,"<span class='count'> </span>"))
Determine the y-position of each placeholder:
$('.narrow .count') .each(function() {
var myPos = $(this).position()
alert(myPos.top)
})
From there you should be able to figure out where the start/end points of each line based on its y-position.