I am new to both Angular and Firebase. Still trying to learn the ropes so I am hoping really bad that someone can help me out. I have tried looking through documentations and watching videos but honestly, I still don't get it.
I was able to retrieve my data from firebase using Angular's HTTPCLIENT service. However, it is in the below format:
{
"test01": {
"title": "News",
"descr": "Amazing!"
}
},
"test02": {
"title": "Panda",
"descr": "Amazing!"
}
}
But the problem is that I want to use ngFor to loop through my data so that it will display all the titles and descriptions (regardless of the id) in my homepage. Is there anyway to restructure the data I retrieved into the below format instead so I can loop through it and display the data as it is?
favItems = [{id: "test01", title: "News", descr: "Amazing!" }, {id: "test02", title....}]
Thank you!
You can use Object.keys - docs:
let obj = {
"test01": {
"title": "News",
"descr": "Amazing!"
},
"test02": {
"title": "Panda",
"descr": "Amazing!"
}
}
let arr = Object.keys(obj).map((k) => {
return { ...obj[k],
id: k
}
})
console.log(arr)
Related
I'm struggling to properly organize my Redux Store and my React components to properly deal with two-way nested data.
Suppose I have a post model and a user model. Let's take an abstracted example:
const user = {
"id": "1",
"name": "user 1",
"posts": [...] // list of post objects
}
const post = {
"id": "1",
"title": "post 1",
"user": user
}
The problem is that I cannot load this data like this because it will cause an infinite recursion error. I have to omit either the posts from the user or omit the user from the posts.
Here's what I ideally need:
I need to have a single post page that displays the post user with all his info (id, name) and the user's list of posts with the post info (id, title) in the same screen all at once.
I use normalizr to normalize the data.
How would I go about loading the data?
As per Redux docs (https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape) you should avoid nesting objects.
The solution here would be to treat the data like it is a database. That means that you should store ids instead of objects.
In your example:
const user = {
"id": "1",
"name": "user 1",
"posts": ["1", "2", ...] // list of post objects IDs
}
const post = {
"id": "1",
"title": "post 1",
"userId": "1"
}
Normally you would only save post_ids in the user, and user_id in the post. normalizer schemas can be configured to deal with those relations.
What is the incentive of adding the user key in post? Having shared data within two related data structures is redundant. The only data you should have in post is the relevant data and the minimum amount of information you need to properly associate the user with his/her posts. I would imagine you would want to have the string name of the user in post, or an id number of the user inside each post object
const user = {
"id": "1",
"name": "user 1",
"posts": [...] // list of post objects
}
const post = {
"id": "1",
"title": "post 1",
"user": "user 1"
}
EDIT:
From your comment, I would make an array of all users. But with a post key that is only the ids of posts that are associated with that user. And another array of only posts. As before, have an identifier to correlate the two. After that, parse your frontend on an as needed basis.
const users = [
{ name: 'andrew', id: 10, postIds: [1,3,23,30]},
// ...more users
]
const posts = [
{ name: 'a post', id: 23, userId: 10 }
{ name: 'another post', id: 3, userId: 10 }
{ name: 'a third post', id: 2, userId: 3 }
// ...more posts
]
Technically, userId is optional, but it can be a nice-to-have to be able to identify a user when inspecting individual posts
EDIT:
Wow, I just scrolled down and saw nordus has the exact same proposal, before me. While it's nice to see we're on the same page, make sure he/she gets credit if you like the idea ;).
I am looking out methods of Extracting only portion of JSON document with REST API search call in MarkLogic using JavaScript or XQuery.
I have tried using query options of re extract-document-data but was not successful. Tried checking my extract path using CTS.validextract path but that function was not recognised in Marklogic 9.0-1
Do I have to using specific search options like constraints or structured query.
Could you please help out? TIA.
I have below such sample document
{
"GenreType": {
"Name": "GenreType",
"LongName": "Genre Complex",
"AttributeDataType": "String",
"GenreType Instance Record": [
{
"Name": "GenreType Instance Record",
"Action": "NoChange",
"TitleGenre": [
"Test1"
],
"GenreL": [
"Test1"
],
"GenreSource": [
"ABC"
],
"GenreT": [
"Test1"
]
},
{
"Name": "GenreType Instance Record",
"Action": "NoChange",
"TitleGenre": [
"Test2"
],
"GenreL": [
"Test2"
],
"GenreSource": [
"PQR"
],
"GenreT": [
"Test2"
]
}
]
}
}
in which i need to search a document with attribute "TitleGenre" WHERE GenreSource = “ABC” in the GenreType complex attribute. It's an array in json document.
I was using the search option as below, (writing search option in XML, but searching the in json documents)
<extract-path>/GenreType/"GenreType Instance Record"[#GenreSource="ABC"]</extract-path>
I am still facing the issues. If possible could you please let me know how json documents can be searched for such specific requirement? #Wagner Michael
You can extract document data by using the extract-document-data option.
xquery version "1.0-ml";
let $doc := object-node {
"GenreType": object-node {
"Name": "GenreType",
"LongName": "Genre Complex",
"AttributeDataType": "String",
"GenreType-Instance-Record": array-node {
object-node {
"TitleGenre": array-node {
"Test1"
},
"GenreSource": array-node {
"ABC"
}
},
object-node {
"TitleGenre": array-node {
"Test2"
},
"GenreSource": array-node {
"PQR"
}
}}
}
}
return xdmp:document-insert("test.xml", $doc);
import module namespace search = "http://marklogic.com/appservices/search"
at "/MarkLogic/appservices/search/search.xqy";
search:search(
"Genre Complex",
<options xmlns="http://marklogic.com/appservices/search">
<extract-document-data>
<extract-path>/GenreType/GenreType-Instance-Record[GenreSource = "ABC"]</extract-path>
</extract-document-data>
</options>
)
In this case /GenreType/GenreType-Instance-Record is the xpath to the extracted element.
Relating to your comment, i also added a predicate [GenreSource = "ABC"]. This way only GenreType-Instance-Record which have a GenreSource of "ABC" are being extracted!
Result:
....
<search:extracted kind="array">[{"GenreType-Instance-Record":{"TitleGenre":["Test1"], "GenreSource":["ABC"]}}]
</search:extracted>
....
Note:
You can add multiple <search:extract-path> elements!
I had to change the name of GenreType Instance Record to GenreType-Instance-Record. I am not sure if you can have property names with whitespaces and access them with xpath. I couldn't get it working this way.
Please post your search options, if this does not work for you.
Edit: Added a predicate to the extract-path.
Thank you so much Wagner, for your prompt trials. Helped me look out for accurate solution to my problem as of now. I have used below extract path, as i could not modify the names in documents. /GenreType/array-node("GenreType Instance Record")/object-node()/TitleGenre[following-sibling::GenreSource="ABC"]
I am trying to create a status list from two separate JSON sources. The list will display general info from the first source, and show a status color based on the number of people in the second source.
The first source contains general data that will not be changing much (i.e. feed name, version, description) and likely called only two times a day. See code example below:
/metadata
{
data: [
{
"feedName": "Feed 1",
"version": "000001",
"location": "1234 Main Street, New York, New York"
"description": "This feed gives information on the number of people in Building A at a given time."
},
{
"feedName": "Feed 2",
"version": "000001",
"location": "1000 Broad Street, New York, New York"
"description": "This feed gives information on the number of people in Building B at a given time."
},
{
"feedName": "Feed 3",
"version": "000001",
"location": "1111 Governor Street, New York, New York"
"description": "This feed gives information on the number of people in Building C at a given time."
}
]
}
The second source contains data on each feed that will change very often. This source will be called more frequently; about every hour.
/customers
{
data: [
{
"metricName": "Feed 1",
"customerNumber": "10",
"time": "2012-10-03 15:30:00"
},
{
"metricName": "Feed 2",
"customerNumber": "5",
"time": "2012-10-03 15:30:00"
},
{
"metricName": "Feed 3",
"customerNumber": "15",
"time": "2012-10-03 15:30:00"
}
]
}
Where metricName and feedName are actually the same values.
I've only dealt with one JSON source per list before, where my Javascript would look like this:
$scope.metadataList = function(){
$http.get('/metadata')
.then(function(result) {
$scope.metadata = result.data.data;
});
}
and corresponding HTML would look like this:
<ul ng-repeat = "data in metadata | orderBy: ['feedName']">
<li> {{data.feedName}}, {{data.version}} </li>
</ul>
So my question is, how to I make async calls to each data source? How do I match them up to populate my list with both the metadata information and the customer information?
Update
Before anyone asks, I did try ng-repeat = "data in metadata.concat(customers)" where "customers" defines the second data source, (as shown in Ng-repeat datas from 2 json Angular) but that only appends to the end of the list ... not quite what I was going for.
Thank you in advance.
First, you can call the all() method from the $q service to resolve multiple promises, in that case the two requests.
// both promises calling your api to get the jsons
var promises = {
metadataPromise: $http.get('/echo/json/', {}),
customersPromise: $http.get('/echo/json/', {})
};
$q.all(promises).then(function(response) {
metadata = response.metadataPromise;
customers = response.customersPromise;
joinMetadataAndCustomers();
}, function(response) {
// in case any promise is rejected
});
After that, you check for every feedName the metricName which matches it using filter. In the end, you can merge both with angular.merge.
var joinMetadataAndCustomers = function() {
metadata.data.forEach(function(mtd) {
customers.data.filter(function(customer) {
return customer.metricName === mtd.feedName;
}).forEach(function(customer) {
$ctrl.metadataAndCustomers.push(angular.merge({}, mtd, customer));
});
});
}
Not sure if it's the best approach, but it works. Of course can be improved according to your needs. For example, if you only have one single match, the last forEach can be avoided.
Fiddle with an example: https://jsfiddle.net/virgilioafonsojr/tv1ujet0/
I hope it helps.
I'm currently trying to build a AngularJS app with a complex data structure.
The data source is an array of people with languages and skill level.
I need to filter those people by language skill, to do so I tried to build a select with the languages and another select with the skill levels, but i failed.
Here is a plnkr of my effords
Maybe there is also a simpler/better way to structure the data array ($scope.people)
Take a look at this
Working Demo
Html
<div ng-app='myApp' ng-controller="MainCtrl">LANGUAGES:
<select ng-model="selectLang" ng-options="lang as lang for lang in languages"></select>
<br>SKILL:
<select ng-model="selectSkill" ng-options="skill as skill for skill in skills"></select>
<br>
<button ng-click="getPeople()">Submit</button>
<br>PEOPLE:
<select ng-model="selectPeoples" ng-options="people as people for people in peoples"></select>
</div>
script
var app = angular.module('myApp', []);
app.controller('MainCtrl', function ($scope) {
$scope.people = [{
"name": "Jane Doe",
"gender": "Female",
"languages": [{
"lang": "German",
"skill": "Good"
}, {
"lang": "English",
"skill": "Very Good"
}]
}, {
"name": "John Doe",
"gender": "Male",
"languages": [{
"lang": "French",
"skill": "Good"
}, {
"lang": "English",
"skill": "Very Good"
}]
}];
$scope.languages = [];
$scope.skills = [];
angular.forEach($scope.people, function (peopleValue, peopleKey) {
angular.forEach(peopleValue.languages, function (langValue, langKey) {
$scope.languages.push(langValue.lang);
$scope.skills.push(langValue.skill);
});
});
$scope.languages = _.uniq($scope.languages);
$scope.skills = _.uniq($scope.skills);
$scope.getPeople = function () {
$scope.peoples = [];
angular.forEach($scope.people, function (peopleValue, peopleKey) {
angular.forEach(peopleValue.languages, function (langValue, langKey) {
if (langValue.lang === $scope.selectLang && langValue.skill === $scope.selectSkill) {
$scope.peoples.push(peopleValue.name);
}
});
});
}
});
Your problem is that you're not actually looping through each person's languages array in your ng-options directive. And I don't believe such a thing is actually possible given how your data is structured. I don't think you can loop through nested arrays (or at least I'm not aware of any ng-options syntax that would allow for such a thing.
So to make things easier, I would suggest doing the following in your controller:
$scope.langs = [];
angular.forEach($scope.people, function(person){
angular.forEach(person.languages, function(lang){
$scope.langs.push({
lang: lang.lang,
skill: lang.skill,
name: person.name,
gender: person.gender
});
});
});
This will give you an array that will allow you to filter using ng-options with the `orderBy' filter.
New to angular, and it is awesome.
One thing I am having a brain fart on is parsing a JSON feed that contains namespaces:
Example from JSON feed:
"title": {
"label": "Fuse"
},
"im:name": {
"label": "John Doe"
},
"im:image": [ {
"label": "70x70",
"attributes": {
"height": "55"
}
}, {
"label": "80x80",
"attributes": {
"height": "60",
"im:link": "www.google.com"
}
}, {
"label": "90x90",
"attributes": {
"height": "170"m
"im:link": "www.yahoo.com"
}
}],
I can successfully parse items without namespaces fine like so:
<p ng-repeat="item in results.feed['entry']">
title: {{item.title['label']}}
</p>
But cannot get the items with namespaces to display using:
name: {{item.['im:name']['label']}}
OR
name: {{item.['im-name']['label']}}
OR
name: {{item.['im->name']['label']}}
Since being a newbie, I thought something like this would work:
<div xmlns:im="http://www.aol.com" id="im-app" im-app="im">
<p ng-repeat="item in results.feed['entry']">
…namespace code in here…
</p>
</div>
But that did not help.
Extra bonus question: What if a namespace contains attributes, that also contain namespaces?
Any help would greatly be appreciated.
Thanks!
Roc.
Although Craig answered the question,
This is also for reference for others:
If you want to target a specific key inside of an object set:
"im:image":[
{
"label":google",
"attributes":{
"height":"55"
}
},
{
"label":"yahoo",
"attributes":{
"height":"60"
}
},
{
"label":"aol",
"attributes":{
"height":"170"
}
}
{{item['im:image'][2]['label']}}
Will get the 3rd key in that set.
Thanks.
Get rid of the dot after item
Working example: http://jsfiddle.net/bonza_labs/Kc2uk/
You access the properties exactly the same way as straight javascript (because angular is basically eval()-ing the expression as javascript**). item.['foo'] is not valid javascript. You are correct in using square-bracket notation as my:name is not valid for dot-notation.
valid:
item.foo
item['foo']
with non-standard property names:
item['foo:bar']
item['foo-bar']
and in your case:
{{item['im:name']['label']}}
** or close enough for understanding this solution