Angular - Get array from JSON file - javascript

Sorry for the noob question but I am just getting started with Angular. I have this array declared in services.js:
var articles = [{
id: 1,
title: 'Article 1 Title',
intro: 'Article 1 Intro',
image: 'photo.jpg',
published: '27/10/2016',
text: 'Article 1 Text',
url: 'http://www.domain.com'
}, {
id: 2,
title: 'Article 2 Title',
intro: 'Article 2 Intro',
image: 'photo.jpg',
published: '27/10/2016',
text: 'Article 2 Text',
url: 'http://www.domain.com'
}];
Now that everything works fine in my Angular App I want to read this array from a JSON file that can be found, for example, at www.domain.com/articles.json and it looks like this:
{
"articles": [
{
"id": 1,
"title": "Article 1",
"intro": "Article 1 Intro",
"image": "image.png",
"published": "27/10/2016",
"text": "Article 1 Text",
"url": "http://www.domain.com/article-1"
},
{
"id": 2,
"title": "Article 2",
"intro": "Article 2 Intro",
"image": "image.png",
"published": "27/10/2016",
"text": "Article 2 Text",
"url": "http://www.domain.com/article-2"
}
]
}
How can I make this change?

To get the data of the file in your Angular app, you'll have to get the file's contents through an HTTP request. The easiest way to do this is by using the $http service.
Example (with relative url):
$http.get('/articles.json').then(function (response) {
var articles = response.data.articles;
// Do something with articles...
});
The callback function you're passing to the then method will be called when the HTTP request was successful. Note that your data will only be available in this callback function. Also don't forget to include a dependency to the $http service in your controller. ;)

Related

How to add object in Array of Objects using Node js in Mongodb?

I want to update my courseModules inside MasterCourse. In below JSON I have two Objects in courseModules. I want if moduleId exist in courseModules then update it else create a new object and return the courseModules with updated value.
I am using Node js and mondodb, mongoose. Not able to find how can I achieve this functionality.
JSON OR MONGODB Data:
"MasterCourse": [
{
"_id": "6392f2611e7d670eca9712fa",
"courseTitle": "My Course Title",
"awardURL": "award.png",
"courseModules": [
{
"moduleId": 0,
"moduleTitle": "Module Title 1",
"moduleDescription": "Module 1 description",
"totalSessions": 3,
"_id": "6392f2611e7d670eca97e12d"
},
{
"moduleId": 1,
"moduleTitle": "ModuleTitle 2",
"moduleDescription": "Module 2 description",
"totalSessions": 4,
"_id": "6392f2611e7d670eca9711wd"
},
],
}
]
Query want to perform:
{
"moduleId": 2,
"moduleTitle": "Module Title 3",
"moduleDescription": "Module 3 description",
"totalSessions": 8,
}
To add if item not exist -
masterCourse.updateOne({ "_id": req.params.id }, { $addToSet: { "courseModules": req.body } })
To update the value if exist -
masterCourse.updateOne({ "_id": req.params.id, "courseModules._id": ModuleID }, { $set: { "courseModules": req.body } })
These queries works for me, you can change the variable's name according to your data or requirement.

How can I merge results from a SQL query that returns multiple objects with the same id?

I'm building my first Node.js API.
In the endpoint '/posts' I have a return like this:
[
{
"POST_ID": 1,
"POST_TITLE": "Post N.1",
"POST_DESCRIPTION": "Description for Post N.1",
"POST_PHOTO_URL": "Url for image 1 of post 1"
},
{
"POST_ID": 1,
"POST_TITLE": "Post N.1",
"POST_DESCRIPTION": "Description for Post N.1",
"POST_PHOTO_URL": "Url for image 2 of post 1"
},
{
"POST_ID": 2,
"POST_TITLE": "Post N.2",
"POST_DESCRIPTION": "Description for Post N.2",
"POST_PHOTO_URL": "Url for image 1 of post 2"
},
{
"POST_ID": 2,
"POST_TITLE": "Post N.2",
"POST_DESCRIPTION": "Description for Post N.2",
"POST_PHOTO_URL": "Url for image 2 of post 2"
}
]
How can I merge the objects that have the same POST_ID, and make the POST_PHOTO_URL an array that contains all the URLS for the same post?
I want something like this:
responseObj = {
postId: 0,
postTitle: "Post N.1",
postDescription: "Description for Post N.1",
postImages: ['first_url', 'second_url'],
};
My SQL Query is: SELECT P.POST_ID, P.POST_TITLE, P.POST_DESCRIPTION, PI.POST_PHOTO_URL FROM POST P INNER JOIN POST_ITEMS AS PI ON P.POST_ID = PI.POST_ID
SQL SERVER.
I have no SQL SERVER to test this, but your desired output could probably be created with the following query.
SELECT P.POST_ID AS postId, P.POST_TITLE AS postTitle, P.POST_DESCRIPTION AS postDescription, oa.postImages
FROM POST P
OUTER APPLY(
SELECT PI.POST_PHOTO_URL AS postImages
FROM POST_ITEMS PI
WHERE PI.POST_ID = P.POST_ID
FOR JSON PATH
) oa
This should return an JSON representation of the desired POST_PHOTO_URLs.
You have to parse these to get your array.
result.forEach(r => {
r.postImages = JSON.parse(r.postImages);
})

How do I create working assertion versus JSON structure in Cypress?

I`m performing API automation testing and use GET request via Cypress and receive in the body the next structure:
{
my_list: [
{
code: "SAT-12-33-1",
description: "FLOOR 1",
payment: "128"
},
{
code: "SAT-12-33-2",
description: "FLOOR 2",
payment: "33"
},
{
code: "SAT-12-33-3",
description: "FLOOR 3",
payment: "311"
},
{
code: "SAT-12-33-4",
description: "FLOOR 4",
payment: "342"
},
{
....and so on. The full structure is 3400 records.
Could somebody give me an exact example, HOW to validate, that for instance this chunk (2 elements only) of code:
{
code: "SAT-12-33-2",
description: "FLOOR 2",
payment: "33"
},
{
code: "SAT-12-33-3",
description: "FLOOR 3",
payment: "311"
}
exactly matching on the received array of 3400 records. In my case, I will have 3 or 4 elements and I have to compare them/validate versus the big array.
I have tried expect(response.body).to.contain(), deep.equal(), .should('include') and more, but does not work to me.
Can someone provide the exact code that matching part of the structure above to the whole request body with the same structure? Again, I will have 2 or 3 elements and want to compare them together to a big array of 3400 elements?
Thank you very much!

Filter array by tag Vuejs

I'm currently working with vuejs and vuex. Here is my issue :
I have a store with all the data
state: {
articles: [{
title: "Article 1",
id: 1,
tag: "Tutorial"
}, {
title: "Article 2",
id: 2,
description: "Article 2",
tag: "Review"
}
}]
}
On the homepage, I want to display all kind of articles. On the tutorial page I only want to display articles with tag "tutorial", etc...
I'm using vue-router. I'm working with a computed property and a v-for so I can loop in the articles.
computed: {
articles() {
if (this.$route.meta.title == 'Tutorial') {
return this.$store.state.articles.tag == 'Tutorial'
}
if (this.$route.meta.title == 'Review') {
return this.$store.state.articles.tag == 'Review'
}
else if (this.$route.meta.title == 'Home') {
return this.$store.state.articles
}
}
}
I know that return this.$store.state.articles.tag == 'Tutorial' can't work, I'm looking for a way to code it correctly but I'm stuck!
Also, if you have a completely different and better way to do it, feel free to tell me!
Thank you for your time :)
As everybody mentioned you will need to use filter but as a pattern you should structure it with vuex getters
when you access properties from vuex state do not to access them directly but the correct thing is to use getters
Vuex store e.x.
const store = new Vuex.Store({
state: {
articles: [
{
title: "Article 1",
id: 1,
tag: "Tutorial"
},
{
title: "Article 2",
id: 2,
description: "Article 2",
tag: "Review"
}
]
},
getters: {
allArticles: state => {
return state.articles
},
tutorialArticles: state=>{
return state.articles.filter(article=>articles.tag=='Tutorial')
},
reviewArticles: state=>{
return state.articles.filter(articles=>articles.tag=='Review')
}
}
})
//end of vuex store
Then in your "all articles" component you use
computed:{
articles(){
return this.$store.getters.allArticles;
}
}
Then in your tutorial articles component you use
computed:{
articles(){
return this.$store.getters.tutorialArticles;
}
}
This is very important because if you need to change the code for the filter method you do it in one place and thats the purpose of using Vuex
Probably the best way is using .filter()
var obj = {state: {
articles: [{
title: "Article 1",
id: 1,
tag: "Tutorial"
}, {
title: "Article 2",
id: 2,
description: "Article 2",
tag: "Review"
}
]}}
var filtered = obj.state.articles.filter(o=>o.tag == "Tutorial");
console.log(filtered)

Kendo grid removes row, but does not call destory URL

I have a Kendo grid where I'm trying to add a delete feature. My datasource looks like:
var datasource = new kendo.data.DataSource({
transport: {
read: {
url: Router.action("Admin", "GetScansForMailItem", { mailItemIdnt: detailinit.data.MailItemIdnt }),
dataType: "json"
},
destroy: {
url: Router.action("Admin", "DeleteScan"),
type: "post"
}
},
model: {
id: "ScanIdnt",
fields: {
ScanIdnt: {editable: false, nullable: false}
}
},
pageSize: 5
});
I added the model part because this answer, however it made no difference.
The actual grid looks like:
.kendoGrid({
dataSource: datasource
scrollable: false,
sortable: true,
pageable: true,
editable: "inline",
columns: [{
field: "ScanIdnt",
title: "Scan ID"
}, {
field: "CreatedDate",
title: "Created",
template: "#= kendo.parseDate(CreatedDate, 'yyyy/MM/dd') #"
}, {
field: "ScanDocumentRelativePath",
title: "File Path",
template: "<a href='/CAMP/Admin/Download?scanIdnt=#= ScanIdnt #'>#= ScanDocumentRelativePath.substring(1) #</a>"
}, {
field: "ScanUserIdnt",
title: "Scanned By"
},{
command: "destroy",
title: ""
}]
});
Strangely, clicking the delete button removes the from the gird on the UI, but there is absolutely no Ajax call is made the the destroy URL. I can't seem to figure out why. Any ideas?
EDIT I'd like to point out that this grid is in fact a nested grid inside of another grid (like here) I discovered that the parent grid handles actually makes a call, but to the wrong function. For some reason, it clicking delete on a to level item calls the read function of the nested grid, however, the nested grids do nothing
Figured it out (sorta). While I think there were many issues with my code and the grid, It seems that when it came down to it, Kendo didn't like how I had my data.
In the Kendo docs related to hierarchical grids, the data for the child grid is stored in a field of the data for the parent. For example, given the following JSON:
"ParentItems": [
{
"Id": 12345 ,
"Name": "Test1",
"ChildItems": [
{"Id": 1, "Name": "Test"},
{"Id": 2, "Name": "Test"}
]
},
{
"Id": 12346 ,
"Name": "Test2",
"ChildItems": [
{"Id": 1, "Name": "Test"},
{"Id": 2, "Name": "Test"}
]
}
]
In the parent grid, each ParentItem would display it's respective ChildItems in the child grid.
On the other hand, I was pulling both data sets separately. Basically, I pulled the ParentItems like:
"ParentItems": [
{
"Id": 12345,
"Name" : "Test1"
},
{
"Id": 12346,
"Name" : "Test2"
}
]
And then made a second request to pull the child items, based on the parent's id.
"ChildItems": [
{"Id": 1, "Name": "Test", "ParentId": "12345"},
{"Id": 2, "Name": "Test", "ParentId": "12345"}
]
I was able to modify the server side code to serve the data like in the very first example and managed to get things working. The specific document that helped me out can be found here

Categories

Resources