We Keep Coding

Ember unknown relationship

I'm currently building software with Rails + Ember 3.12, but hitting a strange issue.
My models are the following:
// test-case-run
import DS from 'ember-data';
const { Model } = DS;
export default Model.extend({
testCase: DS.belongsTo('test-case'),
testCaseRunLogs: DS.hasMany('test-case-run-logs')
});
// test-case-run-log
import DS from 'ember-data';
const { Model } = DS;
export default Model.extend({
testCaseRun: DS.belongsTo('test-case-run'),
payload: DS.attr('')
});
And, my backend is returning the following payload:
{
"data": {
"id": "83",
"type": "test_case_run",
"relationships": {
"test_case": {
"data": {
"id": "90",
"type": "test_case"
}
},
"test_case_run_logs": {
"data": []
}
}
}
}
{
"data": {
"id": "83",
"type": "test_case_run",
"relationships": {
"test_case": {
"data": {
"id": "90",
"type": "test_case"
}
},
"test_case_run_logs": {
"data": [
{
"id": "426",
"type": "test_case_run_log"
}
]
}
}
},
"included": [
{
"id": "426",
"type": "test_case_run_log",
"attributes": {
"payload": "SCREENSHOT"
},
"relationships": {
"test_case_run": {
"data": {
"id": "83",
"type": "test_case_run"
}
}
}
}
]
}
I've got a custom adapter defining:
pathForType(type) {
return underscore(pluralize(type));
}
So, I think that everything should go well.
However, when I get into the ember inspector, I've got the following:
It seems that my relationship is not loaded properly.
And, I cannot access any data, such as:
log.get('testCaseRun') // that is null
run.get('testCaseRunLogs.length') // it returns 0
This is quite strange, as my records are loaded in the store, but not their relationships.
I have no idea on how to troubleshoot this, since the amount of information I can get from ember is quite limited (there is no error, the format looks good, ...).
Could someone help me to understand what's wrong with my calls? I've tried many things, such as renaming my models, but this does not improve the situation.
Moreover, this model is the only one, which I have problem with. All my other models don't have this problem. So, that's a bit weird.
Thanks a lot

The unknown in <(unknown):ember264> refers to the name of the class. That doesn't mean that your relationship is not loaded correctly. It's just Ember Data using anonymous classes.
To see the data of the relationship you could click on that string and afterwards on content. Another option is passing the full record to the console using the $E link in top right corner. Afterwards you could interact with the record on console, e.g. do a $E.get('testCaseRun.id').
By the way: You don't need to explicitly declare the model name on relationship definition if it's matches the dasherized property name. So testCaseRun: DS.belongsTo('test-case-run') is the same as testCaseRun: DS.belongsTo().

Try to declare hasMany relationship with the model name without 's'
testCaseRunLogs: DS.hasMany('test-case-run-log')

Finally, I've found the answer of my question.
The problem was that I was using the "underscore" form of the relationships:
"included": [
{
"id": "426",
"type": "test_case_run_log", <= HERE
"attributes": {
"payload": "SCREENSHOT"
},
"relationships": {
"test_case_run": {
"data": {
"id": "83",
"type": "test_case_run" <= HERE
}
}
}
}
]
And, changing pathForType was not sufficient.
So, I made my backend use dashes. And, it worked.

How to do ng-repeat on $firebaseArray output with multiple levels?

I am using $firebaseArray for collecting the data from Firebase. Output is as follows:
[
{
"BankAccount": {
"AccountHolder": "Tom Antony",
"AccountNumber": "56767887"
},
"Info": {
"BillingAddress": {
"City": "XYZ",
"State": "ABC"
},
"FullName": "Tom Antony",
"PhoneNumber": "634762347"
},
"$id": "dGUZX5SWi7aP0SNYLYqEiMdCYAS2",
"$priority": null
},
{
"Campaigns": {
"Settings": {
"Active": true
}
}
},
"Info": {
"BillingAddress": {
"City": "ABC",
"State": "DFG"
},
"FullName": "Mario",
"PhoneNumber": "634762347"
},
"$id": "tBqGZ7g6VwNYOWoVy7C1FHKZKFS2",
"$priority": null
}
]
My js is as follows:
const rootRef = firebase.database().ref().child('Users');
$scope.users = $firebaseArray(rootRef);
Each Array element will have different type of objects, but each will have a similar object called Info, which contains a field for FullName I need to apply ng-repeat on this FullName. My implementation is as shown below:
<div ng-repeat="user in users.Info">
<p ng-bind="user.FullName"></p>
</div>
But its not working. What are the mistakes I made here?

You are trying to iterate on the wrong property. You have two objects (user) which each have an Info property that you want the FullName from. You do not have two Info objects. Therefore, you should be iterating over the users, not iterating over users.Info.
Try this instead:
<div ng-repeat="user in users">
<p ng-bind="user.Info.FullName"></p>
</div>
Also, your object you pasted here wasn't valid JSON, you had an extra }.
Full Working example: http://plnkr.co/edit/ryfjhO0c3egHfKnaL9SQ?p=preview

Iterate through nested Javascript Objects from API response

I've tried 100 different things, and spend days looking through Google and Stackoverflow, but I can't find a solution to this problem. Everything I call after the body of this API response returns undefined!
The response from Facebook SDK looks like this:
[
{
"body": "[
"data": [
{
"name": "Larry Syid Wright",
"administrator": false,
"id": "xxx"
}, {
"name": "Melissa Long Jackson",
"administrator": false,
"id": "xxx"
}, {
"name": "Charlotte Masson",
"administrator": false,
"id": "xxx"
}
],
"paging": {
"next": "url"
}
]"
},{
"body": "{
"data": [
{
"id": "xxx_xxx",
"message": "In honor of Halloween, how many of you have your own ghost stories? Who believes in ghosts and who doesn't?",
"type": "status",
"created_time": "2014-10-31T20:02:01+0000",
"updated_time": "2014-11-01T02:52:51+0000",
"likes": {
"data": [
{
"id": "xxx",
"name": "Joe HerBatman Owenby Jr."
}
],
}
"paging": {
"cursors":
{
"after": "xxx",
"before": "xxx"
}
}
}
},{
"id": "xxx_xxx",
"from": {
"id": "xxx",
"name": "Jessica Starling"
},
"message": "Watching the "Campaign" and I can't help but notice what a fantastic job they did (Will ferrell and all) with that North Carolina accent! Ya'll know we sound different than other southern states ;)",
"type": "status",
"created_time": "2014-11-01T02:36:21+0000",
"updated_time": "2014-11-01T02:36:21+0000",
"likes": {
"data": [
{
"id": "xxx",
"name": "Scott Williams"n
}
]
}
}
],
"paging": {
"previous": "xxx",
"next": "xxx"
}
}"
}
]
This response is from a batch call. If I call them separately, I can easily iterate through the responses, and get everything from them. When I call them in the batch though, I can't get past "body", and I need to use a batch call.
console.log(response[0].body); will return the object inside the body of the first part of the response, but console.log(response[0].body.data); returns undefined. I just don't get it. This should be simple but it's like there's a lock on the door and I don't have the right key.
I normally have no issue iterating through objects, so I don't need a generalized answer. I need help seeing whatever it is here that I don't see. Why does the console show undefined when I call anything after the body, and what do I need to be doing to get any of these values?

That JSON contains nested JSON. body seems to be a string. Use
var body = JSON.parse(response[0].body);

The values from the body are just strings.which are embedded as json.So firstly you would need to parse them using JSON.parse.
The code would be like
var body = JSON.parse(response[0].body);

PouchDb - remove object inside document

I'm an Italian PouchDb and AngularJS Developer.
My json document is:
{
"_id": "6",
"_rev": "3-f7283d7683cd6fb15753f494aad1d49f",
"name": "Ivrea",
"owners": [
{
"owner_id": 1,
"name": "asdas",
"address": "asdas",
"gender": "Uomo",
"type": "Assente",
"notes": [
]
},
{
"owner_id": 2,
"name": "balbaba",
"address": "blabla",
"gender": "Uomo",
"type": "Assente",
"notes": [
]
}
]
}
and after an ng-click action, I will delete owner_id: 2 object inside _id: 6 document. In API reference I found only document delete action, but not how to delete object inside document.
Thanks for your reply!!
Alessandro

You just need to put() the main document back in the database after you remove an object from it. :)
db.get('foo').then(function (doc) {
delete doc.whatever;
return db.put(doc);
}).catch(function (err) { /* ... */ });

Writing JSON array to object

I have some JSON which looks like this.
[
{
"items": [
{
"id": "xxxx",
"description": {
"style": "",
"specs": ""
}
},
{
"id": "xxxx",
"description": {
"style": "",
"specs": ""
}
}
],
"category": "xxxxxx",
"name": "xxxxxx"
},
{
"items": [
{
"id": "xxxx",
"description": {
"style": "",
"specs": ""
}
},
{
"id": "xxxx",
"description": {
"style": "",
"specs": ""
}
}
],
"category": "xxxxxx",
"name": "xxxxxx"
}
]
It's being passed to me as 'newItem'. And is being set twice in the existing code I'm working on:
that.cart.addItem(newItem.toObject());
And later:
that.origCart.replaceWith(that.cart);
This traditionally has worked fine when 'items' was a flat list. However, the JSON above is the new JSON format and therefor I need to pass 'items' for each category/name.
Inside the 'for' loop I have this outputting what I need for each.(I need to keep them separated.)
newItem.items
However, when I attempt to perform the following I get a Type Error. (Yes, I'm going to have multiple 'carts' once I get this working.)
that.cart.addItem(newItem.items.toObject());
TypeError: newItem.items.toObject is not a function
What can I do to get 'newItem.items' to the proper type, or what operation can I substitute for to get these set properly? I tried a bunch of things I found online without success and now I'm turning to the experts. Just not my forte (yet).

It looks like you're trying to call an items function from the newItems object even though items is an Array. Try the following:
that.cart.addItem(newItem.items);