Replace static json data in handlebars - javascript

I'm doing some maintenance on a project I haven't worked with before that uses .hbs files for templating and a static json file for initial data. The javascript appears to be vanilla (no backbone.js, Angular, etc.)
Is there a "correct" way of overwriting the data in that file after I get a JSON object from a REST call AFTER the page loads?
This is what is in the .hbs file:
{{> dropdown-module platform-demos.registerDemoType }}
This is what is in the static JSON file:
"registerDemoType": {
"label": "Demo Type",
"placeholder": "Choose Demo",
"inverted": "inverted",
"id": "demoId",
"items": [{
"option": "Basic Demo",
"optionValue": "basic-demo-dp"
}, {
"option": "Intermediate Demo",
"optionValue": "intermediate-demo-dp"
}, {
"option": "Advanced Demo",
"optionValue": "advanced-demo-dp"
}]
}
And then my REST call pulls back data similar to that:
"demoTypes": [{
"option": "New Demo 1",
"optionValue": "basic-demo-dp"
}, {
"option": "New Demo 2",
"optionValue": "intermediate-demo-dp"
}, {
"option": "New Demo 3",
"optionValue": "advanced-demo-dp"
}]
Is there a "correct" way of replacing the static data with the REST call data?

I feel like you have a fundamental misunderstanding of how handlebars works. Handlebars does not have any form of data binding built into it so you cannot simply change the values that were passed in and have the rendered HTML change automatically.
Instead, when your REST call is complete, you will have to update the object you are passing into your template as Hoyen suggested
registerDemoType.items = demoTypes;
And then you have to re-render this handlebars template, passing in registerDemoType as your data.
In short: You cannot access the hbs data after it has been rendered, you must re-render.

If you just want to replace it. Then all you should really need to do is something like this after the REST call responds:
registerDemoType.items = demoTypes;

Related

Editing JSON file at multiple positions without rewriting complete file

I have a JSON file that contains lots of nodes. Each node has a unique id. The following is an example skeleton structure of the JSON file.
{
"node1": {
"id": "1",
"name": "student",
"properties": {
"name": "Ram",
"lastname": "Kumar",
"age": "20"
}
},
"node2": {
"id": "2",
"name": "Teacher",
"properties": {
"name": "Ram",
"subject": "Computers"
}
}
Now, this was just sample data. Suppose, I have to find node 2, provided I have the position of the node in the file. That is it's beginning and the end. I create a read stream from the start position and the end position of the file to get the object within the complete JSON object in the file. Now, using JSON.parse function I am able to create an object within the program after parsing it.
But, now I use a writestream to make the changes in the object at the required positions after computing them.
For example, I have to edit the subject property of the teacher, and the main rule is I cannot completely write the object again. Rather, create a writestream at the position where there is subject property and just edit that value.
So, the question is how to do so? And that to with multiple positions to edit, that is editing multiple properties, without rewriting them all.
I know I might face an issue if I use multi-threading for this to simultaneously edit the multiple properties at once, but I need a work around that too.

HTMLized API data

I have a web app that accesses data from an API. I need to pull data out, but it's been 'HTMLized' and I'm unsure how to go about rendering the actual data.
I've tried pulling the data from the array using bracket notation, which gives me the data but it includes the HTML tags.
javascript
{
"id": "5c9cd6576ebf251b944ed16d",
"number": 3451,
"user_id": "5b8425c8e694aa3c6a835b67",
"state": "active",
"subject": "Bower Steel 3D",
"label_ids": [
"5c4b0cf4bbddbd48cd69e68a"
],
"customer_id": "5b51be9ee694aa03f8c834be",
"type": "email",
"reply_to": "xxxxxxx.xxxxxx#xxxxxxx.com",
"reply_cc": "",
"group_id": "5a5f65fed5593070120b9779",
"inbox_id": "5a5f65fed5593070120b9779",
"updated_at": "2019-04-03T12:46:50Z",
"created_at": "2019-03-28T14:12:39Z",
"spam": false,
"trash": false,
"summary": "Great! Glad to hear it.",
"rating": null,
"waiting_since": "2019-04-03T12:21:43Z",
"messages": [
{
"id": "5c9cd6576ebf251b944ed16e",
"type": "reply",
"from_name": "Cxxxxxxx Sxxxxxx",
"body": "<div class=\"5cb74b836ebf2578174d567c\">
<style>cb74b836ebf2578174d567c
p.5cb74b836ebf2578174d567cMsoNormal,
</style>\n\n\n
<div class=\"5cb74b836ebf2578174d567cWordSection1\">\n
<p class=\"5cb74b836ebf2578174d567cMsoNormal\">
Actual content I want to render
</p>
<p class=\"5cb74b836ebf2578174d567cMsoNormal\"></p>\n
<p class=\"5cb74b836ebf2578174d567cMsoNormal\"></p>\n
<p class=\"5cb74b836ebf2578174d567cMsoNormal\"></p>
The content I want to render is embedded like this. It's basically an array within the object, called messages, and it contains a message trail - from the 1st message to the last reply.
I've never come across HTMLized data like this. I can get to the data by using bracket notation, but I don't know how to parse the extraneous tags and get to the data.
Any help would be appreciated.
Short of having the API produce a better endpoint for you to consume, you will have to handle the 'HTMLized' data. In cases like this, I have used something to parse the HTML. For example you could throw the body string into the jQuery constructor.
jQuery(messages[i].body)
That will give you something digestible programmatically to search for your data.

Framework7 pass object as params between pages

How can I send an array object between pages in Framework7? I can send variable values but cannot understand how to send objects?
I have an array object like this
"phoneNumbers": [{
"number": "(555) 564-8583",
"normalizedNumber": "(555) 564-8583",
"type": "MOBILE"
}, {
"number": "(415) 555-3695",
"normalizedNumber": "(415) 555-3695",
"type": "OTHER"
}]
In route.js
{
path: '/contact/:id/:phoneNumbers/',
componentUrl: './pages/contact.html',
},
index.html
contact.html
<p>{{this.$route.params.id}}</p>
<p>{{js 'return JSON.stringify(this.$route.params.phoneNumbers)'}}</p>
In contact.html it doesnt show the array object, instead it returns this
"1"
"[object Object],[object Object]"
I want to know if it is possible to send objects using Framework7's router?
Alternate approach I took was using localStorage, but is there a way in Framework7 to send objects between pages and not only variables?
It depends on the specifics of your use case but usually I make the data I want to pass global to the app by placing it in the javascript window object. It will be available to your code on the subsequent page(s) the user enters. It's more efficient than using localstorage.
window.phoneNumbers = [{
"number": "(555) 564-8583",
"normalizedNumber": "(555) 564-8583",
"type": "MOBILE"
}, {
"number": "(415) 555-3695",
"normalizedNumber": "(415) 555-3695",
"type": "OTHER"
}]

Angularjs: 'SyntaxError: Unexpected token , ' when loading object

I'm trying to use Symphony CMS to output its XSL as JSON, for use in the angular phonecat app example from the tutorial. My list view json is output as an array with [{ }] brackets around it. My detail view json is output with only { } around it:
{
"position": 1,
"order": 3,
"total": "1",
"id": "sunt",
"sym_id": "21",
"cat": "back-end",
"imageUrl": "http://localhost:8080/workspace/images/phones/Nondell-streak-7.0.jpg",
"name": "Sunt",
"done": "No",
"priority": "medium",
"date-created" : "18 November 2015",
"date-modified" : "19/11/15 10:41am",
"date-due" : "18/11/15 2:13pm",
"snippet": "Quam nihil molestiae"
}
When loading my page the list view loads. When I click on an item the detail view tries to load but I get: SyntaxError: Unexpected token ,. Why? The syntax seems normal to me?
A big problem I am struggling with is that my json is created dynamically with the CMS but no actual files are on the server as far as I know.
Before I was getting the error: Error in resource configuration for action get. Expected response to contain an object but got an array so I made some changes so the list is output as an array, and the single views are output as an object.
My json is generated on localhost:8080/json/{parameter}. The param is 'todos' when not set. So my list view is situated at localhost:8080/json/todos. The param takes the selected object's name, so my detail view would be at localhost:8080/json/foo when I press the link generated by angular.
I hope my question is complete and makes sense :D

jquery ajax autocomplete search, How can i make tag autocomplete search with jquery?

Suppose there are tags in the database table, or in a text file or in a xml file.
Now when an user type something in the textbox, it will call the jquery ajax autocomplete searching function like we do for stackoverflow tags adding.
How can i do this with jquery ajax? Can someone post complete code with example?
I have read this, http://docs.jquery.com/Plugins/Autocomplete, but could not understand how to implement that.
I would recommend you using the jQuery UI AutoComplete. The documentation provides a full example of how to set it up with AJAX.
You put an input field:
<input id="tags" name="tags" />
and then apply the plugin:
$(function() {
$('#tags').autocomplete({
source: '/tags',
minLength: 2
});
});
This will invoke the /tags server side script and pass it the term query string parameter that will contain the input value. For example: /tags?term=asp. The server will then use the asp value to look in the database and respond with a JSON of the following form:
[ { "id": "1", "label": "label 1", "value": "value 1" },
{ "id": "2", "label": "label 2", "value": "value 2" },
{ "id": "3", "label": "label 3", "value": "value 3" },
...
]
which will represent an array of objects that match the search criteria and which will be shown in the dropdown.
Obviously the implementation of the server side script will greatly depend on the server side language you are using, the database access technology, ...

Categories