We Keep Coding

How to store id's of different objects in below mentioned JSON Response in an Array

[
{
"postId": 1,
"id": 1,
"name": "id labore ex et quam laborum",
"email": "Eliseo#gardner.biz",
"body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
},
{
"postId": 1,
"id": 2,
"name": "quo vero reiciendis velit similique earum",
"email": "Jayne_Kuhic#sydney.com",
"body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"
},
{
"postId": 1,
"id": 3,
"name": "odio adipisci rerum aut animi",
"email": "Nikita#garfield.biz",
"body": "quia molestiae reprehenderit quasi aspernatur\naut expedita occaecati aliquam eveniet laudantium\nomnis quibusdam delectus saepe quia accusamus maiores nam est\ncum et ducimus et vero voluptates excepturi deleniti ratione"
},
{
"postId": 1,
"id": 4,
"name": "alias odio sit",
"email": "Lew#alysha.tv",
"body": "non et atque\noccaecati deserunt quas accusantium unde odit nobis qui voluptatem\nquia voluptas consequuntur itaque dolor\net qui rerum deleniti ut occaecati"
},
{
"postId": 1,
"id": 5,
"name": "vero eaque aliquid doloribus et culpa",
"email": "Hayden#althea.biz",
"body": "harum non quasi et ratione\ntempore iure ex voluptates in ratione\nharum architecto fugit inventore cupiditate\nvoluptates magni quo et"
}
]
[
{
"postId": 1,
"id": 1,
"name": "id labore ex et quam laborum",
"email": "Eliseo#gardner.biz",
"body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
},
{
"postId": 1,
"id": 2,
"name": "quo vero reiciendis velit similique earum",
"email": "Jayne_Kuhic#sydney.com",
"body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"
},
{
"postId": 1,
"id": 3,
"name": "odio adipisci rerum aut animi",
"email": "Nikita#garfield.biz",
"body": "quia molestiae reprehenderit quasi aspernatur\naut expedita occaecati aliquam eveniet laudantium\nomnis quibusdam delectus saepe quia accusamus maiores nam est\ncum et ducimus et vero voluptates excepturi deleniti ratione"
},
{
"postId": 1,
"id": 4,
"name": "alias odio sit",
"email": "Lew#alysha.tv",
"body": "non et atque\noccaecati deserunt quas accusantium unde odit nobis qui voluptatem\nquia voluptas consequuntur itaque dolor\net qui rerum deleniti ut occaecati"
},
{
"postId": 1,
"id": 5,
"name": "vero eaque aliquid doloribus et culpa",
"email": "Hayden#althea.biz",
"body": "harum non quasi et ratione\ntempore iure ex voluptates in ratione\nharum architecto fugit inventore cupiditate\nvoluptates magni quo et"
}
]

Please try this.
let ar = [
{
"postId": 1,
"id": 1,
"name": "id labore ex et quam laborum",
"email": "Eliseo#gardner.biz",
"body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
},
{
"postId": 1,
"id": 2,
"name": "quo vero reiciendis velit similique earum",
"email": "Jayne_Kuhic#sydney.com",
"body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"
},
{
"postId": 1,
"id": 3,
"name": "odio adipisci rerum aut animi",
"email": "Nikita#garfield.biz",
"body": "quia molestiae reprehenderit quasi aspernatur\naut expedita occaecati aliquam eveniet laudantium\nomnis quibusdam delectus saepe quia accusamus maiores nam est\ncum et ducimus et vero voluptates excepturi deleniti ratione"
},
{
"postId": 1,
"id": 4,
"name": "alias odio sit",
"email": "Lew#alysha.tv",
"body": "non et atque\noccaecati deserunt quas accusantium unde odit nobis qui voluptatem\nquia voluptas consequuntur itaque dolor\net qui rerum deleniti ut occaecati"
},
{
"postId": 1,
"id": 5,
"name": "vero eaque aliquid doloribus et culpa",
"email": "Hayden#althea.biz",
"body": "harum non quasi et ratione\ntempore iure ex voluptates in ratione\nharum architecto fugit inventore cupiditate\nvoluptates magni quo et"
}
]
res = ar.map(elem => elem.id)
console.log(res);

You can use Array#map with destructuring.
const res = arr.map(({id})=>id);
const arr = [
{
"postId": 1,
"id": 1,
"name": "id labore ex et quam laborum",
"email": "Eliseo#gardner.biz",
"body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
},
{
"postId": 1,
"id": 2,
"name": "quo vero reiciendis velit similique earum",
"email": "Jayne_Kuhic#sydney.com",
"body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"
},
{
"postId": 1,
"id": 3,
"name": "odio adipisci rerum aut animi",
"email": "Nikita#garfield.biz",
"body": "quia molestiae reprehenderit quasi aspernatur\naut expedita occaecati aliquam eveniet laudantium\nomnis quibusdam delectus saepe quia accusamus maiores nam est\ncum et ducimus et vero voluptates excepturi deleniti ratione"
},
{
"postId": 1,
"id": 4,
"name": "alias odio sit",
"email": "Lew#alysha.tv",
"body": "non et atque\noccaecati deserunt quas accusantium unde odit nobis qui voluptatem\nquia voluptas consequuntur itaque dolor\net qui rerum deleniti ut occaecati"
},
{
"postId": 1,
"id": 5,
"name": "vero eaque aliquid doloribus et culpa",
"email": "Hayden#althea.biz",
"body": "harum non quasi et ratione\ntempore iure ex voluptates in ratione\nharum architecto fugit inventore cupiditate\nvoluptates magni quo et"
}
];
const res = arr.map(({id})=>id);
console.log(res);

Merge two array of objects in Angular 8 if the item of second array contains the id of the first object of array

I am trying to merge two array of objects which the first array has a json file and the second the same but the second it holds the id of the first array of objects.
I am trying to add the second array of objects for each to the right item of the first array of objects.
As you can see the comments has an postId where it knows which post it belongs.
My json file it looks like this.
{
"posts": [
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto"
},
{
"userId": 1,
"id": 2,
"title": "qui est esse",
"body": "est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae ea dolores neque fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis qui aperiam non debitis possimus qui neque nisi nulla"
},
{
"userId": 1,
"id": 3,
"title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
"body": "et iusto sed quo iure voluptatem occaecati omnis eligendi aut ad voluptatem doloribus vel accusantium quis pariatur molestiae porro eius odio et labore et velit aut"
},
{
"userId": 1,
"id": 4,
"title": "eum et est occaecati",
"body": "ullam et saepe reiciendis voluptatem adipisci sit amet autem assumenda provident rerum culpa quis hic commodi nesciunt rem tenetur doloremque ipsam iure quis sunt voluptatem rerum illo velit"
},
{
"userId": 1,
"id": 5,
"title": "nesciunt quas odio",
"body": "repudiandae veniam quaerat sunt sed alias aut fugiat sit autem sed est voluptatem omnis possimus esse voluptatibus quis est aut tenetur dolor neque"
},
and the same json but with another API to get data.
"comments": [
{
"postId": 1,
"id": 1,
"name": "id labore ex et quam laborum",
"email": "Eliseo#gardner.biz",
"body": "laudantium enim quasi est quidem magnam voluptate ipsam eos tempora quo necessitatibus dolor quam autem quasi reiciendis et nam sapiente accusantium"
},
{
"postId": 1,
"id": 2,
"name": "quo vero reiciendis velit similique earum",
"email": "Jayne_Kuhic#sydney.com",
"body": "est natus enim nihil est dolore omnis voluptatem numquam et omnis occaecati quod ullam at voluptatem error expedita pariatur nihil sint nostrum voluptatem reiciendis et"
},
{
"postId": 1,
"id": 3,
"name": "odio adipisci rerum aut animi",
"email": "Just#do.it",
"body": "consectetur cumque impedit blanditiis non eveniet odio maxime blanditiis amet eius quis tempora quia autem rem a provident perspiciatis quia"
},
{
"postId": 1,
"id": 4,
"name": "alias odio sit",
"email": "Just#do.it",
"body": "impedit nostrum id quia aut est fuga est inventore vel eligendi explicabo quis consectetur aut occaecati repellat id natus quo est ut blanditiis quia ut vel ut maiores ea"
},
{
"postId": 1,
"id": 5,
"name": "vero eaque aliquid doloribus et culpa",
"email": "Hayden#althea.biz",
"body": "harum non quasi et ratione tempore iure ex voluptates in ratione harum architecto fugit inventore cupiditate voluptates magni quo et"
},
{
"postId": 2,
"id": 6,
"name": "et fugit eligendi deleniti quidem qui sint nihil autem",
"email": "Presley.Mueller#myrl.com",
"body": "doloribus at sed quis culpa deserunt consectetur qui praesentium accusamus fugiat dicta voluptatem rerum ut voluptate autem voluptatem repellendus aspernatur dolorem in"
},
{
"postId": 2,
"id": 7,
"name": "repellat consequatur praesentium vel minus molestias voluptatum",
"email": "Just#do.it",
"body": "maiores sed dolores similique labore et inventore et quasi temporibus esse sunt id et eos voluptatem aliquam aliquid ratione corporis molestiae mollitia quia et magnam dolor"
},
I have created a model and service to define data and to get data.
export class Post {
userId: number;
id: number;
title: string;
body: string;
}
import {Injectable} from '#angular/core';
import {HttpClient} from '#angular/common/http';
import {Observable} from 'rxjs';
#Injectable({
providedIn: 'root'
})
export class PostService {
private baseUrl = 'http://localhost:3000/posts';
constructor(private http: HttpClient) { }
getPost(id: number): Observable<any> {
return this.http.get(`${this.baseUrl}/${id}`);
}
getPostsList(): Observable<any> {
return this.http.get(`${this.baseUrl}`);
}
deletePost(id: number): Observable<any> {
return this.http.delete(`${this.baseUrl}/${id}`);
}
And this is the component
export class PostsListComponent implements OnInit {
public posts: Observable<Post[]>;
constructor(private postsService: PostService) { }
ngOnInit() {
this.comments$ = this.commentsService.getCommentsList();
this.posts = this.postsService.getPostsList();
this.groupedComments$ = this.comments$.pipe(
map(comments => lodash.groupBy(comments, 'postId'),
));
}
}
HTML code
<tr class="row" *ngFor="let post of posts | async">
<td class="col">{{post.title}}</td>
<td class="col-6">{{post.body}}</td>
<td class="col"><button (click)="deletePost(post.id)" class="btn btn-danger">Delete</button>
<button (click)="postDetails(post.id)" class="btn btn-info" style="margin-left: 10px">Details</button>
</td>
</tr>

I recommend to group the comments by postId, for example with lodash
this.groupedComments$ = this.comments$.pipe(
map(comments => lodash.groupBy(comments, 'postId')),
);
Then you can simply access this object in template
<tr class="row" *ngFor="let post of posts | async">
<td class="col">{{post.title}}</td>
<td class="col-6">{{post.body}}</td>
<td class="col">
<div *ngFor="let comment of groupedComments[post.id]">{{comment}}</div>
</td>
<td class="col"><button (click)="deletePost(post.id)" class="btn btn-danger">Delete</button>
<button (click)="postDetails(post.id)" class="btn btn-info" style="margin-left: 10px">Details</button>
</td>
</tr>
(async-pipe groupedComments$ anywhere before)
Edited:
interface Comment {
postId: number;
id: number;
name: string;
email: string;
body: string;
}
interface CommentGroup {
[key: number]: Comment[];
}
comments$: Observable<Comments[]>;
groupedComments$: Observable<CommentGroup>;

Accessing Javascript nested object returned by Laravel

For some reasons I can not access name from category object it says undefined
datas: [{
"id": 3,
"title": "public",
"created_at": "2019-01-12 02:37:28",
"updated_at": "2019-01-12 02:37:28",
"announcements": [{
"id": 3,
"user_id": 37,
"title": "Jumapili 13-01-2019",
"category_id": 13,
"body": "Saa 1030 asubuhi Consequuntur autem veniam ut voluptatibus. Qui impedit et ipsam est veritatis dolores. Voluptate quos harum eos nisi aut. Officiis nemo occaecati voluptas id modi. Sit omnis est autem aliquam sint quam libero.",
"end_date": "2019-01-12 02:56:15",
"live": 0,
"created_at": "2019-01-12 02:36:15",
"updated_at": "2019-01-12 02:36:15",
"pivot": {"viewer_id": 3, "viewable_id": 3, "viewable_type": "App\\Announcement"},
"category": {
"id": 13,
"user_id": 38,
"name": "et",
"created_at": "2019-01-12 02:36:15",
"updated_at": "2019-01-12 02:36:15"
}
}]
}]
when I try to access it on the Vue component I get undefined
div class="public" v-for="dataSet in datas">
<div v-for="announcements in dataSet">
<dl v-for="announcement in announcements">
<dt class="category"
v-text="announcement.category"></dt>
<h3 v-text="announcement.title"></h3>
<dd v-text="announcement.body"></dd>
</dl>
</div>
</div>
Please help, thanks in advance

You need to declare the vue component in this way:
var app = new Vue({
el: '#app', //the id of tour html
data: {
datas: [{
"id": 3,
"title": "public",
"created_at": "2019-01-12 02:37:28",
"updated_at": "2019-01-12 02:37:28",
"announcements": [{
"id": 3,
"user_id": 37,
"title": "Jumapili 13-01-2019",
"category_id": 13,
"body": "Saa 1030 asubuhi Consequuntur autem veniam ut voluptatibus. Qui impedit et ipsam est veritatis dolores. Voluptate quos harum eos nisi aut. Officiis nemo occaecati voluptas id modi. Sit omnis est autem aliquam sint quam libero.",
"end_date": "2019-01-12 02:56:15",
"live": 0,
"created_at": "2019-01-12 02:36:15",
"updated_at": "2019-01-12 02:36:15",
"pivot": {"viewer_id": 3, "viewable_id": 3, "viewable_type": "App\\Announcement"},
"category": {
"id": 13,
"user_id": 38,
"name": "et",
"created_at": "2019-01-12 02:36:15",
"updated_at": "2019-01-12 02:36:15"
}
}]
}]
}
})

AngularJS and parsing json with {status code 200..}

I have been trying to research this issue for a couple days now. Finally I have to ask.
I am trying to parse a json api that looks like this with Angular JS:
{
"status_code": 200,
"message": "success",
"data": [
{
"id": 2,
"title": "Rerum provident quisquam iste.",
"description": "Cumque quidem dolore nulla nostrum ipsa voluptas voluptatem. Tenetur rem maxime necessitatibus numquam quia minus ducimus quia. Reiciendis deserunt quis nihil omnis.",
"status": 1,
"created_at": "2018-02-20 21:45:50",
"updated_at": "2018-02-20 21:45:50"
},
{
"id": 3,
"title": "Nemo inventore voluptas quo cumque quod.",
"description": "Pariatur ipsam in velit officia et odit. Voluptatem consequatur recusandae voluptatum sint soluta praesentium incidunt magni.",
"status": 1,
"created_at": "2018-02-20 21:45:50",
"updated_at": "2018-02-20 21:45:50"
},
For the life of me I can't figure out how to do this. All I need is the data [array}.
I can parse this one just fine. When the array is in a property I can't find seem to get it to work with any of the documentation I find. I am sure I probably have gotten close but I am missing something. Also examples would be greatly appreciated.
[
{
"id": 2,
"title": "Rerum provident quisquam iste.",
"description": "Cumque quidem dolore nulla nostrum ipsa voluptas voluptatem. Tenetur rem maxime necessitatibus numquam quia minus ducimus quia. Reiciendis deserunt quis nihil omnis.",
"status": 1,
"created_at": "2018-02-20 21:45:50",
"updated_at": "2018-02-20 21:45:50"
},
{
"id": 3,
"title": "Nemo inventore voluptas quo cumque quod.",
"description": "Pariatur ipsam in velit officia et odit. Voluptatem consequatur recusandae voluptatum sint soluta praesentium incidunt magni.",
"status": 1,
"created_at": "2018-02-20 21:45:50",
"updated_at": "2018-02-20 21:45:50"
},
REVISION FOR CLARITY This is what I am currently doing.
HTML This is inside my ng-app of course and works with the standard array json.
<tr ng-repeat="survey in surveys">
<td width="100">Survey #{{survey.id}}</td>
<td>{{survey.title}}</td>
<td>{{survey.description}}</td>
<td>{{survey.created_at}}</td>
Angular JS
var app = angular.module('myApp', []);
app.controller('newsController', function($scope, $http){
$scope.sortType = 'id'; // set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.searchSurvey = ''; // set the default search/filter term
$http({method: 'GET', url: 'http://localhost:8080/survey/api'}).success(function(data)
{
$scope.surveys = data; // response data
});
});
This is not working with the json that oupts "{"status_code": 200, ...}"

I guess you are not accessing the right node of the array, try this
var app = angular.module('myApp', []);
app.controller('newsController', function($scope, $http){
$scope.sortType = 'id'; // set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.searchSurvey = ''; // set the default search/filter term
$http({method: 'GET', url: 'http://localhost:8080/survey/api'}).success(function(response)
{
$scope.surveys = response.data; // response data
});
});
This should work fine.

I am not sure how Angular JS differes from normal JS but this is how you can save this in JavaScript (just to give a working example).
Note: There was 1 major issue with the original JSON; you ended it with a comma (,) instead of adding the needed ]} to end the JSON.
var name_me = {
"status_code": 200,
"message": "success",
"data": [{
"id": 2,
"title": "Rerum provident quisquam iste.",
"description": "Cumque quidem dolore nulla nostrum ipsa voluptas voluptatem. Tenetur rem maxime necessitatibus numquam quia minus ducimus quia. Reiciendis deserunt quis nihil omnis.",
"status": 1,
"created_at": "2018-02-20 21:45:50",
"updated_at": "2018-02-20 21:45:50"
}, {
"id": 3,
"title": "Nemo inventore voluptas quo cumque quod.",
"description": "Pariatur ipsam in velit officia et odit. Voluptatem consequatur recusandae voluptatum sint soluta praesentium incidunt magni.",
"status": 1,
"created_at": "2018-02-20 21:45:50",
"updated_at": "2018-02-20 21:45:50"
}]
};
I hope this answered your question :)

How to loop through an array of objects and nested object in vue 2

I have an array that contains lots of objects and nested objects. I want to loop through the array using v-for in vue 2 app.
Here is what I get if I print the complete array
[
[
{
"id": 1,
"title": "Dolor assumenda officiis.",
"joke": "Esse quia non voluptas facere odio id. Aut animi vero qui corporis alias. Sunt omnis qui sunt est officia.",
"created_at": "Jun 22, 2017",
"creator": {
"data": {
"id": 1,
"name": "Dr. Sage Braun I",
"email": "theller#example.com",
"joined": "Jun 22, 2017"
}
}
},
{
"id": 2,
"title": "Quod occaecati doloribus amet voluptatem.",
"joke": "Voluptas nam harum voluptatem ipsam tempora rerum. Sunt quis nam debitis. Voluptatibus id dolor quia aut odio. Omnis saepe harum quibusdam in dolorem. Possimus voluptatem impedit sed inventore fugit omnis culpa.",
"created_at": "Jun 22, 2017",
"creator": {
"data": {
"id": 1,
"name": "Dr. Sage Braun I",
"email": "theller#example.com",
"joined": "Jun 22, 2017"
}
}
}
]
]
This is how I am trying to get the data but it does not load anything
<div class="row" v-for="u in users" >
{{ u.id}}
</div>

You seem to have a nested array. Try
<div class="row" v-for="u in users[0]" >
{{ u.id}}
</div>