We Keep Coding

Unable to extract the array field from JSON file. Instead my code returns "{}"

I want to return (res.json) the array of chats in this model but when I am trying to do so I am getting "{}".
On the other hand, when I am printing other fields like email or first_name, I am getting the results.
However, I guess the problem is only with arrays.
I am using MongoDB to store data and Postman for requests
PLEASE HELP!
Here is my JSON model.
{
"_id": "5f0d5ea45eeeaa3730eaf96c",
"first_name": "Test_firstName",
"last_name": "Test_lastName",
"email": "test#email.com",
"password": "$2b$10$B8EDo3KkJZ9PjGveWfouM.1XhaPSx9xrM3c6Mk2HC02AUNnO99Of.",
"address": "Home",
"chats": [
{
"id": "985234e2-86c6-4375-968a-96661c37ec32",
"name": "Community",
"messages": [
{
"id": "35c7bf4d-e556-40bd-9429-16e436c599f4",
"time": "11:10",
"message": "Hi",
"sender": "user1"
},
{
"id": "a74ad9ba-44b9-43af-90a0-cf9480d9a748",
"time": "11:11",
"message": "hey",
"sender": "user2"
}
]
}
],
"createdAt": "2020-07-14T07:28:36.148Z",
"updatedAt": "2020-07-14T07:28:36.148Z",
"__v": 0
}
Here is my code to find a chat from my model.
Please have a look at the lines with "<"
const find_chat = (req, res, next) => {
let email = req.body.email;
let chatId = req.body.chatId;
User.findOne({ email: email })
.then(async (response) => {
> let x = [];
> x = response.chats;
> res.json({
> response,
> });
})
.catch((error) => {
res.json({
message: "An error occured",
});
});
};
Here is the expected output
{
[
{
"id": "35c7bf4d-e556-40bd-9429-16e436c599f4",
"time": "11:10",
"message": "Hi",
"sender": "Advait"
},
{
"id": "a74ad9ba-44b9-43af-90a0-cf9480d9a748",
"time": "11:11",
"message": "hey",
"sender": "sharma"
}
]
}

You could try as this:
const data = {
"_id": "5f0d5ea45eeeaa3730eaf96c",
"first_name": "Test_firstName",
"last_name": "Test_lastName",
"email": "test#email.com",
"password": "$2b$10$B8EDo3KkJZ9PjGveWfouM.1XhaPSx9xrM3c6Mk2HC02AUNnO99Of.",
"address": "Home",
"chats": [
{
"id": "985234e2-86c6-4375-968a-96661c37ec32",
"name": "Community",
"messages": [
{
"id": "35c7bf4d-e556-40bd-9429-16e436c599f4",
"time": "11:10",
"message": "Hi",
"sender": "user1"
},
{
"id": "a74ad9ba-44b9-43af-90a0-cf9480d9a748",
"time": "11:11",
"message": "hey",
"sender": "user2"
}
]
}
],
"createdAt": "2020-07-14T07:28:36.148Z",
"updatedAt": "2020-07-14T07:28:36.148Z",
"__v": 0
}
let messages = data.chats[0].messages;
console.log(messages)
As per the later query , change it to
let x = JSON.stringify(response.chats[0].messages);
res.json({
response});

How To Loop Through An Array Object Of Unknown Properties In Angular

so I was finding it difficult phrasing the title of my question, what i want to do is loop through and array of objects but i dont know the property's of the object because its dynamic and coming from a db.
Below is an example of the array object:
[{
"id": 9,
"event_id": 13,
"details": {
"firstname": "Ralph",
"lastname": "Marvin",
"email_address": "ralphmarvin#email.com",
"phone_number": "0987654321"
}
}, {
"id": 10,
"event_id": 13,
"details": {
"firstname": "John",
"lastname": "X Doe",
"email_address": "john_x_doe120#xmail.com",
"phone_number": "0009876543"
}
}, {
"id": 11,
"event_id": 13,
"details": {
"firstname": "Wari",
"lastname": "Gumah",
"email_address": "gumahwarihanna#eeee.com",
"phone_number": "120029182765"
}
}]
I want to display the details part of the object in a table that looks like this:
firstname lastname email_address phone_number
and the values appropriately under each value.
An using Angular 8.
I just dont know how to use *ngFor to access properties i dont even know.
Is what am trying to do even possible, if yes then please show me how.
Thanks!.

You can iterate over object key/values as inner for loop with keyvalue pipe accessing details object.
Html:
<table>
<tr>
<th>Firstname</th>
<th>lastname</th>
<th>email_address</th>
<th>phone_number</th>
</tr>
<tr *ngFor="let listItem of yourList" >
<td *ngFor="let innerItem of listItem.details | keyvalue">
{{innerItem.value}
</td>
</tr>
</table>
populated list
yourList = [{
"id": 9,
"event_id": 13,
"details": {
"firstname": "Ralph",
"lastname": "Marvin",
"email_address": "ralphmarvin#email.com",
"phone_number": "0987654321"
}
}, {
"id": 10,
"event_id": 13,
"details": {
"firstname": "John",
"lastname": "X Doe",
"email_address": "john_x_doe120#xmail.com",
"phone_number": "0009876543"
}
}, {
"id": 11,
"event_id": 13,
"details": {
"firstname": "Wari",
"lastname": "Gumah",
"email_address": "gumahwarihanna#eeee.com",
"phone_number": "120029182765"
}
}]

you could implement some logic on a component to get a set of fields. it Would look in some way like this: (I assume that items come as #Input() to your component, but it could be another source)
#Input() items: Item[];
fields: Set<string>;
ngOnChanges(changes) {
if(!changes.items || !this.items) return;
this.fields= new Set(this.items.flatMap(item => Object.keys(item.details)))
}
and then in the template
<tr *ngFor="let item of items">
<td *ngFor="let field of fields">{{item.details[field]}}</td>
</tr>

ReactJs: How to handle empty array with map function inside render method

I m trying to print table with some JSON data, but I am not able to render empty array when I am using map method.
JSON DATA :
[{
"id": 6,
"firstname": "Sharon",
"lastname": "Jenkins",
"specialties": []
}, {
"id": 2,
"firstname": "Helen",
"lastname": "Leary",
"specialties": [{
"id": 1,
"name": "radiology"
}]
}, {
"id": 4,
"firstname": "Rafael",
"lastname": "Ortega",
"specialties": [{
"id": 2,
"name": "surgery"
}]
}, {
"id": 5,
"firstname": "Henry",
"lastname": "Stevens",
"specialties": [{
"id": 1,
"name": "radiology"
}]
}]
My Code :
{this.state.vets.map(vet =><tr><td>{vet.firstname}</td>
{
vet.specialties.map((subitem,i) => {
return <td>{subitem.name}</td> })}<td>EDIT</td><td id={vet.firstname}><div class="funkyradio">
Now I am getting the following error
As Sharon doesn't have a specialist, I need to print as N/A.
How can I check the specialities are empty and print N/A.

try rendering always the TD tag, like:
{
this.state.vets.map(vet =>
<tr>
<td>{vet.firstname}</td>
<td>
{vet.specialties.map((subitem,i) => {
return <span>{subitem.name}</span>
})}
</td>
<td>EDIT</td>
<td id={vet.firstname}>
<div class="funkyradio">

use conditional statment like this
{ this.state.vets.length > 0
? this.state.vets.map(()=>Your logic)
: <Your custom message/>
}

<table>
{dataJSON.map(({ id, firstname, lastname, specialties }) => {
return (
<tr>
<td> {`${firstname} ${lastname}`} </td>
<td> {specialties.map(specialty => specialty.name).join(",")} </td>
<td> <span> EDIT </span> </td>
</tr>
);
})}
</table>

Mainly for readability, instead of using the object property, I would create a separate function that will return the specialties, if any, otherwise N/A

Dynamically adding column in table

I am trying to add new column dynamically in the table. I have below object which is returned in response from web service api. How can I display dynamic columns where myArray object is getting appended with many other fields (new columns)
$scope.myArray = [
{
"contacts": [
{
"id": "1",
"contact": {
"name": "Sam",
"Email": "ddd#co.com",
"PhoneNo": 2355
}
},
{
"id": "2",
"contact": {
"name": "John",
"Email": "test#co.com",
"PhoneNo": 2355
}
}
]
}
];
I have tried looking into the example provided in some of the answers in google. In my below JSFIDDLE, I am getting only the key name but not the values. How can I achieve both key and value using ng-repeat where the key names are dynamic.

angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.myArray = [
{
"contacts": [
{
"id": "1",
"contact": {
"name": "Sam",
"Email": "ddd#co.com",
"PhoneNo": 2355
}
},
{
"id": "2",
"contact": {
"name": "John",
"Email": "test#co.com",
"PhoneNo": 2355
}
}
]
}
];
});
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<table ng-controller="myController" border="1">
<tr>
<th ng-repeat="(key, val) in myArray[0].contacts[0].contact">{{ key }}</th>
</tr>
<tr ng-repeat="row in myArray[0].contacts">
<td ng-repeat="(key, val) in row.contact">{{ val }}</td>
</tr>
</table>

How to render or populate data coming from websocket services like pusher using angularjs ngRepeat?

I am new to realtime application and its bothering for a while how to render the data coming from websocket services like pusher using the angularjs ngRepeat directive..
below are the response from the api
and the snippets code i have.
Client Side.
$scope.exam_results = [{}];
var client = new Pusher('some_key');
var pusher = $pusher(client);
var my_channel = pusher.subscribe('some_channel');
my_channel.bind('some_event', function(data) {
$scope.some_var = data;
console.log($scope.some_var);
});
Server Side
.....
LaravelPusher::trigger($some_channel, 'some_event', $some_var);
By the way im using laravel and angularjs.
Need little help here guys.. thank you ^_^
Api Response
[
{
"id": 1,
"subject_id": 1,
"student_id": 1,
"correct": 0,
"incorrect": 30,
"created_at": "2016-02-17 17:47:36",
"updated_at": "-0001-11-30 00:00:00",
"exam_taken": 1,
"students": {
"id": 1,
"firstname": "Mary Rose",
"lastname": "Labrador",
"middlename": "Neneng",
"birthdate": "2016-02-10",
"email": "maryrose#dummy.com",
"username": "maryrose",
"gender": "Female",
"password": "65ce8ebfe1687cb8a5460fab48bcea413a0e17f53636912ac4667f056eeca461",
"guardianname": "Unnamed",
"guardiancontact": "+6309083561578",
"personalcontact": "+6309083561578",
"department_id": 1,
"taken_exam": 1,
"created_at": "2016-02-16 00:00:00",
"updated_at": "2016-02-17 17:47:58"
},
"subjects": {
"id": 1,
"subjectname": "Algorithm",
"slug": "algorithm",
"time": "10:00:00",
"schedule": "MWF",
"teacher_id": 1,
"created_at": "2016-02-12 09:28:27",
"updated_at": "2016-02-12 09:28:27"
}
},
{
"id": 2,
"subject_id": 1,
"student_id": 4,
"correct": 0,
"incorrect": 30,
"created_at": "2016-02-17 18:54:11",
"updated_at": "-0001-11-30 00:00:00",
"exam_taken": 1,
"students": {
"id": 4,
"firstname": "Joan Phylis",
"lastname": "Rogano",
"middlename": "Latoja",
"birthdate": "2016-02-14",
"email": "joangwapa#dummy.com",
"username": "joan143",
"gender": "Female",
"password": "65ce8ebfe1687cb8a5460fab48bcea413a0e17f53636912ac4667f056eeca461",
"guardianname": "Unnamed",
"guardiancontact": "+639083561578",
"personalcontact": "+639083561578",
"department_id": 1,
"taken_exam": 1,
"created_at": "2016-02-16 00:00:00",
"updated_at": "2016-02-17 18:57:43"
},
"subjects": {
"id": 1,
"subjectname": "Algorithm",
"slug": "algorithm",
"time": "10:00:00",
"schedule": "MWF",
"teacher_id": 1,
"created_at": "2016-02-12 09:28:27",
"updated_at": "2016-02-12 09:28:27"
}
}
]
HTML
<tr ng-reapeat="result in exam_results track by $index">
<td>
<span class="text-success">#{{result.students.lastname}},
#{{result.students.firstname}} #{{result.students.middlename}}
</span>
</td>
<td> View</td>
</tr>

As $scope.exam_results is an array, why not just use Array.concat() to add the new data to it? Angular's digest cycle would then render it:
$scope.exam_results = [];
// your websocket code
my_channel.bind('some_event', function(data) {
$scope.exam_results.concat(data);
console.log($scope.exam_results);
});
Obviously, the data from the websocket needs to be the same format over time and also an array of objects. You would bind your ng-repeat to $scope.exam_results.
<ul>
<li ng-repeat="result in exam_results track by $index">
{{result.students.firstname}}
</li>
</ul>

If your event data is consistently going to be an Array of Objects.
You can do something like this -
$scope.exam_results = []; // Changed this to Array.
var client = new Pusher('some_key');
var pusher = $pusher(client);
var my_channel = pusher.subscribe('some_channel');
my_channel.bind('some_event', function(data) {
$scope.exam_results.concat(data) // Concatinating Array to merge with existing Results.
});
Now you can have your view something like this -
<div ng-repeat="result in exam_results">
<!-- HTML to render Result -->
<span>{{result.students.first_name}}</span>
</div>
Hope this helps.