How to create a JSON structure in ReactJS - reactjs

I have a use-case to create a JSON structure in React in order to POST an API request. The JSON structure body contains objects and arrays.
Please let me know how to create it in ReactJS.
Below is the sample JSON structure that needs to be created using ReactJS:-
{
"transactionAmount": {
"currency": "INR",
"value": 1220.38
},
"transactionDate": "2020-05-18T00:00:00Z",
"tripData": {
"agencyBooked": false,
"legs": [
{
"endLocation": {
"countryCode": "IN",
"city": "Delhi",
"name": "Indira Gandhi International"
},
"startDate": "2020-05-22",
"startTime": "08:00",
"returnLeg": false,
"startLocation": {
"countryCode": "US",
"city": "San Francisco",
"name": "San Francisco International"
},
"endTime": "21:00",
"endDate": "2020-05-22",
"startLocationDetail": "none"
},
{
"endLocation": {
"countryCode": "US",
"city": "San Francisco",
"name": "San Francisco International"
},
"returnLeg": true,
"startDate": "2020-05-24",
"startLocation": {
"countryCode": "IN",
"city": "Delhi",
"name": "Indira Gandhi International"
},
"startTime": "17:00"
}
],
"segmentType": {
"category": "REQ_SEG_AIRFR",
"code": "AIRFR"
},
"selfBooked": false,
"tripType": "ROUND_TRIP"
}
}

You can simply make a JSON format like this.
const dummyObject = {
name: 'Dummy',
age: 22,
about: {
hobbies: ['soccer']
},
works: true
}

Related

how can i return fetch() in map() loop

I wrote a webapp about weather and i used weatherbit api that is just free part. i want to fetch() funk in map() loop .
i have an object which has cityname and country name . map() return every cityname and country with fetch()
how can i do that?
one more question every step of map() loop i get one JSON .. Maybe and of the loop i have 10 JSON... How can i match all Json into one Json?
here is the code..
const cityName = [
{
"id": 1,
"name": "Ingolstadt",
"country": "GE",
},
{
"id": 2,
"name": "Vienna",
"country": "AT",
},
{
"id": 3,
"name": "Istanbul",
"country": "TR",
},
{
"id": 4,
"name": "London",
"country": "GB",
},
{
"id": 5,
"name": "Ankara",
"country": "TR",
},
{
"id": 6,
"name": "Paris",
"country": "FR",
},
{
"id": 7,
"name": "Barcelona",
"country": "ES",
},
{
"id": 8,
"name": "Amsterdam",
"country": "NL",
},
{
"id": 9,
"name": "Belgrade",
"country": "RS",
},
{
"id": 10,
"name": "Munich",
"country": "GE",
}
]
//should return all city which are in object
const citySource = cityName.map((name , country) => {
// get api from weatherbit api , but i dont know ${name} and ${country} right sycntax
fetch(`https://api.weatherbit.io/v2.0/current?city=${name}&country=${country}&key=86e622607fbe4c2cb9f7f71889a4d48d`)
.then(response => response.json())
.then( users => console.log(users));
})
According to MDN:
The map() method creates a new array with the results of calling a provided function on every element in the calling array.
Here you have working example:
const cityName = [
{
"id": 1,
"name": "Ingolstadt",
"country": "GE",
},
{
"id": 2,
"name": "Vienna",
"country": "AT",
},
{
"id": 3,
"name": "Istanbul",
"country": "TR",
},
{
"id": 4,
"name": "London",
"country": "GB",
},
{
"id": 5,
"name": "Ankara",
"country": "TR",
},
{
"id": 6,
"name": "Paris",
"country": "FR",
},
{
"id": 7,
"name": "Barcelona",
"country": "ES",
},
{
"id": 8,
"name": "Amsterdam",
"country": "NL",
},
{
"id": 9,
"name": "Belgrade",
"country": "RS",
},
{
"id": 10,
"name": "Munich",
"country": "GE",
}
]
//should return all city which are in object
const citySource = cityName.map((city) => {
fetch(`https://api.weatherbit.io/v2.0/current?city=${city.name}&country=${city.country}&key=86e622607fbe4c2cb9f7f71889a4d48d`)
.then(response => response.json())
.then( users => console.log(users));
})

How to parse nested array of json objects using typescripts and show it in primeng component

I am new to Angular js. Have a task of parsing nested array of json objects using typescripts and show it in primeng table. Primeng is absolutely new. I am able to show flat structure json, but this nested array of objects are creating problem.
I need to show it in some master-detail relationship.
Below is the JSON structure:
[
{
"baId": "50509060-48e5-4241-a346-f834b22bf4b5",
"status": "Pending",
"legalName": "Koch Suppy and Trading LLP",
"internal": true,
"baType": "Vendor",
"creditAddress": [
{
"addressSubType": "USA",
"addressLine1": "F-35 10th Main",
"addressLine2": "5th Cross Avenue",
"city": "Los Angeles",
"county": "Los Angeles",
"state": "California",
"country": "US",
"postalCode": "90001",
"notes": "District 10"
}
],
"invoiceAddress": [
{
"addressSubType": "USA",
"addressLine1": "F-35 10th Main",
"addressLine2": "5th Cross Avenue",
"city": "Los Angeles",
"county": "Los Angeles",
"state": "California",
"country": "US",
"postalCode": "90001",
"notes": "District 10"
}
],
"finance": [
{
"bank": "Citi Bank",
"routingNumber": "C044072324",
"accountNumber": "000123456789",
"wireTransferMethod": "RTGS",
"intermediaryBank": "Citi Bank",
"intermediaryRoutingNumber": "C044072327",
"intermediaryAccountNumber": "000123456789",
"locationName": "Wichita"
}
],
"reportingTags": [
{
"leiName": "Koch Suppy and Trading LLP",
"leiNumber": "5299001hxs",
"782a": "54-2024246",
"782aCountryIdentifier": "US",
"782c": "1905-0174",
"782cCountryIdentifier": "US",
"cftcClassifications": "Disaggregated Futures",
"cftcReporting": "Long Format",
"cftcSefAssoc": "360 Trading Networks, Inc.",
"emirCategorization": "Financial Counterparties",
"epaCountryIdentifier": "US",
"epaNumber": "1234-000",
"mifidClassifications": "Retail Clients",
"rfcCode": "EOPAN006",
"rfcCodeCountryIdentifier": "US",
"cpCode": "AS101",
"systemSpecific": "AEDP"
}
],
"audit": {
"createdBy": "koch\\malhota1",
"modifiedBy": "koch\\malhota1",
"creationDate": "2017-10-20T16:00:00Z",
"modificationDate": "2027-10-20T16:00:00Z",
"isCurrent": true
}
}
]
Please help me in creating a angular project with primeng from scratch using above json. Appreciate the quick help.

How to fetch array of array data in angular 2?

How to fetch array of array data in angular 2.
My json data is as follows,
[[{
"pk_emp_id":5,
"tenant_id":"Zone1",
"location_id":1,
"emp_number":"sk44",
"prefix":"",
"first_name":"qqqqq",
"middle_name":"www",
"last_name":"eeee",
"display_name":"qqqq",
"full_name":"qqq qqqq",
"email":"qqqq#gmail.com",
"gender":"Female",
"emp_type_id":2,
"date_of_hire":191000,
"date_of_birth":null,
"manager_id":7,
"phone_number":"9877654",
"position":"SE",
"responsibility":"",
"notes":"",
"contracted":"0",
"street":"vidyanagar",
"state":"Karnataka",
"city":"hubli",
"zip_code":"9898",
"dob":-19800000,
"ssn":"",
"deleted":0
},{
"pk_empt_id":2,
"empt_tenant_id":"2",
"***empt_name***":"temporary",
"deleted":0
}]]
How can I fetch empt_name in datatable(row data)?
let dummyArr = [
[{
"pk_emp_id": 5,
"tenant_id": "Zone1",
"location_id": 1,
"emp_number": "sk44",
"prefix": "",
"first_name": "qqqqq",
"middle_name": "www",
"last_name": "eeee",
"display_name": "qqqq",
"full_name": "qqq qqqq",
"email": "qqqq#gmail.com",
"gender": "Female",
"emp_type_id": 2,
"date_of_hire": 191000,
"date_of_birth": null,
"manager_id": 7,
"phone_number": "9877654",
"position": "SE",
"responsibility": "",
"notes": "",
"contracted": "0",
"street": "vidyanagar",
"state": "Karnataka",
"city": "hubli",
"zip_code": "9898",
"dob": -19800000,
"ssn": "",
"deleted": 0
}, {
"pk_empt_id": 2,
"empt_tenant_id": "2",
"***empt_name***": "temporary",
"deleted": 0
}]
];
dummyArr.forEach(element =>{
element.forEach(element2=>{
console.log(element2)
})
});
I believe you have exposed a GET method in your web api
In Angular using HTTP service
this.http.get("").subscribe(result => {
conosle.log(result[1].empt_name) });
You can take it in an array and read it like this:
x = [
[{
"pk_emp_id": 5,
"tenant_id": "Zone1",
"location_id": 1,
"emp_number": "sk44",
"prefix": "",
"first_name": "qqqqq",
"middle_name": "www",
"last_name": "eeee",
"display_name": "qqqq",
"full_name": "qqq qqqq",
"email": "qqqq#gmail.com",
"gender": "Female",
"emp_type_id": 2,
"date_of_hire": 191000,
"date_of_birth": null,
"manager_id": 7,
"phone_number": "9877654",
"position": "SE",
"responsibility": "",
"notes": "",
"contracted": "0",
"street": "vidyanagar",
"state": "Karnataka",
"city": "hubli",
"zip_code": "9898",
"dob": -19800000,
"ssn": "",
"deleted": 0
}, {
"pk_empt_id": 2,
"empt_tenant_id": "2",
"***empt_name***": "temporary",
"deleted": 0
}]
]
$('#a').text(x[0][1]['***empt_name***'])
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<span id='a'>sadsad </span>
This is just Javascript object manipulation.
You can do something like :
outerArray.forEach(innerArray =>{
if(innerArray.length){
innerArray.forEach(element =>{
//do somthing here with element.empt_name
console.log(element.empt_name);
});
}
})

AngularJS multiple Scope needed for Autocomplete

I have an array structure like this.
[
{
"id": "1",
"name": "John",
"city": "NY"
},
{
"id": "2",
"name": "Gerold",
"city": "LA"
},
{
"id": "3",
"name": "Stuart",
"city": "Boston"
}
]
I need $scope like below for my autocomplete search.
$scope.name=["john","Gerold","Stuart"];
$scope.city=["NY","LA","Boston"];
can anyone help to get this using angularjs controller.
Thanks in Advance.!
Use MAP
$scope.users = [
{
"id": "1",
"name": "John",
"city": "NY"
},
{
"id": "2",
"name": "Gerold",
"city": "LA"
},
{
"id": "3",
"name": "Stuart",
"city": "Boston"
}
];
$scope.cities = $scope.users.map(function(obj){
return obj.city;
});
console.log($scope.cities);
You can also create a helper function that would do that for you and you don't have to define a map per function that you want, and you do it in just one run (hence just a bit faster)
Sample here ;)
var myArray = [
{
"id": "1",
"name": "John",
"city": "NY"
},
{
"id": "2",
"name": "Gerold",
"city": "LA"
},
{
"id": "3",
"name": "Stuart",
"city": "Boston"
}
]
function toScope(scopedPropertieNames, array) {
scopedPropertieNames.forEach(function(propertyName) {
if (! $scope[propertyName]) {
$scope[propertyName] = []
}
});
array.forEach(function (objecInArray) {
scopedPropertieNames.forEach(function(propertyName) {
$scope[propertyName].push(objecInArray[propertyName])
})
});
}
toScope(['name', 'city'], myArray);
console.log($scope) //{name: Array[3], city: Array[3]}
You can use MAP..
$scope.YourBigArray = [{
"id": "1",
"name": "John",
"city": "NY"
}, {
"id": "2",
"name": "Gerold",
"city": "LA"
}, {
"id": "3",
"name": "Stuart",
"city": "Boston"
}];
$scope.names = $scope.YourBigArray.map(function(object) {
return object.name;
});
$scope.cities = $scope.YourBigArray.map(function(object) {
return object.city;
});
You can do a filter to use unique things in array of names and cities..
function filterForDuplicate(things) {
return things.filter(function(item, pos) {
return things.indexOf(item) === pos;
});
}

Get Value After Payment

I have the following object. How do I get the email value from it?
{
"payment_method": "paypal",
"payer_info": {
"email": "example#domain.com",
"first_name": "example",
"last_name": "xxx",
"payer_id": "12313213",
"shipping_address": {
"recipient_name": "Example",
"id": "5435345",
"line1": "1 SS ",
"city": "San Jose",
"state": "CA",
"postal_code": "95131",
"country_code": "US"
},
"phone": "4547567",
"country_code": "US"
}
}

Resources