Accessing Javascript nested object returned by Laravel

Accessing Javascript nested object returned by Laravel - javascript

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"
}
}]
}]
}
})

Related

how to display select option in loop using antd and react js

how to make select option in loop using antd and reacts js that show the option based on selected option before, example : second options are based on first selected option and ect.
i want to show loop select option.
the data like this
{
"0": {
"user_id": 2,
"referal": 0,
"parent_id": 2,
"name": "Bupati Bandung Barat",
"level": 1,
"unit": "Kantor Bupati",
"prov": "JAWA BARAT",
"kot": "KABUPATEN BANDUNG BARAT",
"order_date": "2023-02-08 03:45:35",
"deskripsi": null,
"paket": "Architecto laudantium et.",
"deskripsi_paket": "Eveniet similique aut expedita sed voluptatibus cumque voluptas blanditiis sint occaecati reiciendis fugiat vitae velit architecto cum ipsa.",
"child": [
{
"1": {
"user_id": 3,
"referal": 2,
"parent_id": 2,
"name": "DPPAPP Bandung Barat",
"level": 2,
"unit": "Kantor DPPAPP",
"prov": "JAWA BARAT",
"kot": "KABUPATEN BANDUNG BARAT",
"order_date": "2023-02-08 03:46:20",
"deskripsi": null,
"paket": "Fugit impedit.",
"deskripsi_paket": "Asperiores labore adipisci voluptatem alias architecto sint facere vel quia commodi eum asperiores omnis aspernatur necessitatibus dolorem sit dolor soluta sit laborum maxime enim suscipit sit.",
"child": [
{
"5": {
"user_id": 4,
"referal": 3,
"parent_id": 2,
"name": "UPT P2TP2A Bandung Barat",
"level": 3,
"unit": "Unit P2TP2A Bandung Barat",
"prov": "JAWA BARAT",
"kot": "KABUPATEN BANDUNG BARAT",
"order_date": "2023-02-08 03:47:02",
"deskripsi": null,
"paket": "Fugit impedit.",
"deskripsi_paket": "Asperiores labore adipisci voluptatem alias architecto sint facere vel quia commodi eum asperiores omnis aspernatur necessitatibus dolorem sit dolor soluta sit laborum maxime enim suscipit sit.",
"child": [
[],
[]
]
},
"6": {
"user_id": 4,
"referal": 3,
"parent_id": 2,
"name": "UPT P2TP2A Bandung Barat",
"level": 3,
"unit": "Unit P2TP2A Bandung Barat",
"prov": "JAWA BARAT",
"kot": "KABUPATEN BANDUNG BARAT",
"order_date": "2023-02-08 03:47:02",
"deskripsi": null,
"paket": "Fugit impedit.",
"deskripsi_paket": "Asperiores labore adipisci voluptatem alias architecto sint facere vel quia commodi eum asperiores omnis aspernatur necessitatibus dolorem sit dolor soluta sit laborum maxime enim suscipit sit.",
"child": [
[],
[]
]
},
"7": {
"user_id": 4,
"referal": 3,
"parent_id": 2,
"name": "UPT P2TP2A Bandung Barat",
"level": 3,
"unit": "Unit P2TP2A Bandung Barat",
"prov": "JAWA BARAT",
"kot": "KABUPATEN BANDUNG BARAT",
"order_date": "2023-02-08 03:47:02",
"deskripsi": null,
"paket": "Fugit impedit.",
"deskripsi_paket": "Asperiores labore adipisci voluptatem alias architecto sint facere vel quia commodi eum asperiores omnis aspernatur necessitatibus dolorem sit dolor soluta sit laborum maxime enim suscipit sit.",
"child": [
[],
[]
]
}
}
]
},
"2": {
"user_id": 5,
"referal": 2,
"parent_id": 2,
"name": "DINSOS Bandung Barat",
"level": 2,
"unit": "DINSOS Bandung Barat",
"prov": "JAWA BARAT",
"kot": "KABUPATEN BANDUNG BARAT",
"order_date": "2023-02-08 03:50:45",
"deskripsi": null,
"paket": "Rerum culpa.",
"deskripsi_paket": "Rerum inventore possimus qui voluptates dolorem rerum possimus magni qui aperiam hic et voluptatem labore quisquam qui aliquid rerum ullam.",
"child": [
[]
]
},
"3": {
"user_id": 3,
"referal": 2,
"parent_id": 2,
"name": "DPPAPP Bandung Barat",
"level": 2,
"unit": "Kantor DPPAPP",
"prov": "JAWA BARAT",
"kot": "KABUPATEN BANDUNG BARAT",
"order_date": "2023-02-08 03:46:20",
"deskripsi": null,
"paket": "Fugit impedit.",
"deskripsi_paket": "Asperiores labore adipisci voluptatem alias architecto sint facere vel quia commodi eum asperiores omnis aspernatur necessitatibus dolorem sit dolor soluta sit laborum maxime enim suscipit sit.",
"child": [
{
"5": {
"user_id": 4,
"referal": 3,
"parent_id": 2,
"name": "UPT P2TP2A Bandung Barat",
"level": 3,
"unit": "Unit P2TP2A Bandung Barat",
"prov": "JAWA BARAT",
"kot": "KABUPATEN BANDUNG BARAT",
"order_date": "2023-02-08 03:47:02",
"deskripsi": null,
"paket": "Fugit impedit.",
"deskripsi_paket": "Asperiores labore adipisci voluptatem alias architecto sint facere vel quia commodi eum asperiores omnis aspernatur necessitatibus dolorem sit dolor soluta sit laborum maxime enim suscipit sit.",
"child": [
[],
[]
]
},
"6": {
"user_id": 4,
"referal": 3,
"parent_id": 2,
"name": "UPT P2TP2A Bandung Barat",
"level": 3,
"unit": "Unit P2TP2A Bandung Barat",
"prov": "JAWA BARAT",
"kot": "KABUPATEN BANDUNG BARAT",
"order_date": "2023-02-08 03:47:02",
"deskripsi": null,
"paket": "Fugit impedit.",
"deskripsi_paket": "Asperiores labore adipisci voluptatem alias architecto sint facere vel quia commodi eum asperiores omnis aspernatur necessitatibus dolorem sit dolor soluta sit laborum maxime enim suscipit sit.",
"child": [
[],
[]
]
},
"7": {
"user_id": 4,
"referal": 3,
"parent_id": 2,
"name": "UPT P2TP2A Bandung Barat",
"level": 3,
"unit": "Unit P2TP2A Bandung Barat",
"prov": "JAWA BARAT",
"kot": "KABUPATEN BANDUNG BARAT",
"order_date": "2023-02-08 03:47:02",
"deskripsi": null,
"paket": "Fugit impedit.",
"deskripsi_paket": "Asperiores labore adipisci voluptatem alias architecto sint facere vel quia commodi eum asperiores omnis aspernatur necessitatibus dolorem sit dolor soluta sit laborum maxime enim suscipit sit.",
"child": [
[],
[]
]
}
}
]
},
"4": {
"user_id": 5,
"referal": 2,
"parent_id": 2,
"name": "DINSOS Bandung Barat",
"level": 2,
"unit": "DINSOS Bandung Barat",
"prov": "JAWA BARAT",
"kot": "KABUPATEN BANDUNG BARAT",
"order_date": "2023-02-08 03:50:45",
"deskripsi": null,
"paket": "Rerum culpa.",
"deskripsi_paket": "Rerum inventore possimus qui voluptates dolorem rerum possimus magni qui aperiam hic et voluptatem labore quisquam qui aliquid rerum ullam.",
"child": [
[]
]
}
}
]
},
"8": {
"user_id": 7,
"referal": 0,
"parent_id": 7,
"name": "Bupati Vrindafan",
"level": 1,
"unit": "Kabupaten",
"prov": "JAWA BARAT",
"kot": "KABUPATEN BANDUNG",
"order_date": "2023-02-08 11:07:57",
"deskripsi": null,
"paket": null,
"deskripsi_paket": null,
"child": [
[]
]
}
}

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

How to map nested object using map ( ES6 )?

I have a javascript complex Object. Here is the Object: it's a content post i got from rest api :
{
"id": 2598,
"date": "2018-10-15T06:20:10",
"date_gmt": "2018-10-15T06:20:10",
"modified": "2019-05-16T23:35:50",
"modified_gmt": "2019-05-16T21:35:50",
"slug": "lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit",
"status": "publish",
"type": "post",
"link": "http://www.website.org/2018/10/15/lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit/",
"title": {
"rendered": "Lorem ipsum dolor sit amet, consectetur adipisicing elit"
},
"content": {
"rendered": "<p>Eaque ipsa quae ab illo inventore veritatis et quasi. Eaque ipsa quae ab illo inventore veritatis et quasi. Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti </p>\n",
"protected": false
},
"author_meta": {
"ID": "1",
"user_nicename": "megmail-com",
"user_email": "me#gmail.com",
"user_registered": "2018-12-31 08:16:31",
"display_name": "me#gmail.com",
"first_name":"John",
"last_name": "DOE"
},
"_links": {
"self": [
{
"href": "http://www.website.org/wp-json/wp/v2/posts/2598"
}
]
}
}
I want to transform this Object into another containing :
{
"id": 2598,
"date": "2018-10-15T06:20:10",
"slug": "lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit",
"title": {
"rendered": "Lorem ipsum dolor sit amet, consectetur adipisicing elit"
},
"content": {
"rendered": "<p>Eaque ipsa quae ab illo inventore veritatis et quasi. Eaque ipsa quae ab illo inventore veritatis et quasi. Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti </p>\n",
"protected": false
},
"authorlastname": "John",
"authorfirstname": "DOE"
}
How to do it using map ?
Here what i would like to do :
post = post
.map(({ id, slug, title, date, content, authorlastname, authorfirstname,
}) => ({
id,
slug,
title,
excerpt,
date,
tags,
content,
???,
???
}))
Thanks for your help

You could destructure author_meta as well and use a renaming of the properties.
For getting an object
const subset = ({
id,
slug,
title,
date,
content,
author_meta: { first_name: authorfirstname, last_name: authorlastname }
}) => ({
id,
slug,
title,
excerpt,
date,
tags,
content,
authorlastname,
authorfirstname
});
post = subset(post);
// if you have the objects in an array, you could map the new objects with
posts = posts(subset);

We can't use .map() method here as it is an array method and post is an object. So, we can simply map it like:
const result = {
id: post.id,
slug: post.slug,
title: post.title,
date: post.date,
content: post.content,
authorlastname: post.author_meta.last_name,
authorfirstname: post.author_meta.first_name
}
Demo:
const post = {
"id": 2598,
"date": "2018-10-15T06:20:10",
"date_gmt": "2018-10-15T06:20:10",
"modified": "2019-05-16T23:35:50",
"modified_gmt": "2019-05-16T21:35:50",
"slug": "lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit",
"status": "publish",
"type": "post",
"link": "http://www.website.org/2018/10/15/lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit/",
"title": {
"rendered": "Lorem ipsum dolor sit amet, consectetur adipisicing elit"
},
"content": {
"rendered": "<p>Eaque ipsa quae ab illo inventore veritatis et quasi. Eaque ipsa quae ab illo inventore veritatis et quasi. Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti </p>\n",
"protected": false
},
"author_meta": {
"ID": "1",
"user_nicename": "megmail-com",
"user_email": "me#gmail.com",
"user_registered": "2018-12-31 08:16:31",
"display_name": "me#gmail.com",
"first_name": "John",
"last_name": "DOE"
},
"_links": {
"self": [{
"href": "http://www.website.org/wp-json/wp/v2/posts/2598"
}]
}
}
const result = {
id: post.id,
slug: post.slug,
title: post.title,
date: post.date,
content: post.content,
authorlastname: post.author_meta.last_name,
authorfirstname: post.author_meta.first_name
}
console.log(result)
.as-console-wrapper { max-height: 100% !important; top: 0; }

You can not use .map on objects, but you can access the props directly. This will give you the expected result:
const {id, date, slug, title, content} = post
const newPost = {
id,
date,
slug,
title,
content,
authorlastname: post.author_meta.last_name,
authorfirstname: post.author_meta.first_name
}

You can change to
var obj =(({ id, slug, title, date }) => ({id, slug, title, date }))(post);
var post = {
"id": 2598,
"date": "2018-10-15T06:20:10",
"date_gmt": "2018-10-15T06:20:10",
"modified": "2019-05-16T23:35:50",
"modified_gmt": "2019-05-16T21:35:50",
"slug": "lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit",
"status": "publish",
"type": "post",
"link": "http://www.website.org/2018/10/15/lorem-ipsum-dolor-sit-amet-consectetur-adipisicing-elit/",
"title": {
"rendered": "Lorem ipsum dolor sit amet, consectetur adipisicing elit"
},
"content": {
"rendered": "<p>Eaque ipsa quae ab illo inventore veritatis et quasi. Eaque ipsa quae ab illo inventore veritatis et quasi. Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti </p>\n",
"protected": false
},
"author_meta": {
"ID": "1",
"user_nicename": "megmail-com",
"user_email": "me#gmail.com",
"user_registered": "2018-12-31 08:16:31",
"display_name": "me#gmail.com",
"first_name":"John",
"last_name": "DOE"
},
"_links": {
"self": [
{
"href": "http://www.website.org/wp-json/wp/v2/posts/2598"
}
]
}
};
var obj =(({ id, slug, title, date
}) => ({ id, slug, title, date, }))(post);
console.log(obj)

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>

We Keep Coding

JavaScript is the programming language of the Web.

Accessing Javascript nested object returned by Laravel - javascript

Related

how to display select option in loop using antd and react js

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

How to map nested object using map ( ES6 )?

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

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

Categories

Resources