I have a working JS Render template that pulls in a different JSON file based on the values of a query string. I am trying to figure out how to change the value of the JS Render element (id_1) based off of the query string field "source".
So if my url ends with "?market=ab&source=index", I want
"{{:id_1}}" to display "index_id_1" from the ab.JSON file.
HTML
<script type="text/x-jsrender" id="logoTempl">
<div id="cta-div">
Button
</div>
</script>
<div class="mainContainer">
</div>
JSON
[{"assets" : {
"field1" : "value",
"field2" : "value"
},
"ids" : {
"index": {
"id_1": "index_id_1",
"id_2": "index_id_2",
"id_3": "index_id_3"
},
"email": {
"id_1": "email_id_1",
"id_2": "email_id_2",
"id_3": "email_id_3"
}
}
}
]
JS
if (market == 'ab' && source == 'index') {
$.getJSON('data/ab.json', function(data) {
var logoField = logo.render(data);
var id1 = data[0].ids.index.id_1
$(".mainContainer").html(logoField);
$("{{:id_1}}").html(id1);
})
}
If I understand correctly you want the template to show the value ids[source].id_1.
You can pass in source as a helper, e.g.
...logo.render(data, {idgroup: source});
and then in the template, write:
{{:ids[~idgroup].id_1}}
or you can create a getId helper function, e.g.:
...logo.render(data, {getId: function(index) {
return data[index].ids[source];
}});
and then in the template, write:
{{:~getId(#index).id_1}}
Related
I am trying to use mustache and jQuery to import a JSON and create a html template.
I have followed tutorials to get to this point, but nothing shows in the browser and there are no error messages.
HTML
div id="repeatcontent"/div
Script: I import mustache, greate the template script and then use javascript to import the JSON.
<script src=mustache.min.js></script>
<script id="tutorials" type="text/template">
{{#a_tutorials}}
<p>{{title}}<p/>
{{/a_tutorials}}
</script>
<script type="text/javascript">
$(document).ready(function(){
$.getJSON('audacity_tutorials.JSON', function(data) {
var template1 = $('#tutorials').html();
var html = Mustache.to_html(template1, data);
$('#repeatcontent').html(html);
});
});
</script>
JSON
{
"A_tutorials" : [
{
"Title" : "Binary",
},
{
"Title" : "Clipping",
}
]
}
There are no error messages, and the screen is completely blank. I have also used console.log to try and figure it out but it returns all the data I ask it for.
Your mistakes are:
A_tutorials in json file while you use a_tutorials in js
Title in json file while you use title
your json file is incorrect. For instance this line
"Title" : "Binary",
must be changed with:
"Title" : "Binary"
You may test json online by yourself.
Mustache is case sensitive.
// $.getJSON('z.json', function(data) {
var data = {
"A_tutorials" : [
{
"Title" : "Binary"
},
{
"Title" : "Clipping"
}
]
};
var template1 = $('#tutorials').html();
var html = Mustache.to_html(template1, data);
$('#repeatcontent').html(html);
// });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<script id="tutorials" type="text/template">
{{#A_tutorials}}
<p>{{Title}}<p/>
{{/A_tutorials}}
</script>
<div id="repeatcontent"></div>
I have a JSON object containing names of dropdown and looks something like this -
$scope.obj = {
"dp1" :{},
"dp2" :{}
}
Objects dp1 and dp2 correspond to respective dropdowns. These objects will be referred by dropdown to populate their options tag.
Next I have a REST call function like this -
$scope.getData = function(category, type) {
var params = { "dp1" : category, "dp1__type": type};
PromiseService.getPromiseData("GET", "/api/get_data/?" + $httpParamSerializer(params)).then(function(response) {
$scope.obj.dp1= response;
});
}
I am able to assign the response to $scope.obj.dp1 The reponse object looks like this-
{ "id" : 1, "name" : "john" }
Finally, my dropdown looks like this -
<select id="d1" ng-model="d1">
<option ng-repeat="opt in obj.dp1" t>{{opt.id}}_{{opt.name}}</option>
</select>
I want to populate the obj JSON object based on response, which I able to. Then I want to go to sub object in obj and apply ng-repeat on that to populate the options tag.
Current implementation of ng-repeat gives me undefined undefined .
try this-
$scope.obj = {
"dropdown1" :{id:"dp2", data:"", options:[]},
"dropdown2":{id:"dp1", data:"", options:[]}
}
$scope.getData = function(category, type){
var params = { "dp1" : category, "dp1__type": type};
PromiseService.getPromiseData("GET", "/api/get_data/?" + $httpParamSerializer(params)).then(function(response){
$scope.obj.dropdown1.options = response;
});
}
html page -
<div ng-repeat="dropdown in obj">
<select id="{{dropdown.id}}" ng-model="dropdown.data" ng-options="option.name for option in dropdown.options">
</div>
Hi everyone i have an issue i want to make an autocomplete in jQuery and i have an json file in the same folder here is the code
var auto = $(function() {
$("#recherche").autocomplete({
source: "code.json",
minLength: 1,
})
});
and here is a sample of the json file :
{
"__type": "Featsee",
"feat": [
{
"id": {
"ID_THING": 1111
},
"properties": {
"CODTHING": "405136",
"TIONNEMENT": "VRAC"
}
}
]
}
the html code is the following :
<label for="tags" >Recherche lot : <input id="recherche" type="text" class="searchable" placeholder="rechercher ici"/></label>
the plugin is the following :
<script src="libs/jquery/js/jquery-2.1.1.min.js"></script>
<script src="libs/jquery/js/jquery-ui.js"></script>
the json file is correct but i want the autocomplete to be jus for CODTHING do you see how can i do that ??
and CODTHING is the code a want it to be the autocomplete
The JSON you provide to jQuery UI's autocomplete needs to be an array of objects with label and value properties or an array of strings.
http://api.jqueryui.com/autocomplete/#option-source
The rest of the answer I can only guess due to the brevity of the JSON you gave us.
If lots.json is just a plain JS file you can look through the `feat" array in your JSON data and return strings based on that.
(function($){
var lots = $.get('lots.json');
lots.done(function (results) {
var data = $.map(results.feat, function (lot) {
return lot.properties.CODTHING;
});
$("#recherche").autocomplete({
source: data
});
});
}(jQuery));
If lots.json is really a server side file that you can feed some data to and filter it there you can use a function like documented on this answer:
JQuery autocomplete source from another js function
What I want is simple but I don't know if it's possible.
I have a Kendo Mobile ListView as below:
e.view.element.find("#list-serviceorders").kendoMobileListView({
dataSource: ds,
pullToRefresh: true,
template: $("#list-serviceorders-template").html()
});
And I want to send to the template some values to access on it. My view with the template is this:
<div data-role="view" data-before-show="GAPCP.viewBeforeShow" id="serviceorders" data-layout="main-item-list">
<ul id="list-serviceorders"></ul>
</div>
<script id="list-serviceorders-template" type="text/x-kendo-template" data-teste="teste">
<a href="views/entries.html?id=#: CodOs #">OS: #: CodOs #<br />
#: parameter.Divi1 #: #: CodDivi1 #/#: parameter.Divi2 #: #: CodDivi2 #</a>
</script>
Where you can read parameter.Divi1 and parameter.Divi2 are the places where I want to display those values. They're are not in the Data Source like the others values.
I don't want to create global variable 'cause I don't want to mess with my code and I can't use a function for that purpose because those values come from the database and it will execute a query for each list item iteration.
Any suggestion of how do that?
What I'm proposing is adding this information to the model in the controller. You can do it in DataSource.schema.parse or in requestEnd, even in a dataBound event if the widget accepts it.
When the data is received you iterate through the model and fills the remaining data not received from the server.
Example: Using parse
var ds = new kendo.data.DataSource({
transport: {
read: {
url : ...
}
},
schema : {
model: {
CodOs : { type: "number" },
CodDivi1: { type: "string" },
CodDivi2: { type: "string" }
},
parse: function (data) {
$.each(data, function (idx, elem) {
// Extend original elem
elem.parameter = {
Divi1: elem.CodDivi1.toUpperCase(),
Divi2: elem.CodDivi2.toLowerCase()
}
});
return data;
}
}
});
Where I compute parameter inside the parse function and set parameter.Divi1 to CodDivi1 in upper-case and parameter.Divi2 to CodDivi2 in lowercase.
I am getting stacked with inserting the content returned by an ajax call.
I have a set of divs, each div has a different id example:
<div id ="first_name"> content </div>
<div id ="last_name"> content </div>
<div id ="email"> content </div>
on the other hand I have an object with key => value example:
{"first_name" : "value", "last_name" : "value", "email" : "value"}
the keys of the object match the div's ids.
how can I on $(document).ready() search for the matching ids and object keysand put their values in jquery?
Original answer:
for(val in entries) {
if(entries.hasOwnProperty(val)) {
$("#"+val).html(entries[val]);
}
}
Edited to address question in comments:
You want this to happen automatically? When you receive new data from an ajax call?
$.getJSON(url, function(entries) {
for(val in entries) {
if(entries.hasOwnProperty(val)) {
$("#"+val).html(entries[val]);
}
}
}
for(key in myObject) {
$('#' + key).html(object[key]);
}
You can set the content of a DIV using .html();
For example:
$("#first_name").html('Thomas');
or using your object depending on how you're hydrating the JSON.
$("#first_name").html(yourobject.first_name);