Develop Reference

Using an array's object's attribute in a v-for with v-bind in vue.js?

So I'm trying to follow what I've found in the API and examples from the vue.js page but it doesn't seem to be working out.
I have this component
Vue.component('project', {
data: function () {
return {
title: "Sketch",
desc: "Zoe Beauty is an online store web application that sells different types of makeup from many brands in " +
"the market. It works with a nodeJs server and Handlebars templating to create the front end. The app is " +
"created under the slogan “Just Shine”, Most feedback in the app is elusive to this slogan and so is it's " +
"graphic style. The user can filter the items by many different things such as a type of product, brand, price, " +
"rating, etc. Also, they can add items to their cart.",
links: [{
"github": {
"link": "https://github.com/booleanaVillegas/juliana-villegas-taller-uno",
"logo": "https://firebasestorage.googleapis.com/v0/b/booleana-s-portafolio.appspot.com/o/github.svg?alt=media&token=83edf83c-cd80-43fa-bedd-a2348ff23b3e"
},
"web": {
"link": "https://enigmatic-shelf-33047.herokuapp.com/",
"logo": "https://firebasestorage.googleapis.com/v0/b/booleana-s-portafolio.appspot.com/o/web.svg?alt=media&token=b5e092a2-beb3-4c72-a329-8e402e82032f"
}
}]
,
img: "https://firebasestorage.googleapis.com/v0/b/booleana-s-portafolio.appspot.com/o/projects%2Fzoe.png?alt=media&token=b0255dda-51f9-4958-8f7b-af978cc9b790"
}},
template: `
<div class="each-project">
<img src="https://firebasestorage.googleapis.com/v0/b/booleana-s-portafolio.appspot.com/o/projects%2Fzoe.png?alt=media&token=b0255dda-51f9-4958-8f7b-af978cc9b790"
alt="" class="pic-project">
<h3 class="purple title-project">{{title}}</h3>
<p class="project-desc">{{desc}}</p>
<div class="links-container" v-for="link in links">
<a :href="link.link" class="link-container"><img
:src='link.logo' alt='link.key' class='link-img'></a>
</div>
</div>
`
});
The :src and :href in the v-for: link in links are not displaying anything, and when I inspect the element it is literally showing 'link.logo' instead of the actual link
how can I mix v-for and v-bind correctly?

first your array just contains 1 element, and that element was an object so just remove the []
links: {
"github": {
"link": "https://...",
"logo": "https://..."
},
"web": {
"link": "https://...",
"logo": "https://..."
}
}
look https://codepen.io/maoma87/pen/JaWQEq?editors=0010

Your links array contains only 1 element?
links: [{
"github": {
"link": "https://github.com/booleanaVillegas/juliana-villegas-taller-uno",
"logo": "https://firebasestorage.googleapis.com/v0/b/booleana-s-portafolio.appspot.com/o/github.svg?alt=media&token=83edf83c-cd80-43fa-bedd-a2348ff23b3e"
},
"web": {
"link": "https://enigmatic-shelf-33047.herokuapp.com/",
"logo": "https://firebasestorage.googleapis.com/v0/b/booleana-s-portafolio.appspot.com/o/web.svg?alt=media&token=b5e092a2-beb3-4c72-a329-8e402e82032f"
}
}]
If it's, you can loop like this:
<div class="links-container" v-for="(linkValue, key) in links[0]">
<a :href="linkValue.link" class="link-container"><img
:src='linkValue.logo' alt='key' class='link-img'></a>
</div>

Your v-for should once read array one element.
Links object a element like this
{
"github": {
"link": "https://github.com/booleanaVillegas/juliana-villegas-taller-uno",
"logo": "https://firebasestorage.googleapis.com/v0/b/booleana-s-portafolio.appspot.com/o/github.svg?alt=media&token=83edf83c-cd80-43fa-bedd-a2348ff23b3e"
},
"web": {
"link": "https://enigmatic-shelf-33047.herokuapp.com/",
"logo": "https://firebasestorage.googleapis.com/v0/b/booleana-s-portafolio.appspot.com/o/web.svg?alt=media&token=b5e092a2-beb3-4c72-a329-8e402e82032f"
}
}
So your v-for like this
<div class="links-container" v-for="link in links">
<a :href="link.github.link" class="link-container">
<img :src='link.github.logo' alt='link.key' class='link-img'>
</a>
<a :href="link.web.link" class="link-container">
<img :src='link.web.logo' alt='link.key' class='link-img'>
</a>
</div>

How to make linked(dynamic?) select fields in oracle jet?

Im very new to JS and OJET. I'm using oracle jet to create a form. I need to create two select fields, the firts displays a client's name and the next one must change is values with the selected client's team members.
I have a JSON File with this format:
{
"clients": [
{
"id": "C01",
"name": "Client 1",
"manager": "Manager 1",
"team": [
{
"id": "C1MEM1",
"name": "member 1"
},
{
"id": "C1MEM2",
"name": "member 2"
},
{
"id": "C1MEM3",
"name": "member 3"
},
{
"id": "C1MEM4",
"name": "Member 4"
}
]
},
{
"id": "C02",
"name": "Client 2",
"manager": "Manager 2",
"team": [
{
"id": "C2MEM1",
"name": "member 1"
},
{
"id": "C2MEM2",
"name": "member 2"
},
{
"id": "C2MEM3",
"name": "member 3"
},
{
"id": "C2MEM4",
"name": "member 4"
}
]
}
I managed to create a select field with the clients name:
self.clientsListVal = ko.observableArray(['C01']);
self.clientsList = ko.observableArray();
$.getJSON("http://localhost:8000/js/json/clients.json").
then(function(data){
$.each(data["clients"],function(){
self.clientsList.push({
value: this.id,
label: this.name
});
});
});
Then I tried to get the next select fields this way, but it doesn't work :( :
self.memberList = ko.observableArray();
$.getJSON("http://localhost:8000/js/json/clients.json").
then(function(data){
$.each(data["clients"],function(){
if (this.id === self.clientsListVal ) {
$.each(this["team"], function(){
self.memberList.push({
value: this.id,
label: this.name
});
});
}
});
});
This is the HTML im using:
<div class="oj-applayout-content">
<div role="main" class="oj-hybrid-applayout-content">
<div class="oj-hybrid-padding">
<h3>Dashboard Content Area</h3>
<div>
<label for="clients">Clients</label>
<select id="clients"
data-bind="ojComponent:
{component: 'ojSelect',
options: clientsList,
value: clientsListVal,
rootAttributes: {style:'max-width:20em'}}">
</select>
<label for="select-value">Current selected value is</label>
<span id="select-value" data-bind="text: clientsListVal"></span>
<label for="members">Members</label>
<select id="members"
data-bind="ojComponent: {component: 'ojSelect',
options: memberList,
value: memberListVal,
rootAttributes: {style:'max-width:20em'}}">
</select>
</div>
</div>
</div>
Any help or hint? thank you!.
EDIT:
I think the problem is that self.clientsListVal is returning a function not the current selected value. I added console.log(self.clientsListVal) to the view model to see the current value.
If I change self.clientsListVal for a string:
if(this.id === 'C01'){}
I get the members of the client "C01".
I tried changing self.clientsListVal to $('#clients').val(), this is the id of the select input and i get undefined in the console.log.
How can I get the select field string value inside the viewmodel?

In Knockout, observables are functions -- so when you ask for the observable directly, like self.clientsListVal, you get the function definition. To get the underlying value, call the observable like a function: self.clientsListVal().
So your test becomes if (this.id === self.clientsListVal() ) {
Now you have another problem -- the observable holds an array, not an ID. The array may have a single ID element in it, but you have to reach into the array to get it.
Since you didn't show us how a value gets into clientsListVal, it's hard to say what you need to do. Is it bound to an input field where the user specifies a value? Is it populated from a data call? either way, do you ever need to have more than one ID in clientsListVal? If you only need to hold one ID at a time, change clientsListVal from an observableArray to a simple observable and your test will work.
If clientsListVal can hold multiple values, you'll need to loop over them. There are various ways to do this. You can get the underlying array by assigning the value of the observableArray to a variable: var clients = clientsListVal(). clients now holds the array, and you can use jQuery's $.each, the native Array.each, or some other way to loop over or map the array. Or you can use Knockout's built-in array utilities, like arrayForEach
if you don't want to change to a regular observable but expect the array to only have a single element, you can get at it like clientsListVal()[0] -- that's the 0th (first) element of the array. Watch out for empty arrays, tho.

Render a directive with two datasources

My problem is a bit complex, so i will try to explain it as detailed as possible.
I have a directive in a SPA that render their components based on a JSON data that i'm getting from an API. Based on the elements and their types (the JSON is an array of different objects) i'm rendering every object in an specific directive:
Objects Type 1: Renders in a Directive Type 1.
Objects Type 2: Renders in a Directive Type 2.
Objects Type 3: Renders in a Directive Type 3.
Directives Type 1-2-3 are contained in the parent directive and every directive has different controls (select, checkbox). This is a very simple Sketch:
And the "sub-directives":
I'm rendering my elements as follows (Container directive):
<div ng-repeat="element in elementList | customFilter:itemsType1">
<div class="line"></div>
<div class="form-group">
<directivetype1 itemdata="element" modeldata="data"></directivetype1>
</div>
</div>
<div ng-repeat="element in elementList | customFilter:itemsType2">
<div class="line"></div>
<div class="form-group">
<directivetype2 itemdata="element" modeldata="data"></directivetype2>
</div>
</div>
...
And this is the Directive 1 code:
<div class="container-fluid">
<div class="form-group">
<div class="col-xs-6 col-sm-3">
<div class="checkbox">
<label><input type="checkbox"/>{{itemdata.metadata.description}}</label>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<label>Option</label>
<select class="form-control" ng-model="" ng-options="list.id as list.label for list in item.optionData"></select>
</div>
</div>
</div>
My problem goes when i try to attach the model to every element rendered, because of:
The model data comes from another API, in another structure.
I'm iterating the list of controls with ng-repeat, but, when i pass the model data to the sub-directive i'm passing all the possible data (as Array) and i'm not being capable of filter and know what object in that array belongs to an specific view element.
The data has the following structure:
View data:
[
{
"elementA": {
"metadata": {
"id": "001",
"subId": "016",
"description": "Element 1"
},
"optionData": [
{
"id": "5",
"label": "Option 1"
},
{
"id": "6",
"label": "Option 2"
},
{
"id": "7",
"label": "Option 3"
}
]
}
},
{
"elementB": {
"metadata": {
"id": "002",
"subId": "024",
"description": "Element 2"
},
"optionData": [
{
"id": "1",
"label": "Option 1"
},
{
"id": "2",
"label": "Option 2"
},
{
"id": "3",
"label": "Option 3"
}
]
}
}
]
Model data:
[
{
"metadata": {
"id": "002",
"subId": "024",
"description": "Element 2",
"selected": "1"
},
...(Some other data belonging to the model)
},
{
"metadata": {
"id": "001",
"subId": "016",
"description": "Element 1",
"selected": "5"
},
...(Some other data belonging to the model)
},
...
]
As you can see, the only way to correlate both models is with id and subId Fields in the metadata object (because the metadata itself can vary having more or less fields).
QUESTION
How can i filter my model object, based on the view object? My goal is to get the model object that correlates to the view object and pass it to the sub-directive for setting it as the model of the control that i'm rendering at that point.
EDIT:
As cmw pointed out, i've coded a function to correlate every model object with their respective view object, but that object is not reflected in the directive scope. itemdata and modeldata are passed to the directive using a bi-directional scope ('='). I think (but i'm not entirely sure) that, when i pass a function to modeldata the directive is not being capable of setting the returned object. The solution that i've coded based on the cmw answer is as follows:
Directive:
<directivetype1 itemdata="element" modeldata="getModelObject(data)"></directivetype1>
JS (coded in the Ctrl of the parent):
$scope.getModelObject = function(element){
var id = typeof element.metadata === 'undefined' ? null : element.metadata.id;
var subid = typeof element.metadata === 'undefined' ? null : element.metadata.subid;
var modelElement = null;
for (var i = 0; i < $scope.data.length; i += 1){
element = $scope.data[i];
if (modelElement.metadata.id === id && modelElement.metadata.subid === id) return element;
}
return null;
};
But when i try to work in the directive with modeldata i see "null" in FF/Chrome Console.
Any guideline to know what's happening?
Thanks.
EDIT 2:
I've added a version of my code here: http://plnkr.co/edit/xjp1l3PuWczdqYf5LP8q?p=preview. Sadly, in that Plunkr it works as expected but my code does not (i'm expecting to see the output of <h1>{{modeldata}}</h1>). I'm comparing the two versions to see any difference (note that i've included the same AngularJS version that i'm using in my project).

As you've pointed out, I believe the key is simply to make use of the id and subId properties on the meta object.
Something like this would probably work...
<div ng-repeat="element in elementList | customFilter:itemsType1">
<div class="line"></div>
<div class="form-group">
<directivetype1 itemdata="element" modeldata="modelDataFor(element)">
</directivetype1>
</div>
</div>
Then, in your controller, define a function like the following...
$scope.modelDataFor = function (element) {
var id = element.meta.id,
subId = element.meta.subId,
curr;
for (var i = 0; i < $scope.data.length; i += 1) {
curr = $scope.data[i];
if (curr.meta.id === id && curr.meta.subId === subId) {
return curr;
}
}
return null;
}
This seems like the most natural place to pluck out the relative data model object to pass into your nested directives.

Reading JSON Response in AngularJS

I have an angular controller called productImages which returns following JSON data:
{
"Product_1":[
{ "image_id":"12469",
"name":"My Product 1 - Variety 1",
"url":"\/\/mystorefront.net\/120\/small\/1911791794.jpg"
},
{
"image_id":"12470",
"name":"My Product 1 - Variety 2",
"url":"\/\/drfuittf5cya9.cloudfront.net\/121\/small\/1911802897.jpg"
}
],
"Product_2":[
{ "image_id":"122349",
"name":"My Product 2 - Variety 1",
"url":"\/\/drfuittf5cya9.cloudfront.net\/122\/small\/1911791794.jpg"
},
{
"image_id":"123470",
"name":"191123897.jpg",
"name":"My Product 2 - Variety 2",
"url":"\/\/drfuittf5cya9.cloudfront.net\/123\/small\/1911802897.jpg"
}
]
}
In my angular code I have written:
<div ng-controller="productImages">
<div ng-repeat="product in products">
{{product.image_id}}
</div>
</div>
When I run this the ng-repeat div gets repeated twice but product.image_id does not show up. If I do {{product}} instead or {{product.image_id}} I get the whole JSON printed.
How do I print this JSON in angularJS? Also, How do I get Product_1, Product_2 printed?

Your object Product_1 seems to be an array which in turn has images.
I think you will need nested for loops to display the images

You try to repeat over the properties of an object.
Accourding to the documentation here you'll have to use
<div ng-repeat="(key, value) in myObj"> ... </div>
each property of your object is an array so I think that something like:
<div ng-repeat="(key, value) in myObj">
<div ng-repeat= "product in value">
{{product.image_id"}}
</div>
</div>
should do the trick

Use two loops for this as:
angular.module('app',[]).controller('mainCtrl', function($scope){
$scope.products = {
"Product_1":[
{ "image_id":"12469",
"name":"My Product 1 - Variety 1",
"url":"\/\/mystorefront.net\/120\/small\/1911791794.jpg"
},
{
"image_id":"12470",
"name":"My Product 1 - Variety 2",
"url":"\/\/drfuittf5cya9.cloudfront.net\/121\/small\/1911802897.jpg"
}
],
"Product_2":[
{ "image_id":"122349",
"name":"My Product 2 - Variety 1",
"url":"\/\/drfuittf5cya9.cloudfront.net\/122\/small\/1911791794.jpg"
},
{
"image_id":"123470",
"name":"191123897.jpg",
"name":"My Product 2 - Variety 2",
"url":"\/\/drfuittf5cya9.cloudfront.net\/123\/small\/1911802897.jpg"
}
]
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='mainCtrl'>
<div ng-repeat="product in products">
<div ng-repeat="item in product">
{{item.image_id}}
</div>
<hr/>
</div>
</div>

Your JSON syntax is incorrect. If I understand correctly, each of our product has several varieties. It should be as follows:
{
"Products": [
{
"Product": [
{
"image_id": "12469",
"name": "My Product 1 - Variety 1",
"url": "//mystorefront.net/120/small/1911791794.jpg"
},
{
"image_id": "12470",
"name": "My Product 1 - Variety 2",
"url": "//drfuittf5cya9.cloudfront.net/121/small/1911802897.jpg"
}
]
},
{
"Product": [
{
"image_id": "122349",
"name": "My Product 2 - Variety 1",
"url": "//drfuittf5cya9.cloudfront.net/122/small/1911791794.jpg"
},
{
"image_id": "123470",
"name": "My Product 2 - Variety 2",
"url": "//drfuittf5cya9.cloudfront.net/123/small/1911802897.jpg"
}
]
}
]
}
And you HTML should be:
<div ng-controller= "Products">
<div ng-repeat= "for oneproduct in Products">
<div ng-repeat="for variety in oneproduct">
{{variety.image_id"}}
</div>
</div>
</div>
Not tested this though...

You can't iterate on the object productImages because it's not an array.
You can iterate the objects "Product_1" and "Product_2".
If you want iterate the object productImage you have to write it ad an array.

Readout JSON data in different divs

I am absolutely new at this. The plan is to show the data from the JSON file in different divs, because I want to style the divs in different ways.
1) First I want to read out a single line of my JSON, for example:
The HTML:
<div>
<div data-filter="EX_01_Dates"></div>
<div data-filter="EX_01_Name"></div>
<div data-filter="EX_01_City"></div>
</div>
And the JSON:
var data={"events":[
{
"id": EX_01,
"Name":"Event 1",
"City":"City 1",
"Dates":"13-09-2015",
},
]}
2) Second, I want this with different data blocks.
var data={"events":[
{
"id": EX_01,
"Name":"Event 1",
"City":"City 1",
"Dates":"13-09-2015",
},
{
"id": EX_02,
"Name":"Event 2",
"City":"City 2",
"Dates":"15-09-2015",
}
]}
Thats my jsfiddle. Hope someone can help me?

Something like this?
var data={"events":[
{"id": "EX_01", "Name":"Event 1", "City":"City 1", "Dates":"13-09-2015" },
{"id": "EX_02", "Name":"Event 2", "City":"City 2", "Dates":"15-09-2015" }
]};
data["events"].forEach(function(elem) {
for(var key in elem) {
var filter = [elem["id"], "_", key].join("");
$("div[data-filter='" + filter + "']").text(elem[key]);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div data-filter="EX_01_Dates"></div>
<div data-filter="EX_01_Name"></div>
<div data-filter="EX_01_City"></div>
</div>
<div>
<div data-filter="EX_02_Dates"></div>
<div data-filter="EX_02_Name"></div>
<div data-filter="EX_02_City"></div>
</div>
Read about Array forEach and for...in to learn how they work!

I highly recommend you use jsrender for this purpose, there are alot of great articles about it out there. I found the article below very helpful if you dont understand http://www.jsviews.com hope this helps..
https://msdn.microsoft.com/en-us/magazine/hh882454.aspx

First of all it is not clear what exactly you are doing here.
<div id="EX_01">
<div data-filter="EX_01_Dates"></div>
<div data-filter="EX_01_Name"></div>
<div data-filter="EX_01_City"></div>
</div>
<div id="EX_02">
<div data-filter="EX_02_Dates"></div>
<div data-filter="EX_02_Name"></div>
<div data-filter="EX_02_City"></div>
</div>
your javascript code which is now jquery added
var data={"events":[
{
"id": EX_01,
"Name":"Event 1",
"City":"City 1",
"Dates":"13-09-2015",
},
{
"id": EX_02,
"Name":"Event 2",
"City":"City 2",
"Dates":"15-09-2015",
}
]}
$("#EX_01").find("div:nth-child(1)").html(data.events[0].Dates);
$("#EX_01").find("div:nth-child(2)").html(data.events[0].Name);
$("#EX_01").find("div:nth-child(3)").html(data.events[0].City);
$("#EX_02").find("div:nth-child(1)").html(data.events[1].Dates);
$("#EX_02").find("div:nth-child(2)").html(data.events[1].Name);
$("#EX_02").find("div:nth-child(3)").html(data.events[1].City);
you can work around more for dynamic creation or selection of html elements