How to Iterate over a hash in mustache.js - javascript

Given this hash
a = {
foo : { ... },
bar : { ... },
zap : { ... }
}
i want to iterate over it but since the keys are different I am not sure how to in Mustache.js
the output will look something like this foo : (contents here)

If you know the key in the nested object that you're trying to retrieve, you can use a function.
see: http://jsfiddle.net/jimschubert/zPWDJ/
js:
$(function() {
var names = {
"a": [
{"foo": { "name": "foo name"}},
{"bar": { "name": "bar name"}},
{"zap": { "name": "zap name"}}
],
"n": function() {
var self = this;
var n = "";
Object.keys(self).forEach(function(k, v) {
if (typeof self[k] == "object") {
if(!n) n = self[k]["name"];
}
});
return n;
}
};
var template = $('#template').html();
var out = $('#output');
var html = Mustache.to_html(template, names);
console.log(html);
out.html(html);
});​
html:
<script id="template" class="template" type="text/x-mustache">
{{#a}}
<p>{{n}}</p>
{{/a}}
</script>
<h1>Output</h1>
<div id="output">
</div>
​
This of course assumes your data is an array of objects (the a in your post would be one key of a greater array, maybe?) If you don't have an array, I don't see why you wouldn't be able to adjust this for an object and make a getter function for whatever properties of each key you're looking for.

Related

Extract values from JSON

I have the below JSON string. The id-dashes in the file are not optional unfortunately, neither is the syntax. I would like to extract the "dd" values with JavaScript/Node.
{
"a-id":{
"b-id":"random",
"bb-id":"random",
"bbb-id":"random",
"bbbb-id":{
"c":[
{
"d":"random",
"dd":"This_info_is_needed"
},
{
"d":"random",
"dd":"This_info_is_needed"
},
{
"d":"random",
"dd":"This_info_is_needed"
},
{
"d":"random",
"dd":"This_info_is_needed_2"
}
]
},
"bbbbb-id":"random",
"bbbbbb-id":"random"
}
}
I would be open to use any additional helper like lodash, jQuery, etc.
The output should be an array with: This_info_is_needed and This_info_is_needed_2.
Thank you in advance.
You can create custom function that will search your data deep and return value if key is dd using for...in loop.
var obj = {"a-id":{"b-id":"random","bb-id":"random","bbb-id":"random","bbbb-id":{"c":[{"d":"random","dd":"This_info_is_needed"},{"d":"random","dd":"This_info_is_needed"},{"d":"random","dd":"This_info_is_needed"},{"d":"random","dd":"This_info_is_needed"}]},"bbbbb-id":"random","bbbbbb-id":"random"}}
function getDD(data) {
var result = []
for(var i in data) {
if(i == 'dd') result.push(data[i])
if(typeof data[i] == 'object') result.push(...getDD(data[i]))
}
return result
}
console.log(getDD(obj))
If you just interested in the values only, can also just do this:
var obj = {"a-id":{"b-id":"random","bb-id":"random","bbb-id":"random","bbbb-id":{"c":[{"d":"random","dd":"This_info_is_needed"},{"d":"random","dd":"This_info_is_needed"},{"d":"random","dd":"This_info_is_needed"},{"d":"random","dd":"This_info_is_needed"}]},"bbbbb-id":"random","bbbbbb-id":"random"}};
var desiredResults = obj['a-id']['bbbb-id']['c'].map(function(data){return data.dd});
console.log(desiredResults);

Dynamic values into objects in javascript

I have the following code with more values, showing only 3 to give you an idea
var people = {
'Jon':{
age:65,
height:185,
marriage:true
},
'Mary':{
age:18,
height:170,
marriage:false
},
'Carol':{
age:45,
height:165,
marriage:true
}
};
Because now I get all the values dynamically from the server, I would like to replicate the object to get the dynamic values from the <a> tag instead listing all of them above.
<a data-name='${person.name}' data-age="${person.age}" data-height="${person.height}" data-marriage="${person.isMarried}" href='/#'>
<script>
var personName = $('a').data('name');
var personAge = $('a').data('age');
var personHeight = $('a').data('height');
var isMarried = $('a').data('marriage');
</script>
I am trying something like this, but it doesn't seem to work, do i need to create a loop, not really sure
var people = {
personName:{
age:personAge,
height:personHeight,
marriage:isMarried
}
};
Any help will be appreciated
Thanks
Yes. You will need a loop (or equivalent). Here is a simple working approach.
var people = {};
$('a').each(function(){
var a = $(this);
people[a.data('name')] = {
age: a.data('age'),
height: a.data('height'),
marriage: a.data('marriage')
}
});
document.body.innerHTML += JSON.stringify(people, null, 2);
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<a data-name='Jon' data-age="65" data-height="185" data-marriage="true" href='/#'></a>
<a data-name='Mary' data-age="age" data-height="170" data-marriage="false" href='/#'></a>
<a data-name='Carol' data-age="45" data-height="165" data-marriage="true" href='/#'></a>
If you didn't want to use jQuery, here's a simple vanilla way of doing it, making sure that the data types are what you require in your output.
var anchors = [].slice.call(document.getElementsByTagName('a'));
var people = {};
anchors.forEach(function (el) {
people[el.getAttribute('data-name')] = {
age: +el.getAttribute('data-age'),
height: +el.getAttribute('data-height'),
marriage: el.getAttribute('data-marriage') === 'false' ? false : true
};
});
people output
{
"Jon": {
"age": 65,
"height": 185,
"marriage": false
},
"Mary": {
"age": 18,
"height": 170,
"marriage": false
},
"Carol": {
"age": 40,
"height": 165,
"marriage": true
}
}
DEMO
You need to create a loop, but it's better if the server that returns this kind of object return an array.
This code will do what you want.
var peopleArray=[];
for (var i in people) {
if(people.hasOwnProperty(i) {
var currentPeople = people[i];
currentPeople.name = i;
peopleArray.push(currentPeople);
})
}
This code create an array of people like this :
[
{
name:'Jon',
age:65,
height:185,
marriage:true
},
{
...
}
]
It seems you want to create an object by reading the data-* attributes of the a elements. If this is the case one option is:
var people = {};
$('a').each(function() {
var data = $(this).data(), name = data.name;
delete data.name;
people[name] = data;
});
If you want to create an array of objects you can use the $.prototype.map method:
var people = $('a').map(function() { return $(this).data() }).get();
// [{
// "name": "${person.name}",
// "age": "${person.age}",
// "height": "${person.height}",
// "marriage": "${person.isMarried}"
// }]

Json Filtering in jquery

Hello i want to filter json data like sql query without the help of plugins like alasql.js or linq.js or any plugins.
for example
{
"Managing PCL": [
{
"idItScreen": "1436",
"topicName": "Managing PCL",
"isFav": 0,
"cdeItScreen": "ListActiveTarif",
"busScreenName": "My Current Tarif"
},
{
"idItScreen": "1437",
"topicName": "Managing PCL",
"isFav": 0,
"cdeItScreen": "ListTermineTarif",
"busScreenName": "History Tarif"
}
]
}
for example i need to get data where idItScreen>1430 so that json data must be displayed the main challenge is to do without plugins so please reccomend me a good solution to do this without plugins
First turn your JSON into a Javascript object:
var obj = JSON.parse(myJSON);
Then do your filtering:
var matches = [];
var arr = obj['Managing PCL'];
for (var i = 0; i < arr.length; i++) {
if (arr[i].idItScreen > 1430) {
matches.push(arr[i]);
}
}
Or using jQuery.grep:
var matches = jQuery.grep(obj['Managing PCL'], function(n, i) {
return n.idItScreen > 1430;
});
Now matches contains the matching items.
If you want to get the JSON again, just use JSON.stringify:
var filteredJSON = JSON.stringify({'Managing PCL': matches});
You can also simply use .filter:
var matches = [];
var all = obj['Managing PCL'];
var filtered = all.filter(function(){
return $(this).idItScreen > 1430;
})
You don't need to use jQuery for this. You can use the filter() method of Array.prototype. See the working snippet below:
var obj = {
"Managing PCL": [{
"idItScreen": "1436",
"topicName": "Managing PCL",
"isFav": 0,
"cdeItScreen": "ListActiveTarif",
"busScreenName": "My Current Tarif"
}, {
"idItScreen": "1437",
"topicName": "Managing PCL",
"isFav": 0,
"cdeItScreen": "ListTermineTarif",
"busScreenName": "History Tarif"
}]
};
var filteredArray = obj['Managing PCL'].filter(function(item) {
return item.idItScreen > 1430;
});
obj['Managing PCL'] = filteredArray;
document.getElementById('result').innerHTML = JSON.stringify(obj);
<div id="result"></div>
You don't need jQuery for this. Use filter on the data instead.
function filterData(data, key, value) {
return data.filter(function (el) {
return el[key] > value;
});
}
// Note, `filter` operates on arrays, so you need to specify the
// array that contains the data
var result = filterData(data['Managing PCL'], 'idItScreen', '1430');
Also note that filter returns a new array containing the objects that it's found that match your criteria. You can access those objects in the usual way: result[0], for example.
DEMO
You could even expand this to create a function that returns data based on the operator too, not just greater-than, by using a look-up object:
var lookup = {
'>': function (data, value) { return data > value; },
'<': function (data, value) { return data < value; },
'===': function (data, value) { return data === value; }
}
function filterData(data, key, operator, value) {
return data.filter(function (el) {
return lookup[operator](el[key], value);
});
}
filterData(data['Managing PCL'], 'idItScreen', '>', '1430');
filterData(data['Managing PCL'], 'idItScreen', '===', '1430');
DEMO

Arrays in javascript with jquery

I want to create an array with would hold all option element values and html text. And in a result I would like something like this:
console.log( myArray );
output:
[ "htmlText" : '0', "htmlText2" : '1', ... ]
if this is possible, how can I access them and get their keys?
or at least 2dim array
How Can I do that?
this is what I have now:
function optionValues( selectEl )
{
var values = [];
if ( selectEl.length )
{
$(selectEl).find('option').each( function(){
values.push( $(this).val() );
});
return values;
}
else
return false;
}
function optionHtmls( selectEl )
{
var html = [];
if ( selectEl.length )
{
$(selectEl).find('option').each( function(){
html.push( $(this).html() );
});
return html;
}
else
return false;
}
The function can be simplified:
function optionValues(selectEl) {
var options = {};
$(selectEl).find('option').each(function() {
options[this.label] = this.value;
});
return options;
}
console.log(optionValues('select')) // {Text 1: "1", Text 2: "2", Text 3: "3"}
Demo: http://jsfiddle.net/c5e3vemo/
Use {} instead of [] to make an associative array.
var values = {
htmlText: 0,
htmlText2: 1,
};
console.log(values['htmlText']);
To append things to an associative array (also referred to as an object):
values['stuff'] = 'foo';
values['thing'] = 'bar';
To loop over this:
for (var key in values) {
/* check to make sure it's actually a valid key */
if (values.hasOwnProperty(key)) {
console.log(key + " => " + values[key]);
}
}
An object would suit your needs best in this case. You can use map() to create one from the option elements in any given select. Try this:
var values = $('#mySelect option').map(function() {
var obj = {};
obj[$(this).text()] = $(this).val();
return obj;
});
Example fiddle
Given this HTML:
<select id="mySelect">
<option value="1">Foo</option>
<option value="2">Bar</option>
</select>
The returned object would look like this:
[
{ "Foo": "1" },
{ "Bar": "2" }
]

how to get distinct values from json in jquery

I've got a jquery json request and in that json data I want to be able to sort by unique values. so I have
{
"people": [{
"pbid": "626",
"birthDate": "1976-02-06",
"name": 'name'
}, {
"pbid": "648",
"birthDate": "1987-05-22",
"name": 'name'
}, .....
So, far, i have this
function(data) {
$.each(data.people, function(i, person) {
alert(person.birthDate);
})
}
but, I am at a total loss as to how efficiently get only the unique birthDates, and sort them by year (or any sort by any other personal data).
I'm trying to do this, and be efficient about it (i'm hoping that is possible).
Thanks
I'm not sure how performant this will be, but basically I'm using an object as a key/value dictionary. I haven't tested this, but this should be sorted in the loop.
function(data) {
var birthDates = {};
var param = "birthDate"
$.each(data.people, function() {
if (!birthDates[this[param]])
birthDates[this[param]] = [];
birthDates[this[param]].push(this);
});
for(var d in birthDates) {
// add d to array here
// or do something with d
// birthDates[d] is the array of people
}
}
function(data){
var arr = new Array();
$.each(data.people, function(i, person){
if (jQuery.inArray(person.birthDate, arr) === -1) {
alert(person.birthDate);
arr.push(person.birthDate);
}
});
}
Here's my take:
function getUniqueBirthdays(data){
var birthdays = [];
$.each(data.people, function(){
if ($.inArray(this.birthDate,birthdays) === -1) {
birthdays.push(this.birthDate);
}
});
return birthdays.sort();
}

Categories