How do I make autocomplete data dynamic? - javascript

$(document).ready(function(){
$('input.autocomplete').autocomplete({
data: {
"Apple": null,
"Microsoft": null,
"Google": 'https://placehold.it/250x250'
},
onAutocomplete: function () {
var mobileSearch = $('#SearchM').val();
var desktopSearch = $('#SearchD').val();
if (desktopSearch.length > 0){ //Desktop Search
window.location.href = '/'+desktopSearch;
}
else {
window.location.href = '/'+mobileSearch;
}
}
});
});
I want to get the data from the database and print it here. It's nonsense to write by hand when you have 5000+ data.
data: {
"Apple": null,
"Microsoft": null,
"Google": 'https://placehold.it/250x250'
},
I was able to pull the data from an address with Fetch, but I couldn't print it.
var x = fetch('/alltags')
.then(response => response.json())
.then(data => {
console.log(data);
return data;
});
What can I do ?

The JQuery Autocomplete Widget expects a source property, containing the options to display.
source accepts either an Array, String or Function.
You could map the response from your fetch into an array of objects.
The source array can include strings: [ "Choice1", "Choice2" ]
OR
Objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]
For example:
$(document).ready(function(){
$('input.autocomplete').autocomplete({
source: [{
label: "Google",
value: "https://placehold.it/250x250"
} ...],
onAutocomplete: function () {
var mobileSearch = $('#SearchM').val();
var desktopSearch = $('#SearchD').val();
if (desktopSearch.length > 0){ //Desktop Search
window.location.href = '/'+desktopSearch;
}
else {
window.location.href = '/'+mobileSearch;
}
}
});
});

Related

How to update an array of objects with data taken from the corresponding elements of another same-size array?

Say I have an array of objects as follows:
data = [
{
"id":34
},
{
"id":35
},
{
"id":36
},
{
"id":37
}
]
and another array as follows:
myNumberArray = [1,2,3,4]
They might be much larger, but the number of elements in both arrays will always be the same. I want to modify each element of data by adding a number attribute, assigning it the value from the corresponding element of myNumberArray.
When done, data will look as follows:
data = [
{
"number":1,
"id":34
},
{
"number":2,
"id":35
},
{
"number":3,
"id":36
},
{
"number":4,
"id":37
}
]
How can I do this?
myNumberArray = [1,2,3,4]
data = [
{
"id":34
},
{
"id":35
},
{
"id":36
},
{
"id":37
}
]
data.forEach((elem, index)=>{
data[index]["number"]=myNumberArray[index];
})
console.log(data);
This should solve your problem.
Explanation:
I used forEach to iterate over the data array, forEach accepts two parameters, the current value at an index, and the value.
Since, yours is a one-to-one mapping, we are using the current index to access the value at the same index in myNumberArray and assigning that new value in data for number key.
Try the following solution:
let myNumberArray = [1,2,3,4];
let data = [
{
"id":34
},
{
"id":35
},
{
"id":36
},
{
"id":37
}
];
const updatedArray = data.map((item,index)=> {
return {
...item,
"number":myNumberArray[index]
}
});
console.log(updatedArray);
let myNumberArray = [1,2,3,4]
let data = [
{
"id":34
},
{
"id":35
},
{
"id":36
},
{
"id":37
}
]
data = data.map( (x, i) => ({ number: myNumberArray[i], id: x.id}) )
console.log(data)
for (let i in myNumberArray) {
Object.assign(data[i], {
number: myNumberArray[i]
})
}

Retrieving data from a complex inconsistent JSON

I'm trying to set variables from a JSON object that I retrieve with a POST query. But the results aren't returned in the same order every time, so it doesn't always work. I'm not sure how to correctly set my variables with the array positions not remaining constant:
var idle = Example1.results[0].data[1].stats.count;
var waiting = Example1.results[1].data[0].stats.count;
(i.e. This works on example 1, but not example 2)
Example1 = {"results":[{"group":{"queueId":"someID"},"data":[{"metric":"oOnQueueUsers","qualifier":"INTERACTING","stats":{"count":2}},{"metric":"oOnQueueUsers","qualifier":"IDLE","stats":{"count":5}}]},{"group":{"queueId":"someID","mediaType":"voice"},"data":[{"metric":"oWaiting","stats":{"count":0}}]}]}
Example2 = {"results":[{"group":{"queueId":"someID","mediaType":"voice"},"data":[{"metric":"oWaiting","stats":{"count":1}}]},{"group":{"queueId":"someID"},"data":[{"metric":"oOnQueueUsers","qualifier":"INTERACTING","stats":{"count":4}},{"metric":"oOnQueueUsers","qualifier":"IDLE","stats":{"count":6}}]}]}
You can use find() and some() to get the result you want.
const example1 = { results: [ { group: { queueId: "someID" }, data: [ { metric: "oOnQueueUsers", qualifier: "INTERACTING", stats: { count: 2 }, }, { metric: "oOnQueueUsers", qualifier: "IDLE", stats: { count: 5 } }, ], }, { group: { queueId: "someID", mediaType: "voice" }, data: [{ metric: "oWaiting", stats: { count: 0 } }], }, ], };
const example2 = { results: [ { group: { queueId: "someID", mediaType: "voice" }, data: [{ metric: "oWaiting", stats: { count: 1 } }], }, { group: { queueId: "someID" }, data: [ { metric: "oOnQueueUsers", qualifier: "INTERACTING", stats: { count: 4 }, }, { metric: "oOnQueueUsers", qualifier: "IDLE", stats: { count: 6 } }, ], }, ], };
const idle1 = example1.results
.find(a => a.data.some(d => d.qualifier === "IDLE"))
.data.find(b => b.qualifier === "IDLE").stats.count;
const waiting1 = example1.results
.find(a => a.data.some(d => d.metric === "oWaiting"))
.data.find(b => b.metric === "oWaiting").stats.count;
const idle2 = example2.results
.find(a => a.data.some(d => d.qualifier === "IDLE"))
.data.find(b => b.qualifier === "IDLE").stats.count;
const waiting2 = example2.results
.find(a => a.data.some(d => d.metric === "oWaiting"))
.data.find(b => b.metric === "oWaiting").stats.count;
console.log({ idle1 }, { waiting1 }, { idle2 }, { waiting2 });
If you cannot depend on the order being the same every time... or given your example data that each object doesn't even have the same properties... then you shouldn't search the resultant json for your data.
Rather then, you need to create your own data structure against which you will be able to search/index and then loop through your json, parsing each level within to decide how to map that particular element to your new data structure.
Here's an example of what you might could do...
var exampleResults1 = {
"results": [{
"group": {
"queueId": "someID"
},
"data": [{
"metric": "oOnQueueUsers",
"qualifier": "INTERACTING",
"stats": {
"count": 2
}
},
{
"metric": "oOnQueueUsers",
"qualifier": "IDLE",
"stats": {
"count": 5
}
}
]
},
{
"group": {
"queueId": "someID",
"mediaType": "voice"
},
"data": [{
"metric": "oWaiting",
"stats": {
"count": 0
}
}]
}
]
}
var newDataSource = {
parseResults: function(resultObj) {
resultObj.results.forEach(function(result) {
var queueID = result.group.queueId;
if (!newDataSource.hasOwnProperty(queueID)) {
newDataSource[queueID] = {
data: {}
};
}
var newDataSourceQueue = newDataSource[queueID];
result.data.forEach(function(dataObj) {
var metric = dataObj.metric;
if (!newDataSourceQueue.data.hasOwnProperty(metric)) {
newDataSourceQueue.data[metric] = {};
}
var queueMetric = newDataSourceQueue.data[metric];
var qualifier = "noQualifier";
if (dataObj.hasOwnProperty("qualifier")) {
qualifier = dataObj.qualifier;
}
queueMetric[qualifier] = {};
var metricQualifier = queueMetric[qualifier];
var statKeys = Object.keys(dataObj.stats);
statKeys.forEach(function(stat) {
if (!metricQualifier.hasOwnProperty(stat)) {
metricQualifier[stat] = dataObj.stats[stat];
}
});
});
});
}
};
newDataSource.parseResults(exampleResults1);
console.log(JSON.stringify(newDataSource));
console.log("IDLE Count = " + newDataSource["someID"]["data"]["oOnQueueUsers"]["IDLE"]["count"]);
Running this code, you should be able to see what the new data structure looks like after its been populated with values from your original json object. Notice how the keys of the objects are values from the original json.
My example code here doesn't take into account all data points in your example result sets... but should be enough to illustrate that you need to understand the data you are getting back and be able to come up with a consolidated data structure to encapsulate it using property keys that come from the actual returned results.

How to get value from JSON object

In my web application, Web API returns following JOSN object.
[
{
"templateID":1,
"template":"{\r\n \"Body\": \"sample date hete hee. Name\"\r\n}"
},
{
"templateID":2,
"template":"{ \"Body\": \"you soon.\" }"
}
]
I need to get Body value from each JSON node by passing templateID. The problem is you can see this JSON has \r\n in some places.How ever I need get the Body value of each node. As an example if I pass 1 I need to get sample date hete hee. Name if pass 2 i need you soon. how can I do it?
I tried this. but its not working
var data2 = [
{
"templateID":1,
"template":"{\r\n \"Body\": \"sample date hete hee. Name\"\r\n}"
},
{
"templateID":2,
"template":"{ \"Body\": \"you soon.\" }"
}
]
function usersBasedOnIDs(isShow,field){
var filtered=data2.filter(function(item){
return item[field] == isShow;
});
console.log(filtered);
}
usersBasedOnIDs(1,'templateID');
item[field] == isShow;
You don't have any object where this condition will be true, i guess you want to filter element based on ID and then see it's body value
var data2 = [{
"templateID": 1,
"template": "{\r\n \"Body\": \"sample date hete hee. Name\"\r\n}"
},
{
"templateID": 2,
"template": "{ \"Body\": \"you soon.\" }"
}
]
function usersBasedOnIDs(isShow, field) {
var filtered = data2.filter(function(item) {
return item[field] == isShow;
});
console.log(filtered && JSON.parse(filtered[0].template).Body);
}
usersBasedOnIDs(1, 'templateID');
Simply try this
var x = [
{
"templateID":1,
"template":"{\r\n \"Body\": \"sample date hete hee. Name\"\r\n}"
},
{
"templateID":2,
"template":"{ \"Body\": \"you soon.\" }"
}
]
for(let i=0;i<x.length;i++){
let y = x[i].template;
console.log(JSON.parse(y).Body);
}
function usersBasedOnIDs(templateId) {
let result = data2.find(function(item) {
return item.templateId === templateId;
});
if(result === undefined) {
return;
} else {
return JSON.parse(result.template).Body;
}
}
console.log(usersBasedOnIDs(1));

Logic to Transform data

I have an api that return me data in following format:
[
{
"_id": 1567362600000,
"KIDate": "2019-09-02",
"KITools": [
{
"data": 1,
"tool": "A"
},
{
"data": 2,
"tool": "B"
}
]
},
{
"_id": 1567519839316,
"KIDate": "2019-09-01",
"KITools": [
{
"data": 2,
"tool": "A"
},
{
"data": 1,
"tool": "C"
}
]
},
{
"_id": 1567519839317,
"KIDate": "2019-08-31",
"KITools": [
{
"data": 0,
"tool": "C"
}
]
},
]
I want to transform this data to get the following arrays:
Result 1 - [“2019-09-02”,”2019-09-01”,”2019-08-31”]
Result 2 - [ {name: ‘A’, data:[1, 2, 0] }, { name: 'B', data: [2, 0, 0] }, { name: 'C', data: [0, 1, 0]}]
Currently I am able to achieve this by using loops and per-defining variables with the tool name like following and looping the api data to push into this variable.
var result2 = [{
name: 'A',
data: []
}, {
name: 'B',
data: []
}, {
name: 'C',
data: []
}];
But this is not the expected behavior, the tool names can change and I have to figure that out dynamically based on the data returned by the api.
What is the best way to achieve this without looping like crazy.
You could use reduce method to get the result with array of dates and object of values for each tool.
const data = [{"_id":1567362600000,"KIDate":"2019-09-02","KITools":[{"data":1,"tool":"A"},{"data":2,"tool":"B"}]},{"_id":1567519839316,"KIDate":"2019-09-01","KITools":[{"data":2,"tool":"A"},{"data":1,"tool":"C"}]},{"_id":1567519839317,"KIDate":"2019-08-31","KITools":[{"data":0,"tool":"C"}]}]
const result = data.reduce((r, {KIDate, KITools}, i) => {
r.dates.push(KIDate);
KITools.forEach(({data: dt, tool}) => {
if(!r.values[tool]) r.values[tool] = Array(data.length).fill(0);
r.values[tool][i] = dt
})
return r;
}, {dates: [], values: {}})
console.log(result)
You can use reduce and forEach with Set and Map
Initialize accumulator as object with dates and data key, dates is a Set and data is Map
For every element add the KIDate to dates key,
Loop over KITools, check if that particular too exists in data Map if it exists update it's value by adding current values to id, if not set it's value as per current values
let data = [{"_id": 1567362600000,"KIDate": "2019-09-02","KITools": [{"data": 1,"tool": "A"},{"data": 2,"tool": "B"}]},{"_id": 1567519839316,"KIDate": "2019-09-01","KITools": [{"data": 2,"tool": "A"},{"data": 1,"tool": "C"}]},{"_id": 1567519839317,"KIDate": "2019-08-31","KITools": [{"data": 0,"tool": "C"}]},]
let final = data.reduce((op,{KIDate,KITools})=>{
op.dates.add(KIDate)
KITools.forEach(({data,tool})=>{
if(op.data.has(data)){
op.data.get(data).data.push(tool)
} else{
op.data.set(data, {name: data, data:[tool]})
}
})
return op
},{dates:new Set(),data: new Map()})
console.log([...final.dates.values()])
console.log([...final.data.values()])
The result1 array can be obtained via a direct .map(). To build the result2 array will require additional work - one approach would be to do so via .reduce() as detailed below:
const data=[{"_id":1567362600000,"KIDate":"2019-09-02","KITools":[{"data":1,"tool":"A"},{"data":2,"tool":"B"}]},{"_id":1567519839316,"KIDate":"2019-09-01","KITools":[{"data":2,"tool":"A"},{"data":1,"tool":"C"}]},{"_id":1567519839317,"KIDate":"2019-08-31","KITools":[{"data":0,"tool":"C"}]}];
const result1 = data.map(item => item.KIDate);
const result2 = data.reduce((result, item) => {
item.KITools.forEach(kitool => {
/* For current item, search for matching tool on name/tool fields */
let foundTool = result.find(i => i.name === kitool.tool);
if (foundTool) {
/* Add data to data sub array if match found */
foundTool.data.push(kitool.data);
} else {
/* Add new tool if no match found and init name and data array */
result.push({
name: kitool.tool,
data: [kitool.data]
});
}
});
return result;
}, []).map((item, i, arr) => {
/* Second phase of processing here to pad the data arrays with 0 values
if needed */
for (let i = item.data.length; i < arr.length; i++) {
item.data.push(0);
}
return item;
});
console.log('result1:', result1);
console.log('result2:', result2);

read json values from ajax success?

I am getting JSON data like below example. Now I want get each value in separate variables like
var reviewDate ='2015-06-01T05:00:00Z'
var developers ='Ankur Shah,Srikanth Vadlakonda,Tony Liu, Qiuming Jie
var reviewers = 'mike,john'
var title='Test project'
var call =$.ajax({
url:url,
type:"GET",
dataType:"json",
headers:{
Accept:"application/json;odata=verbose"
}
});
call.done(function(data,textStatus,jqXHR){
alert("Success!! "+ jqXHR.responseText);
});
call.fail(function(jqXHR,textStatus,errorThrown){
alert("Error retriving Tasks!! "+ jqXHR.responseText);
});
I am getting results in call.done in . How to set those values?
You could do something along these lines:
http://jsfiddle.net/e0mfc1rd/2/
Javascript:
var data = {
results: {
Date_x0020_of_x0020_Review: '2015-06-01T05:00:00Z',
Name_x0020_of_x0020_Developers: {
results: [
{
__metadata: {},
Title: 'Ankur Shah'
},
{
__metadata: {},
Title: 'Tony Liu'
},
{
__metadata: {},
Title: 'Qiuming Jie'
}
]
},
Name_x0020_of_x0020_Reviewers: {
results: [
{
__metadata: {},
Title: 'Mike'
},
{
__metadata: {},
Title: 'John'
}
]
}
}
}
// map the key names.
// you could do something more clever here, like just extracting
// the segment after the last underscore using substring or a regex,
// but for this example we'll do a simple map.
var names = {
'Name_x0020_of_x0020_Reviewers': 'reviewers',
'Name_x0020_of_x0020_Developers': 'developers'
}
// a variable to hold the result.
var processed = {};
// iterate over each key in data.results
// (e.g. 'Name_x0020_of_x0020_Developers', 'Name_x0020_of_x0020_Reviewers', etc.)
Object.keys(data.results).forEach(function(k) {
// if the object indexed at that key has a 'results' property that is an array...
if (Array.isArray((data.results[k] || {}).results)) {
// pluck the Title attribute from each of those entries into a new array.
var values = data.results[k].results;
var titles = values.map(function(v) {
return v.Title;
});
// translate keys like 'Name_x0020_of_x0020_Reviewers'
// into something more palatable
var key = names[k] || k;
// join the titles into a string, separated by a comma
processed[key] = titles.join(',');
}
else if (k.indexOf('Date') === 0) { // key starts with 'Date'
processed[k] = new Date(data.results[k]);
}
});
After which the variable 'processed' would contain:
{
"Date_x0020_of_x0020_Review": "2015-06-01T05:00:00.000Z",
"developers": "Ankur Shah,Tony Liu,Qiuming Jie",
"reviewers": "Mike,John"
}
You could also use UnderscoreJS to get your data from your JSON.
You need to chain some pluck calls and you should get to your data.
Please find the demo below and here at jsFiddle.
To get the parsed object into your comma separated format just use for example: var developers = parsed.developers.join(',');
var resultJSON = {
d: {
__metadata: {},
"Name_x0020_of_x0020_Developers": {
"results": [{
"Title": "Ankur Shah"
}, {
"Title": "Srikanth"
}, {
"Title": "Tony Liu"
}]
},
"Name_x0020_of_x0020_Reviewers": {
"results": [{
"Title": "Name1"
}, {
"Title": "Name2"
}, {
"Title": "Name3"
}]
}
}
};
//console.log(resultJSON);
var names = {
developers: 'Name_x0020_of_x0020_Developers',
reviewers: 'Name_x0020_of_x0020_Reviewers'
};
var parsed = {};
_.each(names, function (name, key) {
parsed[key] = _.chain(resultJSON) // key is developers, reviewers
.pluck(name) // is the name in the JSON e.g. Name_..._Developers
.pluck('results')
.tap(function (data) { // tap is optional and can be removed
console.log('before flatten', data); // it shows the nesting [[]]
})
.flatten(true) // used to remove outer array
.tap(function (data) {
// we now have the result. Next, get the title
console.log('before getting the Title', data);
})
.pluck('Title')
.value();
});
console.log(parsed);
document.getElementById('output').innerHTML = JSON.stringify(parsed, null, 2);
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<pre id="output"></pre>

Categories

Resources