finding common key in array of objects in javascript

finding common key in array of objects in javascript - javascript

let array = [
{ en: "", ar: "", sp: "", fr: "" },
{ en: "", ar: "", sp: "", gu: "" },
{ en: "", ar: "", sp: "", hi: "" },
{ en: "", ar: "", sp: "", la: "" },
{ en: "", ar: "", sp: "" },
];
I have this array of objects and want to find the common key from all objects
the final output should be like
let array2 =[ "en", "ar", "sp"]
so the filter should only return the key's which are available in every objects. I am not able to find the best algorithm for this sorting. A little guidance will also be very helpful.

const array = [
{ en: "", ar: "", sp: "", fr: "" },
{ en: "", ar: "", sp: "", gu: "" },
{ en: "", ar: "", sp: "", hi: "" },
{ en: "", ar: "", sp: "", la: "" },
{ en: "", ar: "", sp: "" }]
const allKeys = [...new Set(array.flatMap(i=>Object.keys(i)))]
const commonKeys = allKeys.filter(i=>!array.some(j=>!Object.keys(j).includes(i)))
console.log(commonKeys)

let array = [
{ en: "", ar: "", sp: "", fr: "" },
{ en: "", ar: "", sp: "", gu: "" },
{ en: "", ar: "", sp: "", hi: "" },
{ en: "", ar: "", sp: "", la: "" },
{ en: "", ar: "", sp: "" },
];
let keysArr = array.map(x => Object.keys(x));
let commonKeys = keysArr.pop().reduce((res, x) => {
const isEvery = keysArr.every((i) => i.includes(x));
if (!res.includes(x) && isEvery) {
res.push(x);
}
return res;
}, []);
console.log(commonKeys);

Pretty easy to do with reduce, Object.keys, filter, and includes.
First pass in reduce you just store the keys of the object.
Each pass after that you are just looking for the keys that exist in the current row.
let array = [
{ en: "", ar: "", sp: "", fr: "" },
{ en: "", ar: "", sp: "", gu: "" },
{ en: "", ar: "", sp: "", hi: "" },
{ en: "", ar: "", sp: "", la: "" },
{ en: "", ar: "", sp: "" },
];
const commonKeys = array.reduce((commonKeys, item, index) => {
// get the keys
const itemKeys = Object.keys(item);
// if we are at first index, return the keys
// If we are > 1, filter only the keys that are in the object
return !index ? itemKeys : commonKeys.filter(key => itemKeys.includes(key));
}, []);
console.log(commonKeys);

Related

How to extract a set of isolated 2D arrays from a larger 2D array?

Let's say I have a 2D array filled with a lot of blank spaces, but there are smaller isolated 2D arrays contained between these blanks. For example:
var aVO = [
["col1", "col2", "col3", "col4", "col5", "col6", "col7", "col8", "col9"],
["", "", "", "", "", "", "", "", ""],
[1, 2, 3, "", "", "", "", "", ""],
[4, 5, 6, "", "", "a", "b", "", ""],
[7, 8, 9, "", "", "c", "d", "", 1],
["", "", "", "", "", "", "", "", 2],
["", "", "z", "y", "", "", "", "", 3],
["", "x", "w", "v", "", 7, 7, 7, ""],
["", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", ""],
["", "A1", "B1", "", "", "", "", "", ""],
["", "A2", "B2", "C2", "", "", "HELLO", "", ""]
]
I'm interested in converting this into eight 2D arrays:
[["col1", "col2", "col3", "col4", "col5", "col6", "col7", "col8", "col9"]]
[[1,2,3],[4,5,6],[7,8,9]]
[["a","b"],["c","d"]]
[[1],[2],[3]]
[["", "z","y"],["x","w", "v"]]
[[7,7,7]]
[["A1","B1",""],["A2","B2","C2"]]
[["HELLO"]]
What's the best approach to extract these smaller 2D arrays? I was thinking about iterating row-by-row but it's hard to visualize how to elegantly extract data like [["", "z","y"],["x","w","v"]] (note how "x" isn't directly below "z", and therefore the resulting 2D array needs to reflect that shift). Thanks for any help!

Here's an approach using Set and Map instances to keep track of groups of cells:
Create cells out of the 2d array
Create an empty Map in which we will store for each cell with a value to which group it belongs
Loop over each cell
If a cell is empty, go to the next one
If a cell has a value
Create a group for it. The group marks a top left and bottom right position and keeps track of a set of cells that belong to it.
Check which adjacent cells already belong to a group
Merge the newly created group with all of the groups found for adjacent cells
Collect all unique groups from the Map
For each unique group, slice out the part between its top left and bottom right corner from the initial grid
const Cell = memo(
(r, c) => ({ r, c }),
([r, c]) => `${r}_${c}`
);
Cell.neighbors = ({ r, c }) => [
Cell(r, c + 1), // Right
Cell(r + 1, c), // Down
Cell(r, c - 1), // Left
Cell(r - 1, c), // Up
];
// Create a single-cell group
const Group = (cell) => ({
minR: cell.r,
maxR: cell.r + 1,
minC: cell.c,
maxC: cell.c + 1,
cells: new Set([cell])
});
// Merge two groups into a new one
Group.merge = (g1, g2) => ({
minR: Math.min(g1.minR, g2.minR),
maxR: Math.max(g1.maxR, g2.maxR),
minC: Math.min(g1.minC, g2.minC),
maxC: Math.max(g1.maxC, g2.maxC),
cells: new Set([ ...g1.cells, ...g2.cells ])
});
// Take a grid and slice out the part covered by a group
Group.extractFromGrid = grid => ({ minR, maxR, minC, maxC }) => grid
.slice(minR, maxR)
.map(row => row.slice(minC, maxC));
// Create all cells with their values
const grid = getData();
const allCells = grid.flatMap(
(row, ri) => row.map(
(value, ci) => Cell(ri, ci)
)
);
const groupPerCell = new Map();
allCells.forEach(current => {
const inIsland = grid[current.r][current.c] !== "";
if (inIsland) {
const newGroup = Cell
.neighbors(current)
.filter(c => groupPerCell.has(c))
.map(c => groupPerCell.get(c))
.reduce(Group.merge, Group(current));
// Store a reference to the group for each member
newGroup.cells.forEach(c => {
groupPerCell.set(c, newGroup);
});
}
});
const allGroups = [...new Set(groupPerCell.values())];
const allValues = allGroups.map(Group.extractFromGrid(grid));
console.log(allValues);
function memo(f, hash) {
const cache = {};
return (...args) => {
const k = hash(args);
if (!cache[k]) cache[k] = f(...args);
return cache[k];
}
}
function getData() { return [
["col1", "col2", "col3", "col4", "col5", "col6", "col7", "col8", "col9"],
["", "", "", "", "", "", "", "", ""],
[1, 2, 3, "", "", "", "", "", ""],
[4, 5, 6, "", "", "a", "b", "", ""],
[7, 8, 9, "", "", "c", "d", "", 1],
["", "", "", "", "", "", "", "", 2],
["", "", "z", "y", "", "", "", "", 3],
["", "x", "w", "v", "", 7, 7, 7, ""],
["", "", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", "", ""],
["", "A1", "B1", "", "", "", "", "", ""],
["", "A2", "B2", "C2", "", "", "HELLO", "", ""]
]; }

Create one object out of two separate arrays based on index

I'm trying to take this array of arrays,
const parsedCsvData = [
[
"Passage",
"Percentage of",
"constraint2",
"1",
"2",
"",
"",
"",
"",
"",
"",
""
],
[
"",
"",
"",
"",
"",
"",
"",
"",
"Avg A Param",
"",
"0.3",
"0.9"
],
[
"Item",
"Include",
"constraint1",
"1",
"4",
"",
"",
"",
"",
"",
"",
""
],
[
"",
"",
"",
"",
"",
"",
"",
"",
"Item Identifier",
"I105_15201",
"",
""
]
]
and populate this object with their values
const template = {
"attributeName": "",
"constraintType": "",
"objectType": "",
"filters": [
{
"objectType": "",
"attributeName": "",
"values": "",
"valueLowerBound": "",
"valueUpperBound": ""
}
],
"upperBound": "",
"description": "",
"lowerBound": ""
}
each array from parsedCsvData was a row in a CSV file I parsed. Each value in the array of arrays is indexed based off another array
const csvHeaders = [
"objectType",
"constraintType",
"description",
"lowerBound",
"upperBound",
"attributeName",
"referenceValue",
"scope",
"filters",
"values",
"valueLowerBound",
"valueUpperBound"
]
For example, in the first sub array of parsedCsvData Passage is at index 0 and the value for objectType in csvHeaders. Similarly, description is at index 2 and is constraint1 and constraint2 respectively.
Additionally, if there exists a filters value at index 8 in the csv a new row was created. After parsing, this created a new sub array for each filter value. However, each filters value and the following three, values, valueLowerBound and valueUpperBound belong in the same template object as a subarray under the filters key.
Here is an example of the output I am trying to accomplish given what I posted above. Never mind the empty key/value pairs.
[{
"constraintType": "Percentage of",
"objectType": "Passage",
"filters": [
{
"attributeName": "Avg A Param",
"values": "",
"valueLowerBound": "0.3",
"valueUpperBound": "0.9"
} // there may be multiple filter objects as part of this array
],
"upperBound": "2",
"description": "constraint2",
"lowerBound": "1"
},
{
"constraintType": "Include",
"objectType": "Item",
"filters": [
{
"attributeName": "Item Identifier",
"values": "I105_15201",
"valueLowerBound": "",
"valueUpperBound": ""
}
],
"upperBound": "4",
"description": "constraint1",
"lowerBound": "1"
}
]
I've tried mapping the csvHeaders array, attempting to use their indices and then do a map of the the parsedCsvData values and assign them to the template object, but can't seem to get it to work. Any help would be much appreciated.

An approach by checking the first element of the nested arra for either assign a new object or assign a new nested object.
const
parsedCsvData = [["Passage", "Percentage of", "constraint2", "1", "2", "", "", "", "", "", "", ""], ["", "", "", "", "", "", "", "", "Avg A Param", "", "0.3", "0.9"], ["Item", "Include", "constraint1", "1", "4", "", "", "", "", "", "", ""], ["", "", "", "", "", "", "", "", "Item Identifier", "I105_15201", "", ""]],
template = ["objectType", "constraintType", "description", "lowerBound", "upperBound", "xxxx", "referenceValue", "scope", "attributeName", "values", "valueLowerBound", "valueUpperBound"],
result = parsedCsvData.reduce((r, a) => {
const
assign = (object, target, value) => {
const
keys = target.split('.'),
last = keys.pop();
keys.reduce((o, k) => o[k] = o[k] || {}, object)[last] = value;
};
if (a[0]) {
r.push(a.reduce((t, v, i) => {
if (v) assign(t, template[i], v);
return t;
}, {}));
} else {
r[r.length - 1].filters = r[r.length - 1].filters || [];
r[r.length - 1].filters.push(a.reduce((t, v, i) => {
if (v) assign(t, template[i], v);
return t;
}, {}));
}
return r;
}, []);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

How to segregate the value of a JavaScript objects into Array efficiently?

I have this following JSON data;
data=[
{
_id: "5b377db0c97f730014b6eb12",
title: "Integrated Compute Platform - Operations Lead",
applylink:
"https://www.techgig.com/jobs/Integrated-Compute-Platform-Operations-Lead/60221",
jd: "",
companyname: "JP Morgan Chase Bank",
location: "Hyderabad/Secunderabad",
experience: "5-7 yrs",
salary: "",
type: "",
skills: "Cisco",
startdate: "",
enddate: "",
created: "",
source: "techgig",
timestamp: 1530363306.1030896,
__v: 0
},
{
_id: "5b377db0c97f730014b6eb13",
title: "angular-ui/ux",
applylink: "https://www.techgig.com/jobs/angular-ui-ux/60213",
jd: "",
companyname: "Capgemini",
location: "Pune",
experience: "6-9 yrs",
salary: "",
type: "",
skills: "UI / UX",
startdate: "",
enddate: "",
created: "",
source: "techgig",
timestamp: 1530363306.1030896,
__v: 0
},
{
_id: "5b377db0c97f730014b6eb14",
title: "BCM - Big Data CoE Lead",
applylink: "https://www.techgig.com/jobs/BCM-Big-Data-CoE-Lead/60226",
jd: "",
companyname: "Capgemini",
location: "Pune",
experience: "17-20 yrs",
salary: "",
type: "",
skills: "Big Data",
startdate: "",
enddate: "",
created: "",
source: "techgig",
timestamp: 1530363306.1030896,
__v: 0
},
{
_id: "5b377db0c97f730014b6eb15",
title: "Staff QA Engineer, Open VisaNet",
applylink:
"https://www.techgig.com/jobs/Staff-QA-Engineer-Open-VisaNet/60218",
jd: "",
companyname: "Visa",
location: "Bengaluru/Bangalore",
experience: "7-12 yrs",
salary: "",
type: "",
skills: "Erlang",
startdate: "",
enddate: "",
created: "",
source: "techgig",
timestamp: 1530363306.1030896,
__v: 0
},
{
_id: "5b377db0c97f730014b6eb16",
title: "Hadoop - Big Data Developer",
applylink:
"https://www.techgig.com/jobs/Hadoop-Big-Data-Developer/60225",
jd: "",
companyname: "Morgan Stanley",
location: "Mumbai",
experience: "4-7 yrs",
salary: "",
type: "",
skills: "Big Data",
startdate: "",
enddate: "",
created: "",
source: "techgig",
timestamp: 1530363306.1030896,
__v: 0
},
{
_id: "5b377db0c97f730014b6eb17",
title: "Specialist UX/UI Designer",
applylink:
"https://www.techgig.com/jobs/Specialist-UX-UI-Designer/60215",
jd: "",
companyname: "Hewlett Packard",
location: "Bengaluru/Bangalore",
experience: "5-9 yrs",
salary: "",
type: "",
skills: "UI / UX",
startdate: "",
enddate: "",
created: "",
source: "techgig",
timestamp: 1530363306.1030896,
__v: 0
},
{
_id: "5b377db0c97f730014b6eb18",
title: "Hadoop - Big Data Developer",
applylink:
"https://www.techgig.com/jobs/Hadoop-Big-Data-Developer/60225",
jd: "",
companyname: "Morgan Stanley",
location: "Mumbai",
experience: "4-7 yrs",
salary: "",
type: "",
skills: "Big Data",
startdate: "",
enddate: "",
created: "",
source: "techgig",
timestamp: 1530363306.1030896,
__v: 0
}]
Data is lot more than that, around 1.5 MB coming from a JSON file hosted online, this is just sample, I have to filter the jobs on the basis of location, skill, experience.
What I thought of to add everything to the state then preprocess the data in the 3 diff array with the following format
{
value: jobData.xxx,
label: jobData.xxx
}
Push the data in react-select, get from that and use a filter for the whole state and display the result in a nice UI.
The problem here is data is really huge, and no option to get chunks from backend, I have to use the full data at once.
My questions are:-
How to store the data skill, location and exp segregate in diff array without the duplicated elements, I tried with a map, duplicated element are coming. Iterating through the whole array again to check if it's not there would not be efficient?
Is there a better way you all propose to do it?
Thanks
Edit-1
So basically what i want 3 json object
var skill = {
value: jobData.skills,
label: jobData.skills
};
var location = {
value: jobData.location,
label: jobData.location
};
var experience = {
value: jobData.experience,
label: jobData.experience
};
pushed in three array:
var skillList=[];
var locationList=[];
var experienceList=[];
Which will be inturn set in react state
Edit-2
This is the whole code:
import React from "react";
import Style from "./Landing.module.scss";
import JobImage from "./2663543.jpg";
import Select from "react-select";
class LandingPage extends React.Component {
state = {
data: [
//the data mentiond above
],
skills: [],
location: [],
experience: []
};
componentDidMount() {
var skillList=[];
var locationList=[];
var experienceList=[];
this.state.data.map(jobData => {
var skill = {
value: jobData.skills,
label: jobData.skills
};
var location = {
value: jobData.location,
label: jobData.location
};
var experience = {
value: jobData.experience,
label: jobData.experience
};
});
}
render() {
return (
<>
<div className={Style.bigHead}>
<div className={Style.bigImage}>
<img src={JobImage} alt="Job Image"></img>
</div>
<div className={Style.filters}>
<Select
isMulti
name="location"
options={this.state.location}
className="basic-multi-select"
classNamePrefix="select"
/>
<Select
isMulti
name="experience"
options={this.state.experience}
className="basic-multi-select"
classNamePrefix="select"
/>
<Select
isMulti
name="skill"
options={this.state.skills}
className="basic-multi-select"
classNamePrefix="select"
/>
</div>
</div>
</>
);
}
}
export default LandingPage;

This is one way to do it
let skillsList = [...new Set(data.map(({skills}) => skills))].map(value => ({value, label:value}));
let locationList = [...new Set(data.map(({location}) => location))].map(value => ({value, label:value}));
let experienceList = [...new Set(data.map(({experience}) => experience))].map(value => ({value, label:value}));
let data=[{ _id: "5b377db0c97f730014b6eb12", title: "Integrated Compute Platform - Operations Lead", applylink: "https://www.techgig.com/jobs/Integrated-Compute-Platform-Operations-Lead/60221", jd: "", companyname: "JP Morgan Chase Bank", location: "Hyderabad/Secunderabad", experience: "5-7 yrs", salary: "", type: "", skills: "Cisco", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }, { _id: "5b377db0c97f730014b6eb13", title: "angular-ui/ux", applylink: "https://www.techgig.com/jobs/angular-ui-ux/60213", jd: "", companyname: "Capgemini", location: "Pune", experience: "6-9 yrs", salary: "", type: "", skills: "UI / UX", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }, { _id: "5b377db0c97f730014b6eb14", title: "BCM - Big Data CoE Lead", applylink: "https://www.techgig.com/jobs/BCM-Big-Data-CoE-Lead/60226", jd: "", companyname: "Capgemini", location: "Pune", experience: "17-20 yrs", salary: "", type: "", skills: "Big Data", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }, { _id: "5b377db0c97f730014b6eb15", title: "Staff QA Engineer, Open VisaNet", applylink: "https://www.techgig.com/jobs/Staff-QA-Engineer-Open-VisaNet/60218", jd: "", companyname: "Visa", location: "Bengaluru/Bangalore", experience: "7-12 yrs", salary: "", type: "", skills: "Erlang", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }, { _id: "5b377db0c97f730014b6eb16", title: "Hadoop - Big Data Developer", applylink: "https://www.techgig.com/jobs/Hadoop-Big-Data-Developer/60225", jd: "", companyname: "Morgan Stanley", location: "Mumbai", experience: "4-7 yrs", salary: "", type: "", skills: "Big Data", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }, { _id: "5b377db0c97f730014b6eb17", title: "Specialist UX/UI Designer", applylink: "https://www.techgig.com/jobs/Specialist-UX-UI-Designer/60215", jd: "", companyname: "Hewlett Packard", location: "Bengaluru/Bangalore", experience: "5-9 yrs", salary: "", type: "", skills: "UI / UX", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }, { _id: "5b377db0c97f730014b6eb18", title: "Hadoop - Big Data Developer", applylink: "https://www.techgig.com/jobs/Hadoop-Big-Data-Developer/60225", jd: "", companyname: "Morgan Stanley", location: "Mumbai", experience: "4-7 yrs", salary: "", type: "", skills: "Big Data", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }];
let skillsList = [...new Set(data.map(({skills}) => skills))].map(value => ({value, label:value}));
let locationList = [...new Set(data.map(({location}) => location))].map(value => ({value, label:value}));
let experienceList = [...new Set(data.map(({experience}) => experience))].map(value => ({value, label:value}));
console.log(skillsList);
console.log(locationList);
console.log(locationList);
Another way, which may or may not be more performant I don't know, but it iterates data once, not 3 times
let data=[{ _id: "5b377db0c97f730014b6eb12", title: "Integrated Compute Platform - Operations Lead", applylink: "https://www.techgig.com/jobs/Integrated-Compute-Platform-Operations-Lead/60221", jd: "", companyname: "JP Morgan Chase Bank", location: "Hyderabad/Secunderabad", experience: "5-7 yrs", salary: "", type: "", skills: "Cisco", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }, { _id: "5b377db0c97f730014b6eb13", title: "angular-ui/ux", applylink: "https://www.techgig.com/jobs/angular-ui-ux/60213", jd: "", companyname: "Capgemini", location: "Pune", experience: "6-9 yrs", salary: "", type: "", skills: "UI / UX", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }, { _id: "5b377db0c97f730014b6eb14", title: "BCM - Big Data CoE Lead", applylink: "https://www.techgig.com/jobs/BCM-Big-Data-CoE-Lead/60226", jd: "", companyname: "Capgemini", location: "Pune", experience: "17-20 yrs", salary: "", type: "", skills: "Big Data", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }, { _id: "5b377db0c97f730014b6eb15", title: "Staff QA Engineer, Open VisaNet", applylink: "https://www.techgig.com/jobs/Staff-QA-Engineer-Open-VisaNet/60218", jd: "", companyname: "Visa", location: "Bengaluru/Bangalore", experience: "7-12 yrs", salary: "", type: "", skills: "Erlang", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }, { _id: "5b377db0c97f730014b6eb16", title: "Hadoop - Big Data Developer", applylink: "https://www.techgig.com/jobs/Hadoop-Big-Data-Developer/60225", jd: "", companyname: "Morgan Stanley", location: "Mumbai", experience: "4-7 yrs", salary: "", type: "", skills: "Big Data", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }, { _id: "5b377db0c97f730014b6eb17", title: "Specialist UX/UI Designer", applylink: "https://www.techgig.com/jobs/Specialist-UX-UI-Designer/60215", jd: "", companyname: "Hewlett Packard", location: "Bengaluru/Bangalore", experience: "5-9 yrs", salary: "", type: "", skills: "UI / UX", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }, { _id: "5b377db0c97f730014b6eb18", title: "Hadoop - Big Data Developer", applylink: "https://www.techgig.com/jobs/Hadoop-Big-Data-Developer/60225", jd: "", companyname: "Morgan Stanley", location: "Mumbai", experience: "4-7 yrs", salary: "", type: "", skills: "Big Data", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }];
let {skillsList, locationList, experienceList} = data.reduce((acc, {skills, location, experience}) => {
acc.skillsList.add(skills);
acc.locationList.add(location);
acc.experienceList.add(experience);
return acc;
}, {skillsList:new Set, locationList:new Set, experienceList:new Set});
skillsList = [...skillsList].map(value => ({value, label:value}));
locationList = [...locationList].map(value => ({value, label:value}));
experienceList = [...experienceList].map(value => ({value, label:value}));
console.log(skillsList);
console.log(locationList);
console.log(experienceList);

Warning: Cannot reinitialise Datatable issue

Am using Jquery Datatable to render table.
By default the page wont display any table and there's a search box on the page, on entering a value it will make a call to database and render the datatable according to the response from database.
So now once the datatable is rendered, if I enter a new value in search box and call the datatable to be rendered it gives me above error.
I tried bdestroy and redrawing table but nothing seems to work for me.
$(document).ready(function() {
var resultArray = [
["290013", "TEST OF ENSEMBLE", "11-25-2016", "", "", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["290015", "XXX5", "10-19-2016", "test", "$33.00", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "2002", "XXX5", "XXX5", "XXX5", "", "1864", "2017", "VERSION", "23004746", "XXX5", "", "One Time", "", "", "", "", "", "", "21004482", "9189", "Feature Set", "20003880", "XXX5", "XXX5", "BASE", "19-APR-2017", "04-18-2017", "3877", "", ""],
["290015", "XXX5", "10-19-2016", "test", "$33.00", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "", "", "", "", "", "1865", "Deluxe", "EDITION", "", "", "", "", "", "", "", "", "", "", "", "9190", "Charge", "", "", "", "", "", "", "", "", ""]
];
console.log(JSON.stringify(resultArray));
var table = $('#example').DataTable({
columns: [{
title: 'Item Master Number',
name: 'ItemMasterNumber'
}, {
title: 'Description',
name: 'Description'
}, {
title: 'First Processing Date',
name: 'FirstProcessingDate'
}, {
title: 'Alias',
name: 'Alias'
}, {
title: 'Master Price',
name: 'MasterPrice'
}, {
title: 'Product Id',
name: 'ProductId'
}, {
title: 'Product Description',
name: 'ProductDescription'
}, {
title: 'Feature Set#',
name: 'FeatureSetId'
}, {
title: 'Feature Set Code',
name: 'FeatureSetCode'
}, {
title: 'Feature Set Name',
name: 'FeatureSetName'
}, {
title: 'Feature Set Description',
name: 'Feature Set Description'
}, {
title: 'Enablement Type',
name: 'Enablement Type'
}, {
title: 'Feature Id',
name: 'FeatureId'
}, {
title: 'Attribute Name',
name: 'AttributeName'
}, {
title: 'Attribute Value',
name: 'AttributeValue'
}],
data: resultArray,
rowsGroup: [
// Always the array (!) of the column-selectors in specified
// order to which rows groupping is applied.
// (column-selector could be any of specified in:
// https://datatables.net/reference/type/column-selector)
'ItemMasterNumber:name', 'Description:name', 'FirstProcessingDate:name', 'Alias:name', 'MasterPrice:name',
'ProductId:name',
'ProductDescription:name',
'FeatureSetId:name',
'FeatureSetCode:name'
],
pageLength: '20',
});
});
I am calling above code each time the value is entered in the search box and clicked on a button besides it.
All I want is to display the new data on the Datatable.
How can I resolve this error.

Here's a JSFiddle/snippet I threw together real quick, please let me know if this helps: https://jsfiddle.net/p9pot11h/5/
var dataTable_ = null;
var resultArray = [
["290013", "TEST OF ENSEMBLE", "11-25-2016", "", "", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["290015", "XXX5", "10-19-2016", "test", "$33.00", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "2002", "XXX5", "XXX5", "XXX5", "", "1864", "2017", "VERSION", "23004746", "XXX5", "", "One Time", "", "", "", "", "", "", "21004482", "9189", "Feature Set", "20003880", "XXX5", "XXX5", "BASE", "19-APR-2017", "04-18-2017", "3877", "", ""],
["290015", "XXX5", "10-19-2016", "test", "$33.00", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "", "", "", "", "", "1865", "Deluxe", "EDITION", "", "", "", "", "", "", "", "", "", "", "", "9190", "Charge", "", "", "", "", "", "", "", "", ""]
];
var resultArray2 = [
["290013", "TEST OF ENSEMBLE", "11-25-2016", "", "", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""]
];
$(document).ready(function() {
//console.log(JSON.stringify(resultArray));
dataTable_ = $('#example').DataTable({
columns: [{
title: 'Item Master Number',
name: 'ItemMasterNumber'
}, {
title: 'Description',
name: 'Description'
}, {
title: 'First Processing Date',
name: 'FirstProcessingDate'
}, {
title: 'Alias',
name: 'Alias'
}, {
title: 'Master Price',
name: 'MasterPrice'
}, {
title: 'Product Id',
name: 'ProductId'
}, {
title: 'Product Description',
name: 'ProductDescription'
}, {
title: 'Feature Set#',
name: 'FeatureSetId'
}, {
title: 'Feature Set Code',
name: 'FeatureSetCode'
}, {
title: 'Feature Set Name',
name: 'FeatureSetName'
}, {
title: 'Feature Set Description',
name: 'Feature Set Description'
}, {
title: 'Enablement Type',
name: 'Enablement Type'
}, {
title: 'Feature Id',
name: 'FeatureId'
}, {
title: 'Attribute Name',
name: 'AttributeName'
}, {
title: 'Attribute Value',
name: 'AttributeValue'
}],
data: resultArray,
rowsGroup: [
// Always the array (!) of the column-selectors in specified
// order to which rows groupping is applied.
// (column-selector could be any of specified in:
// https://datatables.net/reference/type/column-selector)
'ItemMasterNumber:name', 'Description:name', 'FirstProcessingDate:name', 'Alias:name', 'MasterPrice:name',
'ProductId:name',
'ProductDescription:name',
'FeatureSetId:name',
'FeatureSetCode:name'
],
pageLength: '20',
});
$('#search-button').on('click', function() {
var data = resultArray2;
var dataToSearch = $('#search').val();
if (dataToSearch == '') {
data = [];
}
// AJAX CALL TO GET RESULTS HERE
// SUCCESS FUNCTION TO CALL INSIDE AJAX SUCCESS
rePopulateTable(data);
});
});
var rePopulateTable = function(data) {
dataTable_.clear();
dataTable_.rows.add(data);
dataTable_.draw();
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet" />
<body>
<input type="search" id="search" placeholder="Search" />
<input type="button" id="search-button" value="Search DB" />
<br/>
<br/>
<br/>
<table id="example">
</table>
</body>

Json data reading using jquery [duplicate]

This question already has answers here:
How can I access object properties containing special characters?
(2 answers)
Closed 6 years ago.
how can i get the value of User[keywords][] using jquery ? i tried to get like console.log(User[keywords]); but it does not work
{
"User[firstName]": "",
"User[lastName]": "",
"User[city]": "",
"User[countryCode]": "",
"User[gender]": "",
"User[userType]": "",
"User[zip]": "",
"User[email]": "",
"User[age]": "",
"User[fullAddress]": "",
"CustomValue[11][fieldValue]": "",
"CustomValue[5][fieldValue]": "",
"CustomValue[1][fieldValue]": "",
"CustomValue[6][fieldValue]": "",
"CustomValue[7][fieldValue]": "",
"CustomValue[2][fieldValue]": "",
"CustomValue[8][fieldValue]": "",
"CustomValue[9][fieldValue]": "",
"CustomValue[4][fieldValue]": "",
"CustomValue[10][fieldValue]": "",
"CustomValue[3][fieldValue]": "",
"User[teams][]": null,
"": "",
"User[keywords][]": [
"52",
"53",
"54"
],
"User[searchType]": "1",
"User[keywordsExclude][]": null,
"User[id]": "",
"yt1": ""
}

If this json is assigned to variable obj:
console.log(obj['User[keywords][]']);

I suppose you need to use your data with [] square brackets to target specific keys:
var data = {
"User[firstName]": "",
"User[lastName]": "",
"User[city]": "",
"User[countryCode]": "",
"User[gender]": "",
"User[userType]": "",
"User[zip]": "",
"User[email]": "",
"User[age]": "",
"User[fullAddress]": "",
"CustomValue[11][fieldValue]": "",
"CustomValue[5][fieldValue]": "",
"CustomValue[1][fieldValue]": "",
"CustomValue[6][fieldValue]": "",
"CustomValue[7][fieldValue]": "",
"CustomValue[2][fieldValue]": "",
"CustomValue[8][fieldValue]": "",
"CustomValue[9][fieldValue]": "",
"CustomValue[4][fieldValue]": "",
"CustomValue[10][fieldValue]": "",
"CustomValue[3][fieldValue]": "",
"User[teams][]": null,
"": "",
"User[keywords][]": [
"52",
"53",
"54"
],
"User[searchType]": "1",
"User[keywordsExclude][]": null,
"User[id]": "",
"yt1": ""
};
var pre = '<pre>'+ JSON.stringify(data["User[keywords][]"], 0, 0) +'</pre>'
document.write(pre)

Develop Reference

JavaScript is the programming language of the Web.

finding common key in array of objects in javascript - javascript

Related

How to extract a set of isolated 2D arrays from a larger 2D array?

Create one object out of two separate arrays based on index

How to segregate the value of a JavaScript objects into Array efficiently?

Warning: Cannot reinitialise Datatable issue

Json data reading using jquery [duplicate]

Categories

Resources