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>;

Get a JSON object key as a link

I am trying to get a json as a json format, but the keys as a link.
So that, Whenever i click on the link, I should get the output as key with an index
example
[
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio
reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et
cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt
rem eveniet architecto"
},
{
"userId": 1,
"id": 2,
"title": "qui est esse",
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor
beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil
molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi
nulla"
}
]
When i click on userId where id is 1, I should get the otput as 0.userId
Can anyone suggest me a way to get a proper solution for my problem.

okay if you are not using jquery try this out
url = Object.keys(jsonObject).map(function(someparameter) {
return encodeURIComponent(someparameter) + '=' + encodeURIComponent(jsonBoject[someparameter])
}).join('&')

I think you are looking something like this https://json-ld.org/

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>

how to put image into a page from a json object?

I'm writing a news site and with all the news stored in json files. Here's an example of the json Schema:
{
title: "lorem ipsum",
body: "Qui Quo Omnis Nulla Porro Quidem Quisquam Consequuntur Neque Expedita Iu [image1 goes here]. Nditiis Mollitia Facere Adipisci Fugiat Minus Vero Nostrum Sint Se. I Et Culpa Vitae Quos Ullam Optio Est Debitis Reprehenderit Alia. Dolorem Necessitatibus Accusantium Voluptatibus Maiores Dolores Quae Velit Te. Tur Non Officia Assumenda Obcaecati Veritatis Minima Dicta Im [image 2 goes here]",
author: "author",
images: ["path/to/image1","path/to/image2]
}
How can i make images appear in the right position?
(i'm using nunjucks templating engine if it's usefull for the answer)

I think you should change your json schema if possible.
{
"title": "Lorem Ipsum",
"bodies": [
{
"text": "Qui Quo Omnis Nulla Porro Quidem Quisquam Consequuntur Neque Expedita Iu",
"image": "path/to/image1"
},
{
"text": "Blah blah blah",
"image": "path/to/image2"
}
],
"author": "author"
}
Then you will know that the image should always go after the text. You can even add an empty text to begin with an image.
Edit: Just for fun, I put together a short script that creates an array with the news' text and the image that goes after. I still think you should instead update your schema.
var myNew = {...}
var magic = myNew.body.split(/\[.*?\]/).filter(n=>n);
var whatsthis = magic.reduce((fullArray,text, index)=>{
fullArray.push(text);
fullArray.push(test.images[index]);
return fullArray;
}, []);
console.log(whatsthis);
This outputs ["Qui Quo Omnis Nulla Porro Quidem Quisquam Consequuntur Neque Expedita Iu ", "path/to/image1", ". Nditiis Mollitia Facere Adipisci Fugiat Minus Ve…ia Assumenda Obcaecati Veritatis Minima Dicta Im ", "path/to/image2"].
https://jsfiddle.net/Lfpab33y/
If it makes things easier, you can change
fullArray.push(text);
fullArray.push(test.images[index]);
into
fullArray.push({type:"text", content:text});
fullArray.push({type:"imagePath", content:test.images[index]});
so you know whether it's text or imagePath and do something about it in your template.