Nested JSON iterate, Maximum call stack size exceeded - javascript

I have implemented a recursive function to iterate through a nested JSON. The issue I am facing is that it throws the error
Maximum call stack exceeded
The function that I implemented is as follows,
function createTreeMap (treeCatalog){
var _this = this;
_.each(treeCatalog, function (ele, inx){
if(typeof (ele) === "object"){
createTreeMap(ele);
}else{
//I create another JSON structure with the value as its property and its value as 1.
_this.treeMap[ele] = 1;
}
});
}
and the JSON I am iterating through looks something like this,
[{
"EmployeeID": 2,
"FirstName": "Andrew",
"LastName": "Fuller",
"Country": "USA",
"Title": "Vice President, Sales",
"HireDate": "1992-08-14 00:00:00",
"BirthDate": "1952-02-19 00:00:00",
"City": "Tacoma",
"Address": "908 W. Capital Way",
children: [{
"EmployeeID": 8,
"FirstName": "Laura",
"LastName": "Callahan",
"Country": "USA",
"Title": "Inside Sales Coordinator",
"HireDate": "1994-03-05 00:00:00",
"BirthDate": "1958-01-09 00:00:00",
"City": "Seattle",
"Address": "4726 - 11th Ave. N.E."
}, {
"EmployeeID": 1,
"FirstName": "Nancy",
"LastName": "Davolio",
"Country": "USA",
"Title": "Sales Representative",
"HireDate": "1992-05-01 00:00:00",
"BirthDate": "1948-12-08 00:00:00",
"City": "Seattle",
"Address": "507 - 20th Ave. E.Apt. 2A"
}, {
"EmployeeID": 3,
"FirstName": "Janet",
"LastName": "Leverling",
"Country": "USA",
"Title": "Sales Representative",
"HireDate": "1992-04-01 00:00:00",
"BirthDate": "1963-08-30 00:00:00",
"City": "Kirkland",
"Address": "722 Moss Bay Blvd."
}, {
"EmployeeID": 4,
"FirstName": "Margaret",
"LastName": "Peacock",
"Country": "USA",
"Title": "Sales Representative",
"HireDate": "1993-05-03 00:00:00",
"BirthDate": "1937-09-19 00:00:00",
"City": "Redmond",
"Address": "4110 Old Redmond Rd."
}, {
"EmployeeID": 5,
"FirstName": "Steven",
"LastName": "Buchanan",
"Country": "UK",
"Title": "Sales Manager",
"HireDate": "1993-10-17 00:00:00",
"BirthDate": "1955-03-04 00:00:00",
"City": "London",
"Address": "14 Garrett Hill",
"expanded": "true",
children: [{
"EmployeeID": 6,
"FirstName": "Michael",
"LastName": "Suyama",
"Country": "UK",
"Title": "Sales Representative",
"HireDate": "1993-10-17 00:00:00",
"BirthDate": "1963-07-02 00:00:00",
"City": "London",
"Address": "Coventry House Miner Rd."
}, {
"EmployeeID": 7,
"FirstName": "Robert",
"LastName": "King",
"Country": "UK",
"Title": "Sales Representative",
"HireDate": "1994-01-02 00:00:00",
"BirthDate": "1960-05-29 00:00:00",
"City": "London",
"Address": "Edgeham Hollow Winchester Way"
},{
"EmployeeID": 9,
"FirstName": "Anne",
"LastName": "Dodsworth",
"Country": "UK",
"Title": "Sales Representative",
"HireDate": "1994-11-15 00:00:00",
"BirthDate": "1966-01-27 00:00:00",
"City": "London",
"Address": "7 Houndstooth Rd."
}]
}]
}];
My suspicion is the similar child property names. But is there a proper way of fixing this as the similar child names is a requirement.
Thank you very much :)
UPDATE
this example simulates the issue I am having : http://jsfiddle.net/qaoapays/1/

After binding your source to jqxTreeGrid it a small change it structure: add parent property, and data property, where data - reference to self.
As workaround, to avoid infinite recursion you need miss this property, something like
function iterate (obj){
_.each(obj, function(ele, inx){
if(typeof (ele) === "object" && ele !== obj && inx !== 'parent'){
iterate(ele);
}else{
console.log(ele);
}
});
}
var employees =
[{
"EmployeeID": 2,
"FirstName": "Andrew",
"LastName": "Fuller",
"Country": "USA",
"Title": "Vice President, Sales",
"HireDate": "1992-08-14 00:00:00",
"BirthDate": "1952-02-19 00:00:00",
"City": "Tacoma",
"Address": "908 W. Capital Way",
children: [{
"EmployeeID": 8,
"FirstName": "Laura",
"LastName": "Callahan",
"Country": "USA",
"Title": "Inside Sales Coordinator",
"HireDate": "1994-03-05 00:00:00",
"BirthDate": "1958-01-09 00:00:00",
"City": "Seattle",
"Address": "4726 - 11th Ave. N.E."
}, {
"EmployeeID": 1,
"FirstName": "Nancy",
"LastName": "Davolio",
"Country": "USA",
"Title": "Sales Representative",
"HireDate": "1992-05-01 00:00:00",
"BirthDate": "1948-12-08 00:00:00",
"City": "Seattle",
"Address": "507 - 20th Ave. E.Apt. 2A"
}, {
"EmployeeID": 3,
"FirstName": "Janet",
"LastName": "Leverling",
"Country": "USA",
"Title": "Sales Representative",
"HireDate": "1992-04-01 00:00:00",
"BirthDate": "1963-08-30 00:00:00",
"City": "Kirkland",
"Address": "722 Moss Bay Blvd."
}, {
"EmployeeID": 4,
"FirstName": "Margaret",
"LastName": "Peacock",
"Country": "USA",
"Title": "Sales Representative",
"HireDate": "1993-05-03 00:00:00",
"BirthDate": "1937-09-19 00:00:00",
"City": "Redmond",
"Address": "4110 Old Redmond Rd."
}, {
"EmployeeID": 5,
"FirstName": "Steven",
"LastName": "Buchanan",
"Country": "UK",
"Title": "Sales Manager",
"HireDate": "1993-10-17 00:00:00",
"BirthDate": "1955-03-04 00:00:00",
"City": "London",
"Address": "14 Garrett Hill",
"expanded": "true",
children: [{
"EmployeeID": 6,
"FirstName": "Michael",
"LastName": "Suyama",
"Country": "UK",
"Title": "Sales Representative",
"HireDate": "1993-10-17 00:00:00",
"BirthDate": "1963-07-02 00:00:00",
"City": "London",
"Address": "Coventry House Miner Rd."
}, {
"EmployeeID": 7,
"FirstName": "Robert",
"LastName": "King",
"Country": "UK",
"Title": "Sales Representative",
"HireDate": "1994-01-02 00:00:00",
"BirthDate": "1960-05-29 00:00:00",
"City": "London",
"Address": "Edgeham Hollow Winchester Way"
}, {
"EmployeeID": 9,
"FirstName": "Anne",
"LastName": "Dodsworth",
"Country": "UK",
"Title": "Sales Representative",
"HireDate": "1994-11-15 00:00:00",
"BirthDate": "1966-01-27 00:00:00",
"City": "London",
"Address": "7 Houndstooth Rd."
}]
}]
}];
//// prepare the data
var source = {
dataType: "json",
dataFields: [{
name: 'EmployeeID',
type: 'number'
}, {
name: 'FirstName',
type: 'string'
}, {
name: 'LastName',
type: 'string'
}, {
name: 'Country',
type: 'string'
}, {
name: 'City',
type: 'string'
}, {
name: 'Address',
type: 'string'
}, {
name: 'Title',
type: 'string'
}, {
name: 'HireDate',
type: 'date'
}, {
name: 'children',
type: 'array'
}, {
name: 'expanded',
type: 'bool'
}, {
name: 'BirthDate',
type: 'date'
}],
hierarchy: {
root: 'children'
},
id: 'EmployeeID',
localData: employees
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#treeGrid").jqxTreeGrid({
width: 680,
source: dataAdapter,
editable: true,
filterable: true,
theme: 'energyblue',
columns: [{
text: 'FirstName',
dataField: 'FirstName',
width: 150
}, {
text: 'LastName',
dataField: 'LastName',
width: 120
}, {
text: 'Title',
dataField: 'Title',
width: 200
}, {
text: 'Birth Date',
dataField: 'BirthDate',
cellsFormat: 'd',
width: 120
}, {
text: 'Hire Date',
dataField: 'HireDate',
cellsFormat: 'd',
width: 120
}, {
text: 'Address',
dataField: 'Address',
width: 250
}, {
text: 'City',
dataField: 'City',
width: 120
}, {
text: 'Country',
dataField: 'Country',
width: 120
}]
});
$("#jqxbutton").jqxButton({
theme: 'energyblue',
height: 30
});
$('#jqxbutton').click(function () {
$("#treeGrid").jqxTreeGrid('expandRow',2);
iterate(employees);
});
function iterate (obj){
_.each(obj, function(ele, inx){
if(typeof (ele) === "object" && ele !== obj && inx !== 'parent'){
iterate(ele);
}else{
console.log(ele);
}
});
}
<script src="http://documentcloud.github.io/underscore/underscore.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet"/>
<link href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="treeGrid"></div>
<input type="button" style="margin: 20px;" id="jqxbutton" value="Expand a row" />
Yet another way: pass to source - deep cloned object

Hasitha, I think you are putting the object you are cataloging ("ele") back into the function itself.
instead of
createTreeMap(ele);
try something like this
createTreeMap(ele.child);

Related

Comparing 2 arrays of nested objects while ignoring some properties in Javascript

I'm looking to check an API response for against a set of values but the API response contains some additional info that I'm not interested in checking against
Data to check:
[
{
"address": {
"city": "London",
"firstLine": "23 High Road",
"postCode": "WC1 1AA",
"region": "South East",
"uniqueIdentifier": 239
},
"detail": {
"leaseholdFreehold": "Freehold",
"location": "Satisfactory",
"sector": "Office"
},
"valuation": {
"value": "770000",
"valuationDate": "2018-03-07",
"yield": "7.75"
}
},
{
"address": {
"city": "Leeds",
"firstLinePropertyName": "45 Headrow",
"postCode": "LS2 8AA",
"region": "North East",
"uniqueIdentifier": 287
},
"detail": {
"leaseholdFreehold": "Freehold",
"location": "Good",
"sector": "Residential"
},
"valuation": {
"value": "88000",
"valuationDate": "2018-03-07",
"yield": "8.87"
}
}
]
API response:
[
{
"address": {
"city": "London",
"firstLine": "23 High Road",
"postCode": "WC1 1AA",
"region": "South East",
"uniqueIdentifier": 239
},
"detail": {
"designAndCondition": "",
"developmentCompletionDate": "0001-01-01",
"leaseholdFreehold": "Freehold",
"location": "Satisfactory",
"sector": "Office"
},
"valuation": {
"value": "770000",
"valuationDate": "2018-03-07",
"yield": "7.75"
},
"dbIdentifier": 240
},
{
"address": {
"city": "Leeds",
"firstLinePropertyName": "11 Main Road",
"postCode": "LS2 8AA",
"region": "North East",
"uniqueIdentifier": 282
},
"detail": {
"designAndCondition": "",
"developmentCompletionDate": "0001-01-01",
"leaseholdFreehold": "Freehold",
"location": "Good",
"sector": "Residential"
},
"valuation": {
"value": "88000",
"valuationDate": "2018-03-07",
"yield": "8.75"
},
"dbIdentifier": 239
}
]
So I'm not interested in what values are returned for dbIdentifier, designAndCondition and developmentCompletionDate as they are not in my data to check against but I would like to compare the values for the rest of the properties. In practice these arrays will have more than 2 items
I was initially thinking I would remove the unwanted properties from the objects using the function below
const newArray = responseBody.map(({ dbIdentifierIdentifier, detail: { designAndCondition, developmentCompletionDate }, ...rest }) => rest)
Then ordering by address.uniqueIdentifier, converting to JSON strings and comparing the strings but the function above doesn't work with the nested properties as newArray doesn't contain the detail object at all
newArray:
[
{
"address": {
"city": "London",
"firstLine": "23 High Road",
"postCode": "WC1 1AA",
"region": "South East",
"uniqueIdentifier": 239
},
"valuation": {
"value": "770000",
"valuationDate": "2018-03-07",
"yield": "7.75"
},
"dbIdentifier": 240
},
{
"address": {
"city": "Leeds",
"firstLinePropertyName": "11 Main Road",
"postCode": "LS2 8AA",
"region": "North East",
"uniqueIdentifier": 282
},
"valuation": {
"value": "88000",
"valuationDate": "2018-03-07",
"yield": "8.75"
},
"dbIdentifier": 239
}
]
IS it possible to do it the above way by passing a destructured nested object a map function?
One way to remove the unwanted properties from the API response would be to first copy the response into a new array (to preserve the original response), then delete the properties:
const apiResponse = [{
"address": {
"city": "London",
"firstLine": "23 High Road",
"postCode": "WC1 1AA",
"region": "South East",
"uniqueIdentifier": 239
},
"detail": {
"designAndCondition": "",
"developmentCompletionDate": "0001-01-01",
"leaseholdFreehold": "Freehold",
"location": "Satisfactory",
"sector": "Office"
},
"valuation": {
"value": "770000",
"valuationDate": "2018-03-07",
"yield": "7.75"
},
"dbIdentifier": 240
},
{
"address": {
"city": "Leeds",
"firstLinePropertyName": "11 Main Road",
"postCode": "LS2 8AA",
"region": "North East",
"uniqueIdentifier": 282
},
"detail": {
"designAndCondition": "",
"developmentCompletionDate": "0001-01-01",
"leaseholdFreehold": "Freehold",
"location": "Good",
"sector": "Residential"
},
"valuation": {
"value": "88000",
"valuationDate": "2018-03-07",
"yield": "8.75"
},
"dbIdentifier": 239
}
]
let apiResponseCopy = JSON.parse(JSON.stringify(apiResponse))
var newArray = apiResponseCopy.map(i => {
delete i.dbIdentifier
delete i.detail.designAndCondition
delete i.detail.developmentCompletionDate
return i
})
console.log(newArray)
Then, you should be able to compare the newArray against your data.

Rearrange JSON object to show in jspdf-autotable

I have following object, which I need to rearrange. Please help me to convert it from following format.
I am receiving th Json array from web service. I need to show in japdf-autotable.
I have able to format the table and guese the following data structure should work.
If someone have better ideas also can suggest me.
[
{
"location": "OFFICE",
"designation": "SWEETS",
"name": "BHOROT DOLUI",
"salary": 9500
},
{
"location": "FACTORY",
"designation": "DRIVER",
"name": "SOUMEN PAL",
"salary": 10000
},
{
"location": "OFFICE",
"designation": "STAFF",
"name": "NANDU YADAV",
"salary": 11000
},
{
"location": "OUTLETS",
"designation": "DRIVER",
"name": "PANKAJ YADAV",
"salary": 10200
},
{
"location": "OFFICE",
"designation": "DRIVER",
"name": "AJIT YADAV",
"salary": 9100
},
{
"location": "OFFICE",
"designation": "DRIVER",
"name": "AVIJIT BHOWMICK",
"salary": 9500
},
{
"location": "OUTLETS",
"designation": "SWEETS",
"name": "ARUN DAS",
"salary": 10200
},
{
"location": "FACTORY",
"designation": "STAFF",
"name": "RAJESH KUMAR YADAV",
"salary": 18000
},
{
"location": "OFFICE",
"designation": "DRIVER",
"name": "AMIT RAM",
"salary": 9000
},
{
"location": "OUTLETS",
"designation": "SALES BOY",
"name": "RAKESH HAZRA",
"salary": 9500
},
{
"location": "FACTORY",
"designation": "DRIVER",
"name": "MD AKHTER",
"salary": 9000
}
]
I need to the following format.
[
{
"location": "OFFICE",
"designation": "SWEETS",
data: [
{
"location": "OFFICE",
"designation": "SWEETS",
"name": "BHOROT DOLUI",
"salary": 9500
}
],
},
{
"location": "OFFICE",
"designation": "DRIVER",
"data": [
{
"location": "OFFICE",
"designation": "DRIVER",
"name": "AJIT YADAV",
"salary": 9100
},
{
"location": "OFFICE",
"designation": "DRIVER",
"name": "AVIJIT BHOWMICK",
"salary": 9500
},
{
"location": "OFFICE",
"designation": "DRIVER",
"name": "AMIT RAM",
"salary": 9000
},
]
},
{
"location": "OFFICE",
"designation": "STAFF",
"data": [
{
"location": "OFFICE",
"designation": "STAFF",
"name": "NANDU YADAV",
"salary": 11000
},
]
},
{
"location": "FACTORY",
"designation": "DRIVER",
"data": [
{
"location": "FACTORY",
"designation": "DRIVER",
"name": "SOUMEN PAL",
"salary": 10000
},
{
"location": "FACTORY",
"designation": "DRIVER",
"name": "MD AKHTER",
"salary": 9000
}
]
},
{
"location": "FACTORY",
"designation": "STAFF",
"data": [
{
"location": "FACTORY",
"designation": "STAFF",
"name": "RAJESH KUMAR YADAV",
"salary": 18000
}
]
},
{
"location": "OUTLETS",
"designation": "DRIVER",
"data": [
{
"location": "OUTLETS",
"designation": "DRIVER",
"name": "PANKAJ YADAV",
"salary": 10200
},
]
},
{
"location": "OUTLETS",
"designation": "SWEETS",
"data": [
{
"location": "OUTLETS",
"designation": "SWEETS",
"name": "ARUN DAS",
"salary": 10200
}
]
},
{
"location": "OUTLETS",
"designation": "SALES BOY",
"data": [
{
"location": "OUTLETS",
"designation": "SALES BOY",
"name": "RAKESH HAZRA",
"salary": 9500
}
]
}
]
You can easily achieve this using reduce and find
const arr = [
{
location: "OFFICE",
designation: "SWEETS",
name: "BHOROT DOLUI",
salary: 9500,
},
{
location: "FACTORY",
designation: "DRIVER",
name: "SOUMEN PAL",
salary: 10000,
},
{
location: "OFFICE",
designation: "STAFF",
name: "NANDU YADAV",
salary: 11000,
},
{
location: "OUTLETS",
designation: "DRIVER",
name: "PANKAJ YADAV",
salary: 10200,
},
{
location: "OFFICE",
designation: "DRIVER",
name: "AJIT YADAV",
salary: 9100,
},
{
location: "OFFICE",
designation: "DRIVER",
name: "AVIJIT BHOWMICK",
salary: 9500,
},
{
location: "OUTLETS",
designation: "SWEETS",
name: "ARUN DAS",
salary: 10200,
},
{
location: "FACTORY",
designation: "STAFF",
name: "RAJESH KUMAR YADAV",
salary: 18000,
},
{
location: "OFFICE",
designation: "DRIVER",
name: "AMIT RAM",
salary: 9000,
},
{
location: "OUTLETS",
designation: "SALES BOY",
name: "RAKESH HAZRA",
salary: 9500,
},
{
location: "FACTORY",
designation: "DRIVER",
name: "MD AKHTER",
salary: 9000,
},
];
const result = arr.reduce((acc, curr) => {
const { location, designation, name, salary } = curr;
const findEl = acc.find((o) => o.designation === designation && o.location === location);
if (findEl) {
findEl.data.push(curr);
} else {
acc.push({ location, designation, data: [{ ...curr }] });
}
return acc;
}, []);
console.log(result);

Trying to filters an array of objects by an array of numbers with find my index and forEach doesnt work

Im trying to filter all the contact I have with an array of numbers I want to remove. This should loop on every contact and remove the numbers not needed. Some contacts have two numbers and only one could be deleted but not the hole contact. I tried already to filter and see if the selected number is in an index but the forEach doesn't seem to be working any advice?. I don't think forEach returns something
const filteredContacts = contacts.filter(contact => numbers.indexOf(contact.phoneNumbers.forEach(phone => phone.number)) > -1);
//2 sample of all contacts
// contacts
Object {
"company": "Financial Services Inc.",
"contactType": "person",
"firstName": "Hank",
"id": "2E73EE73-C03F-4D5F-B1E8-44E85A70F170",
"imageAvailable": false,
"jobTitle": "Portfolio Manager",
"lastName": "Zakroff",
"middleName": "M.",
"name": "Hank M. Zakroff",
"phoneNumbers": Array [
Object {
"countryCode": "us",
"digits": "5557664823",
"id": "337A78CC-C90A-46AF-8D4B-6CC43251AD1A",
"label": "work",
"number": "(555) 766-4823",
},
Object {
"countryCode": "us",
"digits": "7075551854",
"id": "E998F7A3-CC3C-4CF1-BC21-A53682BC7C7A",
"label": "other",
"number": "(707) 555-1854",
},
],
},
Object {
"contactType": "person",
"firstName": "David",
"id": "E94CD15C-7964-4A9B-8AC4-10D7CFB791FD",
"imageAvailable": false,
"lastName": "Taylor",
"name": "David Taylor",
"phoneNumbers": Array [
Object {
"countryCode": "us",
"digits": "5556106679",
"id": "FE064E55-C246-45F0-9C48-822BF65B943F",
"label": "home",
"number": "555-610-6679",
},
],
},
]
//numbers not to have
numbers = [
5557664823,
1344043005,
5467865467,
]
//Expected
Object {
"company": "Financial Services Inc.",
"contactType": "person",
"firstName": "Hank",
"id": "2E73EE73-C03F-4D5F-B1E8-44E85A70F170",
"imageAvailable": false,
"jobTitle": "Portfolio Manager",
"lastName": "Zakroff",
"middleName": "M.",
"name": "Hank M. Zakroff",
"phoneNumbers": Array [
Object {
"countryCode": "us",
"digits": "7075551854",
"id": "E998F7A3-CC3C-4CF1-BC21-A53682BC7C7A",
"label": "other",
"number": "(707) 555-1854",
},
],
},
Object {
"contactType": "person",
"firstName": "David",
"id": "E94CD15C-7964-4A9B-8AC4-10D7CFB791FD",
"imageAvailable": false,
"lastName": "Taylor",
"name": "David Taylor",
"phoneNumbers": Array [
Object {
"countryCode": "us",
"digits": "5556106679",
"id": "FE064E55-C246-45F0-9C48-822BF65B943F",
"label": "home",
"number": "555-610-6679",
},
],
},
]
If I understood right, you want to filter out some numbers from the contact's phone numbers. One solution to this can be approached using Array.map() over the contacts array and replace the phoneNumbers array with a new filtered array. For the filtering procedure we can use Array.filter() and Array.includes() to check if a phone number belong to the list of numbers you want to filter out.
const contacts = [
{
"company": "Financial Services Inc.",
"contactType": "person",
"firstName": "Hank",
"id": "2E73EE73-C03F-4D5F-B1E8-44E85A70F170",
"imageAvailable": false,
"jobTitle": "Portfolio Manager",
"lastName": "Zakroff",
"middleName": "M.",
"name": "Hank M. Zakroff",
"phoneNumbers": [
{
"countryCode": "us",
"digits": "5557664823",
"id": "337A78CC-C90A-46AF-8D4B-6CC43251AD1A",
"label": "work",
"number": "(555) 766-4823",
},
{
"countryCode": "us",
"digits": "7075551854",
"id": "E998F7A3-CC3C-4CF1-BC21-A53682BC7C7A",
"label": "other",
"number": "(707) 555-1854",
},
],
},
{
"contactType": "person",
"firstName": "David",
"id": "E94CD15C-7964-4A9B-8AC4-10D7CFB791FD",
"imageAvailable": false,
"lastName": "Taylor",
"name": "David Taylor",
"phoneNumbers": [
{
"countryCode": "us",
"digits": "5556106679",
"id": "FE064E55-C246-45F0-9C48-822BF65B943F",
"label": "home",
"number": "555-610-6679",
},
],
},
];
// Numbers to filter out.
const numsToFilterOut = [5557664823];
let res = contacts.map(contact =>
{
contact.phoneNumbers = contact.phoneNumbers.filter(
// Unary plus is used to coerces (cast) the string to number.
phone => !numsToFilterOut.includes(+phone.digits)
);
return contact;
});
console.log(res);
.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

How Can I able to display following data is vue js?

My json response is
{"status": true, "data": {"basic": {"name": "haji", "dob": "2018-01-01", "gender": "male", "created_at": "2018-01-08T13:38:49.767Z", "firstname": "Ah", "lastname": "Sh", "userType": "Agent", "actor": 1, "username": "ashu", "contact": {"email": "ah#gmail.com", "phone": 863249517, "address": null}, "is_new": false, "is_email_verified": true, "is_phone_verified": true}, "wallet": {"amount": 144.0, "tds": 6.0}, "clan": null, "balance_lisitings": 48, "clan_status": false, "listings": [{"pid": 36, "name": "Labs", "website": "Labs", "category": {"name": "Education"}, "location": {"lat": 9.52766533190131, "lon":
76.8221354484558, "state": "Kerala", "country": "India", "district": {"id": 1, "name": "Kottayam"}, "city": {"id": 1, "name": "Kanjirappally"}, "place": {"id": 1, "name": "Koovappally"}}, "package": 0, "contact": {"email": "ah#gmail.com", "phone": 8986234851, "address": {"country": "India", "state": "Kerala", "name": "aloh", "pincode": 686895, "streetAddress": "Kottayam\nKanjirappally", "locality": "Koovappally", "city": "Koovappally"}}, "about": " IT company."}, {"pid": 37, "name": " Louis", "website": "ouis", "category": {"name": "Education"}, "location": {"lat": 10.0273434437709, "lon": 76.5288734436035, "state": "Kerala", "country": "India", "district": {"id": 1, "name": "Kottayam"}, "city": {"id": 1, "name": "Kanjirappally"}, "place": {"id": 1, "name": "Koovappally"}}, "package": 0, "contact": {"email": "soew988#gmail.com", "phone": 989756240, "address": {"country": "India", "state": "Kerala", "name": "allen45", "pincode": 686518, "streetAddress": "Sppally", "locality": "Koovappally", "city": "Koovappally"}}, "about": "fsdbgfnvb cvc"}], "total_listings": 2}}
========================================================================
My vue js script is
<script>
new Vue({
el: '#listings' ,
data: {
data: [],
},
mounted() {
this.$nextTick(function() {
var self = this;
$.ajax({
url: "https://",
method: "GET",
dataType: "JSON",
success: function (e) {
self.data = e.data;
},
});
})
},
})
</script>
My html code is
<div id="listings">
<h1>{{basic.name}}</h1>
<h2>{{basic.dob}}</h2>
like wise all data
</div>
Can anybody please help me to display the same. I am weak in js. This is the data I am getting I need to display the above data in vue js. I store all the data to a variable data[]. From it, how can I able to display the same?
One thing you'll need is a v-if to keep things from rendering when there's no data.
You have a data variable and basic is inside it. As you have it, all the things you want to include are inside it, so you will have a lot of things like data.basic.name.
const e = {
"status": true,
"data": {
"basic": {
"name": "haji",
"dob": "2018-01-01",
"gender": "male",
"created_at": "2018-01-08T13:38:49.767Z",
"firstname": "Ah",
"lastname": "Sh",
"userType": "Agent",
"actor": 1,
"username": "ashu",
"contact": {
"email": "ah#gmail.com",
"phone": 863249517,
"address": null
},
"is_new": false,
"is_email_verified": true,
"is_phone_verified": true
},
"wallet": {
"amount": 144.0,
"tds": 6.0
},
"clan": null,
"balance_lisitings": 48,
"clan_status": false,
"listings": [{
"pid": 36,
"name": "Labs",
"website": "Labs",
"category": {
"name": "Education"
},
"location": {
"lat": 9.52766533190131,
"lon": 76.8221354484558,
"state": "Kerala",
"country": "India",
"district": {
"id": 1,
"name": "Kottayam"
},
"city": {
"id": 1,
"name": "Kanjirappally"
},
"place": {
"id": 1,
"name": "Koovappally"
}
},
"package": 0,
"contact": {
"email": "ah#gmail.com",
"phone": 8986234851,
"address": {
"country": "India",
"state": "Kerala",
"name": "aloh",
"pincode": 686895,
"streetAddress": "Kottayam\nKanjirappally",
"locality": "Koovappally",
"city": "Koovappally"
}
},
"about": " IT company."
}, {
"pid": 37,
"name": " Louis",
"website": "ouis",
"category": {
"name": "Education"
},
"location": {
"lat": 10.0273434437709,
"lon": 76.5288734436035,
"state": "Kerala",
"country": "India",
"district": {
"id": 1,
"name": "Kottayam"
},
"city": {
"id": 1,
"name": "Kanjirappally"
},
"place": {
"id": 1,
"name": "Koovappally"
}
},
"package": 0,
"contact": {
"email": "soew988#gmail.com",
"phone": 989756240,
"address": {
"country": "India",
"state": "Kerala",
"name": "allen45",
"pincode": 686518,
"streetAddress": "Sppally",
"locality": "Koovappally",
"city": "Koovappally"
}
},
"about": "fsdbgfnvb cvc"
}],
"total_listings": 2
}
};
new Vue({
el: '#listings',
data: {
data: [],
},
mounted() {
const self = this;
self.data = e.data;
},
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="listings" v-if="data.basic">
<h1>{{data.basic.name}}</h1>
<h2>{{data.basic.dob}}</h2>
like wise all data
</div>
Any data nested inside the data (and computed) property is available in the template between the {{ and }} tags.
For example:
Vue.element('my-element', {
template:
'<h1>This is an example!</h1>' +
'<h2>{{ msg }}</h2>'
data: function () {
return {
msg: 'default message'
}
},
So in your case, with nested properties it is exactly the same as you would access them in javascript:
Vue.element('my-element', {
template:
'<h1>This is an example!</h1>' +
'<h2>{{ data.wallet.amount }}</h2>'
'<h2 v-for="listing in listings" :key="listing.pid">{{ listing.name }}</h2>'
}
data: function () {
return {
data: []
}
},
Note
The data object should be returned from a function, from the original docs:
When defining a component, data must be declared as a function that returns the initial data object, because there will be many instances created using the same definition. If we use a plain object for data, that same object will be shared by reference across all instances created! By providing a data function, every time a new instance is created we can call it to return a fresh copy of the initial data. (https://v2.vuejs.org/v2/api/#data)
Further reading
I would advise you to read the Vue guide, especially the sections about
Declarative Rendering, Conditionals and Loops and Template Syntax
EDIT
While I was writing my answer, I see you edited your question.
Change your html to this:
<div id="listings">
<h1>{{data.basic.name}}</h1>
<h2>{{data.basic.dob}}</h2>
like wise all data
</div>

Compare JSON object array using Jquery

I have a selected list object like this {"0":"1","2":"1"},
I want to compare it with another array like the following
{
"0": {
"id": 1,
"salutation": "Dr.",
"firstname": "Kapil",
"lastname": "Dev",
"gender": "Male ",
"email": "kapil.dev#aggenome.com",
"phone": 1232423415,
"usertype": "student",
"institution": "AgriGenome Labs Pvt Ltd",
"department": "Lab",
"country": "India",
"conferenceitem": "2017 NGBT Conference ",
"conferenceitemid": "39",
"amount": 2800,
"actual_amount": "5000.00",
"currency": "INR",
"group": "Lead",
"accompany": "No",
"password": null,
"mailsend": "Yes"
},
"1": {
"id": 2,
"salutation": "Mr.",
"firstname": "Sunil",
"lastname": "Gavaskar",
"gender": "Male ",
"email": "sunil.gavaskar#aggenome.com",
"phone": 1232423415,
"usertype": "commercial",
"institution": "AgriGenome Labs Pvt Ltd",
"department": "Bio Info",
"country": "India",
"conferenceitem": "2017 NGBT Conference ",
"conferenceitemid": "31",
"amount": "3100.00",
"actual_amount": "10000.00",
"currency": "INR",
"group": "Yes",
"accompany": "No",
"password": null,
"mailsend": "Yes"
},
"2": {
"id": 3,
"salutation": "Mr.",
"firstname": "Anil",
"lastname": "Kumble",
"gender": "Male ",
"email": "anil.kumble#aggenome.com",
"phone": 1232423415,
"usertype": "student",
"institution": "AgriGenome Labs Pvt Ltd",
"department": "Support",
"country": "India",
"conferenceitem": "Accompanying Person",
"conferenceitemid": "5",
"amount": 1900,
"actual_amount": "5000.00",
"currency": "INR",
"group": "No",
"accompany": "Yes",
"password": null,
"mailsend": "No"
}
}
on the basis of the keys, means that only 0 & 2 are selected and I need to fetch data from the second object having key 0 & 2, (excluding 1 ), how can I do this? I am new to this area...
var obj = {"0":"1","2":"1"};
var newobj = {
"0": {
"id": 1,
"salutation": "Dr.",
"firstname": "Kapil",
"lastname": "Dev",
"gender": "Male ",
"email": "kapil.dev#aggenome.com",
"phone": 1232423415,
"usertype": "student",
"institution": "AgriGenome Labs Pvt Ltd",
"department": "Lab",
"country": "India",
"conferenceitem": "2017 NGBT Conference ",
"conferenceitemid": "39",
"amount": 2800,
"actual_amount": "5000.00",
"currency": "INR",
"group": "Lead",
"accompany": "No",
"password": null,
"mailsend": "Yes"
},
"1": {
"id": 2,
"salutation": "Mr.",
"firstname": "Sunil",
"lastname": "Gavaskar",
"gender": "Male ",
"email": "sunil.gavaskar#aggenome.com",
"phone": 1232423415,
"usertype": "commercial",
"institution": "AgriGenome Labs Pvt Ltd",
"department": "Bio Info",
"country": "India",
"conferenceitem": "2017 NGBT Conference ",
"conferenceitemid": "31",
"amount": "3100.00",
"actual_amount": "10000.00",
"currency": "INR",
"group": "Yes",
"accompany": "No",
"password": null,
"mailsend": "Yes"
},
"2": {
"id": 3,
"salutation": "Mr.",
"firstname": "Anil",
"lastname": "Kumble",
"gender": "Male ",
"email": "anil.kumble#aggenome.com",
"phone": 1232423415,
"usertype": "student",
"institution": "AgriGenome Labs Pvt Ltd",
"department": "Support",
"country": "India",
"conferenceitem": "Accompanying Person",
"conferenceitemid": "5",
"amount": 1900,
"actual_amount": "5000.00",
"currency": "INR",
"group": "No",
"accompany": "Yes",
"password": null,
"mailsend": "No"
}
}
var newArray = Object.keys(obj).map(item => {
return newobj[item]})
console.log(newArray)
Considering you only want to the object filtered out from your selection, you could use forEach on Object.keys of your selected object
var obj = {"0":"1","2":"1"};
var newobj = {
"0": {
"id": 1,
"salutation": "Dr.",
"firstname": "Kapil",
"lastname": "Dev",
"gender": "Male ",
"email": "kapil.dev#aggenome.com",
"phone": 1232423415,
"usertype": "student",
"institution": "AgriGenome Labs Pvt Ltd",
"department": "Lab",
"country": "India",
"conferenceitem": "2017 NGBT Conference ",
"conferenceitemid": "39",
"amount": 2800,
"actual_amount": "5000.00",
"currency": "INR",
"group": "Lead",
"accompany": "No",
"password": null,
"mailsend": "Yes"
},
"1": {
"id": 2,
"salutation": "Mr.",
"firstname": "Sunil",
"lastname": "Gavaskar",
"gender": "Male ",
"email": "sunil.gavaskar#aggenome.com",
"phone": 1232423415,
"usertype": "commercial",
"institution": "AgriGenome Labs Pvt Ltd",
"department": "Bio Info",
"country": "India",
"conferenceitem": "2017 NGBT Conference ",
"conferenceitemid": "31",
"amount": "3100.00",
"actual_amount": "10000.00",
"currency": "INR",
"group": "Yes",
"accompany": "No",
"password": null,
"mailsend": "Yes"
},
"2": {
"id": 3,
"salutation": "Mr.",
"firstname": "Anil",
"lastname": "Kumble",
"gender": "Male ",
"email": "anil.kumble#aggenome.com",
"phone": 1232423415,
"usertype": "student",
"institution": "AgriGenome Labs Pvt Ltd",
"department": "Support",
"country": "India",
"conferenceitem": "Accompanying Person",
"conferenceitemid": "5",
"amount": 1900,
"actual_amount": "5000.00",
"currency": "INR",
"group": "No",
"accompany": "Yes",
"password": null,
"mailsend": "No"
}
}
const result = {}
Object.keys(obj).forEach(key => {
result[key] = newobj[key]
})
console.log(result)
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
var flag = {"0":"1","2":"1"};
var data = {"0":{"id":1,"salutation":"Dr.","firstname":"Kapil","lastname":"Dev","gender":"Male ","email":"kapil.dev#aggenome.com","phone":1232423415,"usertype":"student","institution":"AgriGenome Labs Pvt Ltd","department":"Lab","country":"India","conferenceitem":"2017 NGBT Conference ","conferenceitemid":"39","amount":2800,"actual_amount":"5000.00","currency":"INR","group":"Lead","accompany":"No","password":null,"mailsend":"Yes"},"1":{"id":2,"salutation":"Mr.","firstname":"Sunil","lastname":"Gavaskar","gender":"Male ","email":"sunil.gavaskar#aggenome.com","phone":1232423415,"usertype":"commercial","institution":"AgriGenome Labs Pvt Ltd","department":"Bio Info","country":"India","conferenceitem":"2017 NGBT Conference ","conferenceitemid":"31","amount":"3100.00","actual_amount":"10000.00","currency":"INR","group":"Yes","accompany":"No","password":null,"mailsend":"Yes"},"2":{"id":3,"salutation":"Mr.","firstname":"Anil","lastname":"Kumble","gender":"Male ","email":"anil.kumble#aggenome.com","phone":1232423415,"usertype":"student","institution":"AgriGenome Labs Pvt Ltd","department":"Support","country":"India","conferenceitem":"Accompanying Person","conferenceitemid":"5","amount":1900,"actual_amount":"5000.00","currency":"INR","group":"No","accompany":"Yes","password":null,"mailsend":"No"}};
//loop the flag
$.each( flag, function(i,c){
//loop the data
$.each(data,function(di,dc){
if(i == di)
{
//data you want
console.log(dc)
}
});
});
</script>
</html>

Categories

Resources