Binding and accessing nested elements using Rivets.js and Backbone deep model - javascript

We are using an open source FormBuilder client side component and extending it to fit our requirements. Formbuilder is written using Backbone Deep model with nested data and for binding, it use Rivets.js.
Here Formbuilder is on GitHub: https://github.com/dobtco/formbuilder and here backbone deep model at GitHub: https://github.com/powmedia/backbone-deep-model
Now we are using nested elements in view, which are nested in structure as in following JSON:
{
"fields": [{
"label": "Untitled",
"field_type": "checkboxes",
"required": true,
"field_options": {
"options": [{
"label": "test",
"checked": false
}, {
"label": "",
"checked": false
}]
},
"rules_data": {
"rules": [{
"ruleId": "rule6",
"criterias": [{
"condition": "if",
"responseTo": "",
"userOption": ""
}],
"branchTo": [{
"branch": "test"
}, {
"branch": ""
}, {
"branch": ""
}]
}]
},
"cid": "c2"
}]
}
Here there is array of rules, then rules have at every index have more data with in which one is branchTo, now branchTo is also an indexed array. In Rivets.js we can bind something using Rivets.js . or : operator. In case of properties, we can use : but we are unable to access elements inside nested indexed array.
So is it possible to access and bind elements in Rivets while using nexted indexed elements? If yes, then how can we do so? Or is there better and simpler way to accomplish same goal? I am beginner in Backbone as well as Rivets, and I am not sure if this is the right way.

If I understand rivetsjs correctly the : is just an example of an adapter you could have ^ as an adapter separator if you wish. This means you can also have both and nest adapters. having the : search the first level and then the ^ to search 1 level deeper.
You can also build a more adaptive adapter that can get objects deeper. Example in the following stackoverflow answer. You can also see some other methods of getting deeper nested objects here:
How to bind deeper than one level with rivets.js
Hope this solves your problems

Related

Best way of listing objects in JSON?

I'm struggling to figure out if my method of listing objects in JSON is correct/efficient. I'm creating an API that will let the user search for engines in various ways and get info on them. So each "engine" object has several key/value pairs with it, and each "engine" is different. My current format is this:
{
"engines": [
{
"name": "Ford Modular Engine 3-valve",
"maker": "Ford",
"cam": "SOHC"
},
{
"name": "LS6",
"maker": "Chevy",
"cam": "OHV"
}
]
}
My concern with this format is accessing a specific engine as it is hidden under an array.
The other format idea I had was this (but I'm not sure if this is "proper" syntax for a JSON object)
{
"engines": {
"ford3v": {
"name": "Ford Modular Engine 3-valve",
"maker": "Ford",
"cam": "SOHC"
},
"ls6": {
"name": "LS6",
"maker": "Chevy",
"cam": "OHV"
}
}
}
Do the differences come down to personal preference? What is the industry standard?
In maximum cases option will be upto your requirement. It is better to have the following format because, it will be easy for you if you want to repeat the list in your html.
{
"engines": [
{
"name": "Ford Modular Engine 3-valve",
"maker": "Ford",
"cam": "SOHC"
},
{
"name": "LS6",
"maker": "Chevy",
"cam": "OHV"
}
]
}
I'd go with the first option, because your search API implies it'll be a list of engine objects coming back. With JSON, I tend to think of objects as key-value pairs for known properties, so it's more straightforward to iterate over a list and know to look for properties on those objects to do any filtering.
Not knowing the specific case you're writing this API for, I don't believe that consumers know to look for specific engines by the key/property you provide in the second example, especially if it's merely duplicating a field (name) already present in the object.

Updating an object inside of an array MongoDB Meteor

I am trying to update an object inside of an array. Here is my structure:
"_id": "ubtQP9EjmxhXS5z98",
"name": "My Data",
"desc": "What songs should I play at my wedding?",
"private": false,
"suggestions": [
{
"name": "Vote 1",
"link": "http://www.website.com/",
"votes": 0
},
{
"name": "Vote 2",
"votes": 0
}
],
"author": "tovd9Win3C3fntgyR",
"createdAt": "2016-01-10T08:36:37.014Z"
I want to update the votes on the first object in "suggestions" by 1. At the moment I have the following code but it does NOT work.
Polls.update("ubtQP9EjmxhXS5z98", {
$inc: {suggestions.$.votes: 1},
});
If you know the array index of the embedded document, you can specify the document using the embedded document’s position using the dot notation.
You don't need the positional $ update operator here because you know the position of the element you want to update.
The positional $ operator identifies an element in an array to update without explicitly specifying the position of the element in the array.
Also to use the $ operator the array field must appear as part of the query document.
Polls.update({"_id": "ubtQP9EjmxhXS5z98"}, {
"$inc": {"suggestions.1.votes": 1},
});
In your query, in the "find" part, you have to specify what you are looking in your array. Per example: "suggestions.name" = "Vote1"

Need an algorithm to convert string to JSON with javascript

I'm calling an api for the history of an ID which returns a string object that looks like this:
09304790130000--09304790090000
09304790130000--09304790120000
09304790090000--09304790010000
09304790120000--09304790020000
09304790120000--09304790030000
09304790120000--09304790110000
09304790110000--09304790050000
09304790010000--042322003
09304790020000--042322002
09304790030000--042322001
09304790050000--042322004
I could do so much more with it if I could figure out how to use JavaScript to convert it to JSON so it would look like this:
{
"name": "09304790130000",
"children": [{
"name": "09304790090000",
"children": [{
"name": "09304790010000",
"children": [{
"name": "04 2322-003"
}]
}]
}, {
"name": "09304790120000",
"children": [{
"name": "09304790020000",
"children": [{
"name": "04 2322-002"
}]
}, {
"name": "09304790030000",
"children": [{
"name": "04 2322-001"
}]
}, {
"name": "09304790110000",
"children": [{
"name": "09304790050000",
"children": [{
"name": "04 2322-004"
}]
}]
}]
}]
}
Is there an algorithm I can use that can construct the object I need regardless of how complicated the "tree" becomes?
EDIT for clarity:
The "--" in the string represents the relationship of the ID's. The left ID is the parent of the ID right of the dashes. So the ID that I feed the api, "09304790130000" has two children, each could have more children until they reach the current 9-digit ID.
What you have here is an input that is in a custom format. What you need to handle it is a regular expression. (Although your format might be simple enough that a full on regex function is not required so much as splitting on separators?) You need to do is break the input string up and loop over the components and put those into your desired data structure (which sounds like it would be some kind of tree). The high level pseudo-code would be something like:
Take line of input.
Break on "--".
Create root node from the left side if the tree is empty, otherwise just find the existing node.
Add child from right side to the parent.
Getting it into the JSON format you want may require also writing a function that iterates over the tree and writes a string in that format... although if you are using existing libraries and data types this probably already exists.
EDIT: To expand on the last bit, to get the format you want would mean a Pre-order traversal of the tree. At each step you just add the formatting and name to the JSON String. One of these libraries should have the capabilities you need, although obviously you can write a tree data structure and traversal function yourself if you need to.

Selecting a subarray in a javascript object using jQuery/jHashtable

I have an object like this:
var data = {
"info" : [{
"title": "Desemberkonsert",
"description": "MangerFHS 09/10"
}],
"playlist" : [
{
"title": "In This Place",
"description": "Excalibur",
"href": "desemberkonsert_in-this-place",
"url": "flv/desemberkonsert/21_in_this_place.flv",
"thumbnail": "flv/desemberkonsert/21_in_this_place_thumbnail.png",
"time": "5:39"
}]
}
And I am trying to do a search using jHashtables containsValue-function (I am willing to settle for any other search method that works though), like this containsValue(data.playlist, 'Excalibur'). But for some reason, this returns false. How would I select the array that contains the the value Excalibur from the code above?
I could not find a decent method inherently available in JavaScript or the jQuery library, but using a smaller library named jLinq (http://jlinq.hugoware.com/), doing it was a breeze. It allows me to filter with many different methods (I am using the 3.x beta though).
EDIT: The thing I missed was that the lowest arrays behave like objects too. But as Šime Vidas pointed out, I can select a subarray like this: data.playlist[0], and an item within that like this: data.playlist[0].description.

One-liner javascript to collect values from object graph?

Given the following object graph:
{
"children": [{
"child": {
"pets": [{
"pet": {
"name": "fido"
}
},
{
"pet": {
"name": "fluffy"
}
}
]
}
},
{
"child": {
"pets": [{
"pet": {
"name": "spike"
}
}]
}
}
]
}
What would be a nice one-liner (or two) to collect the names of my grandchildren's pets? The result should be ["fido", "fluffy", "spike"]
I don't want to write custom methods for this... I'm looking for something like the way jQuery works in selecting dom nodes, where you can just give it a CSS-like path and it collects them up for you.
I would expect the expression path to look something like "children child pets pet name"
LINQ to JavaScript (JSLINQ) is an implementation of LINQ to Objects implemented in JavaScript. It is built using a set of extension methods built on top of the JavaScript Array object. If you are using an Array, you can use LINQ to JavaScript.
LINQ to JavaScript is an open source project and you can download it from here: http://jslinq.codeplex.com/
Hope this helps...
s
If you don't want to use a library, this is the most concise way I could think of writing it.
var Ar=[];
p.children.map(function(a){a.child.pets.map(function(a){Ar.push(a.pet.name)})});
I settled on the JSONPath library, which is like XPath for JSON. LINQ seemed a little heavyweight for my needs, resulting in a more verbose syntax, though it does look more powerful. Perhaps if my needs change I'll upgrade.

Categories

Resources