We Keep Coding

Vue - Loop through an array with nested objects

I'm fetching a list that I'm trying to loop through that has an object inside. I'm using vue and the array looks like this:
companies: [
name: "company1"
id: 1
type: "finance"
additionalData: "{"funder":"blabla","idType":5,"number":"2"}"
]
My problem is accessing the different ones inside the additionalData.
This is how far I've come:
<div
v-for="(company, idx) in companies"
:key="idx"
>
<p class="font-weight-bold text-h6"> {{ company.name }} </p>
<p class="font-weight-bold"> {{ company.additionalData.funder }} </p>
</div>
This doesn't work and I've tried a loop inside the loop aswell. When I only print out {{ company.additionalData }} I get the whole object. Can it have something to do with that the object is inside a string? Could I do a computed or something to figure this out or? :)

It looks like additionalData is a string containing JSON, so try converting the string to an object. Something like this should work:
<p class="font-weight-bold"> {{ JSON.parse(company.additionalData).funder }} </p>

Yes, you're right, you can't access json properties with dot notation in html. You can fix that with JSON.parse, which will turn your JSON object into a JavaScript object that you can access the properties of in your template.
companies: {
name: "company1"
id: 1
type: "finance"
additionalData: JSON.parse("{"funder":"blabla","idType":5,"number":"2"}")
}

Syntax problem
companies: [
name: "company1"
id: 1
type: "finance"
additionalData: {
"funder": "blabla",
"idType": 5,
"number":"2"
}
]

I am unable to parse the json array using angular ng-repeat

Below is the JSON which I am getting and I am storing that in variable using,
JS:-
$scope.shopData = resp.data.shopVal;
On the JSP page its not working in ng-repeat tag.
JSON:-
{
"subCategoryNames": null,
"subCategorymMap": {},
"shopVal": [
{
"shopAdrs": "tex10",
"shopSrvc": "tex12",
"shopName": "tex13",
"shopWbst": "tex14"
},
{
"shopAdrs": "tex15",
"shopSrvc": "tex16",
"shopName": "tex16",
"shopWbst": "tex17"
},
{
"shopAdrs": "tex18",
"shopSrvc": "tex19",
"shopName": "tex20",
"shopWbst": "tex21"
}
],
"ownerVal": {
"ownrNumbr": "1111111111",
"ownrFName": "ABCD",
"ownrLName": "EFGH",
"ownrEmail": "ABXD305#GMAIL.COM"
}
}
JSP:-
<div data-ng-repeat="shop in shopDta">
<a>
{{shopDta.shopName}}<br>
Address: {{shopDta.shopAdrs}}<br>
Services: {{shopDta.shopSrvc}}<br>
Website: {{shopDta.shopWbst}}<br><br>
</a>
</div>
Note that $scope.shopData is correctly getting value as per JSON. Please help

Try this one, you are trying to iterate an Object using ng-repeat which is not possible, you need to get the array and put it inside ng-repeat, i have done some changes, hope this works out for you.
<div data-ng-repeat="shop in shopData.shopVal">
<a>
{{shop.shopName}}<br>
Address: {{shop.shopAdrs}}<br>
Services: {{shop.shopSrvc}}<br>
Website: {{sho[.shopWbst}}<br><br>
</a>
</div>

It should be like this :
<div data-ng-repeat="shop in shopData">
<a>
{{shop.shopName}}<br>
Address: {{shop.shopAdrs}}<br>
Services: {{shop.shopSrvc}}<br>
Website: {{shop.shopWbst}}<br><br>
</a>
</div>

try this, you are trying to iterate an Object using ng-repeat which is not possible, you need to get the array and put it inside ng-repeat, i have done some changes, hope this works out for you.
<div data-ng-repeat="shop in shopData">
<a>
{{shop.shopName}}<br>
Address: {{shop.shopAdrs}}<br>
Services: {{shop.shopSrvc}}<br>
Website: {{shop.shopWbst}}<br><br>
</a>
</div>

Efficient queries for multiple corresponding documents using an array of _id references

I'm trying to grok Meteor. Here's a helper that I have in one of my templates:
genres: function() {
return Genres.find();
}
Which returns something like this:
[{ "name" : "Action", "_id" : "CHP8uaSPNwKTj6gn7" },
{ "name" : "Thriller", "_id" : "8hKRp3LmgcD6gPRXf" }]
I have yet another helper function in that same template:
authors: function() {
return Authors.find();
}
Which returns something like this:
[{ "name" : "Robert Ludlum", "genre" : [ "CHP8uaSPNwKTj6gn7", "8hKRp3LmgcD6gPRXf" ]}]
The problem becomes clear when I want to display authors and their genres in HTML:
{{#each authors}}
<p> Author: {{name}} </p>
<p> Genres: {{genre}} </p>
{{/each}}
Which, as you've already guessed, results in:
Author: Robert Ludlum
Genres: CHP8uaSPNwKTj6gn7, 8hKRp3LmgcD6gPRXf
And that's not desirable. This would much be better:
Author: Robert Ludlum
Genres: Action, Thriller
I've had a tough time figuring out how to accomplish that. I don't have a lot of experience with this NoSQL stuff and the examples that I've seen have been unhelpful in this context.
So how do I pull that off?

There are a few ways to solve this. One is to add a helper like:
Template.myTemplate.helpers({
genreNames: function() {
var genres = Genres.find({_id: {$in: this.genre}}).fetch();
var names = _.pluck(genres, 'name');
return names.join(', ');
}
});
And modify your template to look like this:
{{#each authors}}
<p> Author: {{name}} </p>
<p> Genres: {{genreNames}} </p>
{{/each}}
The helper works because it runs inside of the #each so it's context is an author.
Alternatively, you can add a transform to your collection or use collection-helpers. That way, you can add a virtual property to all author instances, so you can do things like: Authors.findOne().genreNames().

In atmosphere there is a package called publish-composite, https://atmospherejs.com/reywood/publish-composite that should allow you to do what you are after.
It will allow you to select on multiple collections using a primary collection and related data from other collections.

Reference a string filter from object value

I am trying to apply a filter to the output of an angular ng-repeat. Here's an example of the data:
{name: "followers", label: "Followers", filter:"number:0"},
{name: "following", label: "Following",filter:"number:0"},
{name: "mediaCount", label: "Media Count",filter:"number:0"}
The display of things looks like this:
<span ng-repeat="item in rows">
<div class="col col-gh-4"><label>{{item.label}}</label></div>
<div class="col col-gh-2" ng-bind="item.value ? (item.value|{{item.filter}}) : '-'"></div>
I am trying to apply the filter in this case "number:0" as defined in the data object at display-time using something like: item.value|{{item.filter}} or item.value|item.filter
Both of those attempts don't work, any advice on how to reference the filter from the object value? Is it possible?
Thanks for any suggestions!

AngularJS: Bind to all object properties?

I have a Model that takes an object that could contain any set of properties.
I am wondering if I can bind to each object property, without knowing the property values ahead of time.
Take this for example
var object1 =
{
Name: '1',
Identifier: '12345',
Password: 'password'
}
var object2 =
{
Name: '2',
Identifier: 'object_two'
}
var objects = [object1,object2];
My objects can have different and unique properties, and I'd like to bind this to a form.
I know I can use a for (var property in object) and iterate through each object -- But can I do the same thing with AngularJS binding?
I wanted to do something along the lines of:
<ul><li ng-repeat="attrib in obj">
{{attrib}}
</li</ul>
Edit: Thanks to the answer below I have gotten a little further. I can't seem to achieve two-way binding with this. This fiddle illustrates what I am trying to do:
http://jsfiddle.net/EpqMc/17/
I essentially want to bind using something like this:
<p ng-repeat="(key,value) in obj">
{{key}} : <input ng-model="obj[key]" />
</p>
This works, except that I can only enter one character at a time -- interesting.
Final Edit: I found an acceptable alternative in case anyone else has this problem. I wasn't able to bind directly to an object without some issues, but i WAS able to bind to an array like the docs state in the answer below.
The following fiddle accomplishes what I need to do, while being only slightly more verbose.
http://jsfiddle.net/8ENnx/9/
function ctrl($scope) {
$scope.objects =
[
[
{Name: 'Name:', Value: 'Joe'},
{Name: 'Identification', Value: '1'},
{Name: 'Password', Value: 'secret'}
],
[
{Name: 'Name:', Value: 'Jane'},
{Name: 'Identification', Value: '2'},
{Name: 'Weather', Value: 'Sunny'}
]
];
// $scope.setSelected = ?????;
}
<div ng-app>
<div ng-controller="ctrl">
Objects
<ul>
<br/>
Listing of properties:
<br/>
<li ng-repeat="obj in objects" class="swatch">
{{obj}}
<p ng-repeat="prop in obj">
{{prop.Name}}: <input ng-model="prop.Value" /></p>
</li>
</ul>
</div>
</div>
This allows me to define an arbitrary set of arguments, but still bind without issues using angular.

No problem:
<li ng-repeat='(key, value) in obj'>
{{key}} : {{value}}
</li>
It's in the docs as well: http://docs.angularjs.org/api/ng.directive:ngRepeat