theres what i've logged click on this link ok im now getting this objects with google data i want to dig in to username and id and be able to bind it. how do i do that?
d {$$conf: Object, $id: "google:107950469269631469408", $priority: null}
$$conf
:
Object
$id
:
"google:107950469269631469408"
$priority
:
null
-KK87pj5tW9EL8hL9To7
:
Object
id
:
"google:107950469269631469408"
name
:
"muzi ngobe"
__proto__
:
Object
How do i achieve this the fetching of object in objects?
var ref = new Firebase("https://tasksbylima.firebaseio.com/");
$scope.profile = $firebaseObject(ref.child('users').child(authData.uid));
console.log($scope.profile);
theres my firebase Json tree
{
"users" : {
"google:107950469269631469408" : {
"-KK87pj5tW9EL8hL9To7" : {
"id" : "google:107950469269631469408",
"name" : "muzi ngobe"
},
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="list card">
<div class="item item-divider">{{profile.name}}</div>
<div class="item item-body">
<form class="list">
<ion-checkbox>{{profile.name}}</ion-checkbox>
</form>
</div>
</div>
You can unwrap your answer object by accessing to the first property of object:
var ref = new Firebase("https://tasksbylima.firebaseio.com/");
var response = $firebaseObject(ref.child('users').child(authData.uid));
var users = response[Object.keys(response)[0]];
var google = users[Object.keys(users)[0]];
var key = google[Object.keys(google)[0]];
console.log(key);
Related
I want to make a table like this:
I got the values from the apex in js and it looks like this:
#track data2 = [];
#track data = [];
testClick() {
getExchangeRates({baseCurrency : this.defaultCurrency, dateFrom : this.dateFrom, dateTo : this.dateTo, value : this.defaultValue})
.then(resultJSON => {
let result = JSON.parse(resultJSON);
console.log(result);
console.log('////////');
console.log(result.rates);
let recordsByDates = result.rates;
for (var key in recordsByDates) {
console.log(key);
let record = {
date : key,
USD : recordsByDates[key].USD,
CAD : recordsByDates[key].CAD,
EUR : recordsByDates[key].EUR,
GBP : recordsByDates[key].GBP
}
this.data.push(record);
this.data2 = JSON.stringify(this.data);
}
console.log(this.data);
console.log(this.data2);
})
.catch(error => {
this.error = error;
console.log(error);
});
}
I tried to make a table, but something did not work out for me:
<template for:each={data2} for:item="dat">
<tr key={dat} onclick={testClick}>
<td data-label="data2">
{dat.key}
</td>
<td data-label="data2">
{dat.value}
</td>
</tr>
</template>
please tell me how to fix this
there are a couple of issues in the code:
not referring date value properly
should add a unique key, need in for:each
Here is the updated code
for (var key in recordsByDates) {
let record = {
key: key, // index of object can be used
date : recordsByDates[key].date,
USD : recordsByDates[key].USD,
CAD : recordsByDates[key].CAD,
EUR : recordsByDates[key].EUR,
GBP : recordsByDates[key].GBP
}
}
in HTML, you are referring wrong variable, it should data, in place of data2 (which is stringified).
no need to have table based tags for this type of structure, you can use div for better control.
in HTML file, it should be something like:
<template for:each={data} for:item="dat">
<div key={dat.key} onclick={testClick}>
<div class="date-wrap">
Date: {dat.date}
</div>
<div class="value-wrap">
USD: {dat.USD}
</div>
<div class="value-wrap">
CAD: {dat.CAD}
</div>
<div class="value-wrap">
EUR: {dat.EUR}
</div>
<div class="value-wrap">
GBP: {dat.GBP}
</div>
</div>
</template>
Moreover, you can create a nested array of objects inside the data variable which can help to make the structure more generic.
My object looks like:
var models = {
"Test1":{
"name":"Test1",
"members":
{
"T1":{//some more properties},
"T2":{//some more properties}
}
}
"Test2":{
"name":"Test2",
"members":
{
"T1":{//some more properties},
"T2":{//somemore properties}
}
}
}
Provided, user selects a property of object models, I want to display the members property of that selected property of models object in a drop down.
Eg. if user selects Test1 property, drop down should be populated with T1 and T2.
Any suggestions regarding question clarity are appreciated.
As you can't change your object, in your HTML you can have:
<div ng-repeat="model in models">
<div>
<p ng-click="toggleVisibility(model.name)">Name: {{model.name}}</p>
<div ng-repeat="member in model.members" ng-if="model.visibility">
<p>Member Name: {{getMemberName(model.name, $index)}} </p>
<p>Member properties: {{getMemberProperties(model.name, $index)}} </p>
</div>
</div>
</div>
And on your AngularJS Controller:
$scope.toggleVisibility = function (entry) {
$scope.models[entry].visibility = !$scope.models[entry].visibility;
};
$scope.getMemberName = function (entry, $index) {
return Object.keys($scope.models[entry].members)[$index];
};
$scope.getMemberProperties = function (entry, $index) {
var key = Object.keys($scope.models[entry].members)[$index];
return $scope.models[entry].members[key];
};
EDIT: Change the answer to fit the requirements.
I'm trying to show the categories of a service using AngularJS and firebase with the ng-if directive by testing if the entry exist in a table.
The tables are written in a denormalize way as recommended on the Firebase guideline.
- servicecat
- catid
- name : "Category Name"
- services
- srvid1 : true
- srvid2 : true
- srvid3 : true
- services
- srvid
- name: "Service Name"
- Details: "blabla"
- servicecat:
- catid1 : true
- catid2 : true
I am trying to show on a page of a service the categories of the table where the key of the service exists.
<li
ng-repeat="cat in servicecat"
ng-if="checkIfTrue(cat.$id, postSrv.$id)">
{{ cat.name }}<br>
</li>
So I'm trying to get the value a srvid ("true") and return it with the function checkIfTrue(catid,srvid).
$scope.checkIfTrue = function(catid,srvid) {
var ref = fb.child('servicecat/'+catid+'/services/'+srvid);
ref.once('value').then(function(snap){
return snap.exists();
});
}
I don't understand why the ng-if directive does not take the result of the function (which is true when the element exists in the table).
I can see that if I had a "return true;" at the end of the function (out of the ref.once('value') function), it is taken by the ng-if directive.
I was then trying to drop the result of the "once" function in a global variable that I could return at the end of the checkIfTrue function. It seems that the return on the "once" function is a "promise" that the ng-if directive can't read.
So I manage to fetch all categories and all services with the following factory. But when I try to get the selected categories of a specific sercices, It seems I miss something. I was trying to do it by joining two tables but It seems that I shouldn't do this method. Anyway I can't manage to solve this issue.
app.factory("getServices", ["$firebaseArray",
function($firebaseArray) {
var ref = firebase.database().ref().child("services");
return $firebaseArray(ref);
}
]);
app.factory("getServiceCategories", ["$firebaseArray",
function($firebaseArray) {
var ref = firebase.database().ref().child("servicecat");
return $firebaseArray(ref);
}
]);
app.controller("maincontroller", ["$scope","$firebaseArray","$firebaseObject",
"getServices","getServiceCategories",
function($scope,$firebaseArray,$firebaseObject, getServices, getServiceCategories)
{
// GET ALL SERVICES AND ALL CATEGORIES
$scope.services = getServices;
$scope.servicecat = getServiceCategories;
// SHOW & EDIT SERVICE DETAILS AND CATEGORIES
$scope.showDetailsService = function(srvid) {
var ref = fb.child('services/'+srvid);
$scope.selectSrvtoPost = $firebaseObject(ref);
var ref2 = fb.child('services/'+srvid+'/servicecat/');
$scope.selectSrvCatID = $firebaseArray(ref2);
var result = ref2.once('value', function(snap) {
snap.forEach(function(snap2) {
var catid = snap2.key;
var ref3 = fb.child('servicecat/'+catid);
ref3.once('value', function(snap3) {
var catname = snap3.val().name;
console.log("Srvid: "+srvid+" /// Id : "+catid+" /// Name : "+catname);
return snap3;
})
})
})
// ANOTHER TRY WITH $loaded()
var ref2 = fb.child('services/'+srvid+'/servicecat/');
$scope.listcat = $firebaseArray(ref2);
$scope.listcat.$loaded()
.then(function(snap) {
snap.forEach(function(snap2) {
var catid = snap2.key;
var ref3 = fb.child('servicecat/'+catid);
ref3.once('value', function(snap3) {
var catname = snap3.val().name;
console.log("Srvid: "+srvid+" /// Id : "+catid+" /// Name : "+catname);
return snap3;
})
})
})
}
)];
<div ng-controller="mainController">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--3-col">
<h3>List Services</h3>
<ul>
<li ng-repeat="service in services" ng-click="showDetailsService(service.$id)" class="clickable"><strong>{{ service.title }}</strong><br>{{ service.details }} <br><span class="idgrey">{{ service.$id }}</span></li>
</ul>
<h3>List All Categories</h3>
<li ng-repeat="cat in servicecat">{{ cat.name }}</li>
</div>
<div class="mdl-cell mdl-cell--3-col">
<h3>Post Full Service Selected </h3>
<p>
<strong>{{ selectedService.title }}</strong><br>
{{ selectedService.details }}
<h5>Id of Selected Categories</h5>
<ul>
<li ng-repeat="cat in selectedCategoriesId">{{ cat.$id }}</li>
</ul>
<hr>
<h5>Name of Selected Categories</h5>
<ul>
<li ng-repat="cat in selectedSrvCat">ID : {{ findcatscope.name }}</li>
</ul>
</div>
</div>
</div>
how do I bind a ko.observablsArray inside an array? I have the following viewModel:
function GetBegriffsKetteViewModel () {
var self = this;
self.Begriffsketten = ko.observableArray();
self.letzterBegriff = ko.observable(0);
self.aktuelleKette = -1;
}
var Begriffskette = function () {
var self = this;
var begriffe = new ko.observableArray();
var begriffBez = new ko.observableArray();
}
And in my html I have the following div:
<div id="ausgewaehlteKetten" data-bind="foreach : Begriffsketten">
<div class="row">
<div class="col-md-2" id="innerDivForEach" data-bind="foreach : begriffBez">
<span data-bind="text: $data" ></span>
</div>
</div>
</div>
If I run this code I get the following error:
ReferenceError: begriffBez is not defined
Is there a way to bind an array inside an array? What am I doing wrong?
Thanks
Thomas
First, you should not create knockout objects with new.
wrong: var x = new ko.observable();
correct: var x = ko.observable();
Second, if you want a variable to become an object property, you must assign it to the object instance (this - or, in your case, self).
Minor point: By convention, only constructors should start with a captital letter in JS. So since it's a regular property it would be begriffsketten with a lowercase b.
function BegriffsKetteList() {
var self = this;
self.begriffsketten = ko.observableArray();
self.letzterBegriff = ko.observable(0);
self.aktuelleKette = ko.observable(); // better use an observable here
}
function Begriffskette() {
var self = this;
self.begriffe = ko.observableArray();
self.begriffBez = ko.observableArray();
}
Once you do that, knockout can see the begriffBez and begriffe properties when it renders the view.
<div id="ausgewaehlteKetten" data-bind="foreach: begriffsketten">
<div class="row">
<div class="col-md-2" id="innerDivForEach" data-bind="foreach: begriffBez">
<span data-bind="text: $data" ></span>
</div>
</div>
</div>
I have object like this
{
{
"assetId" : "560",
"assetName" : "Testname",
"message" : "hai",
"timestamp" : 1452585984181
},
{
"message" : "haii",
"timestamp" : 1452585999592
},
{
"assetId" : "560",
"assetName" : "Testname",
"message" : "heloo",
"timestamp" : 1452586221604
}
}
show to this object i am using ng-repeat. My question is
I need to show all message using ng-repat comes under single assetName. but in this object two objects have same assetName and assetId. i need to show the messages both same objects but no need to repeatably show the assetName in top.
How can i only avoid the duplicate assetName and assetId. I used
<div class="container" data-ng-repeat="data in dataList | unique:'assetId'">
But it's completely removing the object. I need the message from all objects.
is it possible.Please help
This is the out put i am expecting.:
I think you should create your own custom filter
yourApp.filter('customuniqueFilter', function() {
return function( array, propertyThatMustBeUnique) {
var newArray = [];
for (i = 0; i++; i < array.length){
if ( notYetInYourArray ){ // I was too lazy to think about a way to do it ;-) feel free to update my answer
newArray.push(array[i]);
}
}
return newArray;
}
});
and then use it like this :
<div class="container" data-ng-repeat="data in dataList | customunique:'assetId'">
How about this:
<div class="container" data-ng-repeat="data in dataList | unique:'assetId'">
<span>{{data.assetId}}</span>
<div data-ng-repeat="data2 in dataList | filter:(data.assetId === undefined ? {assetId:'!'} : data.assetId)">
<span>{{data2.message}}</span>
</div>
</div>