We Keep Coding

How to convert html tree in to a customized json tree using jquery?

<ul id='parent_of_all'>
<li>
<span class='operator'>&&</span>
<ul>
<li>
<span class='operator'>||</span>
<ul>
<li>
<span class='operator'>&&</span>
<ul>
<li>
<span class='condition'>1 == 1</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<span class='condition'>1 != 0</span>
</li>
</ul>
</li>
</ul>
to
{"&&":[{'||':[ {'&&':[ {"lhs": "1", "comparator": "==", "rhs":"1"} ]} ] } , {"lhs": "1", "comparator": "!=", "rhs":"0"}]}
As of now, I know the basics of jQuery, JavaScript. I need to know where to start thinking in order to accomplish the above conversion.
And the html tree could be more complex with more children.

You can do this with each and map
var obj = {}
var span = $('li > span').not('ul li span').text();
$('ul li span').each(function() {
var text = $(this).text().split(' ');
obj[span] = (obj[span]||[]).concat({lhs: text[0], comparator: text[1], rhs: text[2]});
});
console.log(obj)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
<span>&&</span>
<ul>
<li>
<span>1 == 1</span>
</li>
</ul>
<ul>
<li>
<span>1 != 0</span>
</li>
</ul>
</li>

You will need a way to select the first level of li, I assumed you have a parent element with an id such as list. I wrote the following code using basic jquery so you can understand it.
var result = {};
var $all_li = $('#list').children('li'); // selecting the first level of li
for(var i in $all_li){ // iterating all_li using for (you may use forEach )
var $current_li = $( $all_li[i] ); // getting operator from first span
var operator = $current_li.children('span').html(); // the text of the operator
var $inner_spans = $current_li.find('>ul >li >span'); // getting list of children spans (from path $list>li>ul>li>span)
var li_spans = []; // an array where we will put the inner span objects
for(var j in $inner_spans){ // iterating the inner spans
var text = $($inner_spans[j]).html().split(" "); // splitting the html
li_spans.push({
lhs: text[0],
comparator: text[1],
rhs: text[2]
}); // adding the splitted html to an object. Note: error if text didn't have 2 white spaces
}
result[operator] = li_spans; // adding the operator key and li_spans value to the result json
}
This code will parse the html and construct the result json, it should work for the html format you provided. Keep in mind that it does not handle errors (such as bad tree format).
simmiar html formats.

Thanks #Alexandru and #Nenad for giving a start. I have been able to complete this on my own.
Below is the function that generates json.
function prepare_json(current_node){
var object = {}
var span = $(current_node).children('span')
if (span.hasClass('condition')){
var text = span.html().split(" ");
object = {lhs: text[0], comparator: text[1], rhs: text[2]}
}
else if(span.hasClass('operator')){
var operator = span.text()
object[operator] = (object[operator] || [])
var children = $(current_node).children('ul').children('li')
for(var i = 0; i < children.length; i++){
var child_pql = prepare_json([children[i]])
object[operator].push(child_pql)
}
}
return object
}
Below is the code that calls that function:
var parent_node = $('#parent_of_all').children('li')
var json = JSON.stringify(prepare_pql_json(parent_node), null, 2)

Add entries from the top in to-do list angular

I have made this to-do list in angular but would like the posts entered to entered fro m the top instead the bottom.
my code:
HTML
<a href="{{url.title}}" class="link">
<p class="title">{{url.name}}</p>
<p class="url">{{url.title}}</p>
</a>
</div>
<div class="col-md-4 delete m-b-2">
<!--a href="javascript:" ng-click="edit($index)" type="button" class="btn btn-primary btn-sm">Edit</a-->
Delete
</div>
</div>
</li>
JS
var urlFire = angular.module("UrlFire", ["firebase"]);
function MainController($scope, $firebase) {
$scope.favUrls = $firebase(new Firebase('https://lllapp.firebaseio.com/'));
$scope.urls = [];
$scope.favUrls.$on('value', function() {
$scope.urls = [];
var mvs = $scope.favUrls.$getIndex();
for (var i = 0; i < mvs.length; i++) {
$scope.urls.push({
name: $scope.favUrls[mvs[i]].name,
title: $scope.favUrls[mvs[i]].title,
key: mvs[i]
});
};
});

You can use unshift() instead of push() when you add elements to your array. It adds the element at the beginning of your array instead of at the end, and since your angular view is based on the model it will add it on top.

Use $scope.urls.splice(index_to_insert,0, object); so in your case you could do
var obj = {
name: $scope.favUrls[mvs[i]].name,
title: $scope.favUrls[mvs[i]].title,
key: mvs[i]
};
$scope.urls.splice(0,0, obj);

How do I get all the LI UL elements ID value and place them in a JavaScript array?

I have to embed some tracking code on my site. So I have a list of LI elements with an ID value that I want to place inside an array of the snippet. They should be numeric like, 123, 456, etc inside an object. I want to do it in pure JavaScript.
This is my code I have tried. My HTML:
<ul id="itemGrid">
<li class="item" id="1080"> product code </li>
<li class="item" id="1487"> product code </li>
<li class="item" id="1488"> product code </li>
...
</ul>
This is the JavaScript code
// Get all LI items and get the ID of them in the object viewList
var catId = document.getElementById('itemGrid').getElementsByTagName('li');
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
// SHOULD BE LIKE THIS
// { event: "viewList", item: ["First item id", "Second item id", "Third item id"] }
// My actual code
{ event: "viewList", item: [ catId[].id ] }
);

try this
var lis = document.getElementById('itemGrid').getElementsByTagName('li');
var idArray = [];
for ( var counter = 0; counter < lis.length; counter++)
{
idArray.push( lis[ counter ].id );
}
console.log( idArray );

You can use querySelectorAll to select all the matching elements passed as selector.
The selector '#itemGrid li[id]' will select all the <li> elements inside #itemGrid element having id attribute on it.
The querySelectorAll returns a collection of HTML elements. Iterate over this collection to get the individual element id.
var lis = document.querySelectorAll('#itemGrid li[id]');
var arr = [];
for (var i = 0; i < lis.length; i++) {
arr.push(+lis[i].id);
}
console.log(arr);
document.write('<pre>' + JSON.stringify(arr, 0, 4) + '</pre>');
<ul id="itemGrid">
<li class="item" id="1080">1080</li>
<li class="item" id="1487">1487</li>
<li class="item" id="1488">1488</li>
</ul>
<hr />

You can convert your HTMLCollection to an Array by passing it through slice, and you can then map that array:
catId = Array.prototype.slice.call(catId).map(function(li) { return li.id; });
var catId = document.getElementById('itemGrid').getElementsByTagName('li');
catId = Array.prototype.slice.call(catId).map(function(li) { return li.id; });
document.write(catId);
<ul id="itemGrid">
<li class="item" id="1080"> product code </li>
<li class="item" id="1487"> product code </li>
<li class="item" id="1488"> product code </li>
</ul>

var lis = document.getElementById('itemGrid').getElementsByTagName('li');
var arr = [];
// You need to iterate the list lis
[].forEach.call( lis, function(el){
arr.push( el.id );
});
// Making the object you want
var criteo_q = { event: "viewList", item: arr };
console.log(criteo_q);
To iterate the list of DOM elements, you can also use

split string using angularjs

I'm trying to split a string pulled from a JSON array in angular. I've tried using the angular {{filter}} but not sure I'm on the right track. I want each tag in it's own link. ie <a ng-href="">tall</a> | <a ng-href="">large</a> etc...
<body ng-app="feedApp">
<div ng-controller="FeedController as feedCtrl">
<ul class="tags">
<li>Tags: </li>
<li>
<a ng-href="http://www.example.com/{{feed.tags|filter:' '}}" ng-repeat="feed in feedCtrl.feeds">{{feed.tags|filter:' '}} | </a>
</li>
</ul>
</div>
</body>
JS
var app = angular.module('feedApp', [ ]);
app.controller('FeedController', ['$http', '$scope',function($http, $scope){
var array = this;
array.feeds = [ ];
$http.get('tags.json').success(function(data){
array.feeds = data;
});
JSON
[
{
"tags": "tall large winner skill"
},
{
"tags": "short knowledge"
},
]
I have a PLUNKER that shows the code above - thanks

I suggest you to manipulate the data read from tags.json producing a simple array with a tag for each element. To do so, you can use simple JavaScript code:
$http.get('tags.json').success(function(data) {
var splittedTags = data.map(function(e) {
return e.tags.split(' ');
});
array.feeds = splittedTags.reduce(function(a, b) {
return a.concat(b);
});
});
First I use Array.prototype.map() to extract from every object inside data the value of tags attribute and split it. This produce an array of array. I use the Array.prototype.reduce() to flatten the array and produce and array with the single tags.
Then, in the HTML page I remove the Angular.js filter and use directly the feed value:
<li>
<a ng-href="http://www.example.com/{{feed}}" ng-repeat="feed in feedCtrl.feeds">{{feed}} | </a>
</li>
Here you can find the PLUNKER with the code.

Here is how you can do it.
First you need to split the string by defining the delimiter (in your case is space). You then assign it to your scope:
var app = angular.module('feedApp', []);
app.controller('FeedController', ['$http', '$scope',function($http, $scope){
var array = this;
array.feeds = [ ];
var strings = [];
$http.get('tags.json').success(function(data){
data.map(function(elem) {
strings.push(elem.tags.split(' '));
});
array.feeds = strings;
});
}]);
If you are done with this in your template you can iterate over your array with ng-repeat recursively:
<body ng-controller="FeedController as feedCtrl">
<ul class="tags">
<li>Tags: </li>
<li>
<div ng-repeat="feeds in feedCtrl.feeds">
<div class="link" ng-repeat="(key, value) in feeds">
<a ng-href="http://www.example.com/{{value}}" >{{value}} | </a>
</div>
</div>
</li>
</ul>
</body>
Here is the working plunkr.

Group Data and Display in Accordion using AngularJs and MVC

I am NEW to MVC as well as AngularJs and have been toiling over this for days. Although I feel that I am getting closer....still no cigar.
The problem: I have a list of reports that are grouped on the report type(name). I am trying to use an accordion to show and hide the list of reports in each group.
My controller.js looks like this (I know that it is wrong):
window.app.controller('relatedReportsController', ['$scope', '$timeout', 'relatedReportsService',
function ($scope, $timeout, relatedReportService) {
initialize();
function initialize()
{
$scope.relatedReports = [];
$scope.rollupVisible = false;
}
function sortOn(collection, name)
{
collection.sort(
function (a, b) {
if (a[name] <= b[name]) {
return (-1);
}
return (1);
});
}
$scope.groupBy = function (attribute) {
$scope.Groups = [];
sortOn($scope.relatedReports, attribute);
for (var i=0; i< $scope.relatedReports.length; i++)
{
var report = $scope.relatedReports[i];
}
}
$scope.toggleRollup = function($event)
{
if (angular.element($event.targe).hasClass('glyph')) return;
relatedReportService.$promise.then(function (data) {
$scope.relatedReports = data;
})
}
}]);
My page looks like this:
<li class="fruitRollup header row" ng-controller="relatedReportsController">
<div class="suitcaseheader">
<span class="col-xs-10 zero firstlabel">{{group.Name}}</span>
<span class="col-xs-3 zero datepad">Date</span>
<span class="floatR2">View</span>
<span class="clear"></span>
</div>
<div class="eaten">
<ul class="data">
#*#foreach (var reportResult in resultGroup.OrderByDescending(r=>r.Date))
{*#
<li class="data row" ng-repeat="report in group.reports" ng-controller="relatedReportsController">
<div class="suitcase">
<span class="col-xs-10 zero accountNumberColumn"></span>
#*<span class="middle zero">#reportResult.Date.Replace("12:00:00","")</span>*#
<span class="middle zero">{{report.Date}}</span>
<span class="floatR2">
<a class="icon-view glyph" target="_blank" href="#Url.ActionEncodedParameters("ViewDocument", "DocumentSearch", new { id = reportResult.Id })"></a>
</span>
<span class="clear"></span>
</div>
As you can see I need a lot of help. Thanks in advance!

The code that I had written in the controller.js was not properly getting the data. In trying to use a combination of samples that I found on the internet, I was thoroughly confused. I figured this out yesterday. I didn't need to get the data through the controller.js because the data was already being fetched through my page controller.cs and viewmodel. All I ended up needing was to use ng-show to show and hide the sections.
Thanks for taking the time to try to help.