I have two different api response that I want to combine. First api response is like below
"Data1":[
{
"name": "First Officer",
"status": "ACTIVE",
"id": "111"
},
{
"name": "Second Officer",
"status": "DELETED",
"id": "222"
},
{
"name": "Third Officer",
"status": "ACTIVE",
"id": "333"
}
],
Data2[],
Data3[]
And the second response is to get latest position of the officer like below
[
{
"id": "111",
"latest_position": "Elm Street"
},
{
"id": "333",
"latest_position": "Newton Sr. Street"
}
]
I need to combine two response from API above to become one array like this
["111","First Officer","Elm Street"]
["333", "Third Officer","Newton Sr. Street"]
But what I get is data like
["333","Third Officer","Elm Street"]
["333", "Third Officer","Newton Sr. Street"]
Do you know where's the error from my code below
$.ajax({
url: api_url+'search?keyword='+keyword,
type: 'GET',
success: function(response) {
//console.log(response);
var keys = Object.keys(response.data);
for (var i = 0; i < keys.length; i++) {
var data = response.data[keys[i]]
for (var j = 0; j < data.length; j++) {
var name = data[j].name;
var sid = data[j].id;
$.ajax({
url: api_url+'positions?filter=%7B%22where%22%3A%7B%22user_id'+sid,
type: 'GET',
success: function(response2) {
//console.log(response);
for (var i = 0; i < response2.length; i++) {
var loc = response2[i].latest_position;
var obj = {
'id' : sid,
'name' : name,
'loc' : loc,
};
arrObj.push(obj);
}
}
})
}
}
console.log(arrObj);
Thank you
You can use Array.find to search the item from the second response by id.
Something like this:
const response1 = [{
"name": "First Officer",
"status": "ACTIVE",
"id": "111"
},
{
"name": "Second Officer",
"status": "DELETED",
"id": "222"
},
{
"name": "Third Officer",
"status": "ACTIVE",
"id": "333"
}
];
const response2 = [{
"id": "111",
"latest_position": "Elm Street"
},
{
"id": "333",
"latest_position": "Newton Sr. Street"
}
];
const merged = response2.map(item => {
const resp1Item = response1.find(r => r.id === item.id);
return { ...item,
...resp1Item
}
});
console.log(merged);
Your issue stems from the fact that the second $.ajax(...) call is asynchronous and by the time its success: callback gets to be evaluated, the fors are finished, so you're getting the last values from the arrays in all of the responses.
The solution is to create a closure around the second $.ajax(....) call, so it will make the definition context available at execution time.
Something around the lines of:
$.ajax({
url: api_url+'search?keyword='+keyword,
type: 'GET',
success: function(response) {
//console.log(response);
var keys = Object.keys(response.data);
for (var i = 0; i < keys.length; i++) {
var data = response.data[keys[i]]
for (var j = 0; j < data.length; j++) {
(function(data){
var name = data.name;
var sid = data.id;
$.ajax({
url: api_url+'positions?filter=%7B%22where%22%3A%7B%22user_id'+sid,
type: 'GET',
success: function(response2) {
//console.log(response);
for (var i = 0; i < response2.length; i++) {
var loc = response2[i].latest_position;
var obj = {
'id' : sid,
'name' : name,
'loc' : loc,
};
arrObj.push(obj);
}
}
})
})(data[j]);
}
}
console.log(arrObj);
Related
I am trying to loop through an array that is part of a JSON object from a page speed insights call to add all of the unused javascript Urls to a google sheet using the script editor.
Here is an example of the JSON object:
"audits": {
"unused-javascript": {
"id": "unused-javascript",
"title": "Remove unused JavaScript",
"description": "Remove unused JavaScript to reduce bytes consumed by network activity. [Learn more](https://web.dev/unused-javascript/).",
"score": 0.43,
"scoreDisplayMode": "numeric",
"numericValue": 1350,
"numericUnit": "millisecond",
"displayValue": "Potential savings of 231 KiB",
"details": {
"type": "opportunity",
"headings": [
{
"key": "url",
"valueType": "url",
"subItemsHeading": {
"key": "source",
"valueType": "code"
},
"label": "URL"
},
{
"key": "totalBytes",
"valueType": "bytes",
"subItemsHeading": {
"key": "sourceBytes"
},
"label": "Transfer Size"
},
{
"key": "wastedBytes",
"valueType": "bytes",
"subItemsHeading": {
"key": "sourceWastedBytes"
},
"label": "Potential Savings"
}
],
"items": [
{
"url": "https://connect.facebook.net/signals/config/1926350194273730?v=2.9.2=stable",
"totalBytes": 140229,
"wastedBytes": 108197,
"wastedPercent": 77.15757011763822
},
{
"url": "https://static.example.com/domain.us.modern.bundle.a02fef045566caf5d464.js",
"totalBytes": 306716,
"wastedBytes": 106243,
"wastedPercent": 34.63892414884589
},
{
"url": "https://www.googletagmanager.com/gtm.js?id=GTM-KZ",
"totalBytes": 127214,
"wastedBytes": 21845,
"wastedPercent": 17.17151000374831
}
],
"overallSavingsMs": 1350,
"overallSavingsBytes": 236285
}
},
I am attempting to loop through the "items" array within the "unused-javascript" object and get all of the urls to show in google sheets.
Here is the code I have within the script editor. When I run this, only one URL shows on the sheet. However, I am trying to get all of the URLs added to the sheet.
function pageSpeed(Url) {
var key = "AIzaSyAyHY";
var serviceUrl = "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=" + Url + "&key=" + key;
var array = [];
if (key == "YOUR_API_KEY")
return "Please enter your API key to the script";
var response = UrlFetchApp.fetch(serviceUrl);
if (response.getResponseCode() == 200) {
var content = JSON.parse(response.getContentText());
if ((content != null) && (content["lighthouseResult"] != null)) {
if (content["captchaResult"]) {
var timetointeractive = content["lighthouseResult"]["audits"]["interactive"]["displayValue"].slice(0, -2);
var firstcontentfulpaint = content["lighthouseResult"]["audits"]["first-contentful-paint"]["displayValue"].slice(0, -2);
var firstmeaningfulpaint = content["lighthouseResult"]["audits"]["first-meaningful-paint"]["displayValue"].slice(0, -2);
var speedindex = content["lighthouseResult"]["audits"]["speed-index"]["displayValue"].slice(0, -2);
var unusedJs = content["lighthouseResult"]["audits"]["unused-javascript"]["details"]["items"];
for (var i = 0; i < unusedJs.items.length; i++) {
var unusedUrl;
unusedUrl = unusedJs[i]["url"]
}
}
else {
var timetointeractive = "An error occured";
var firstcontentfulpaint = "An error occured";
var firstmeaningfulpaint = "An error occured";
var speedindex = "An error occured";
var unusedJs = "An error occured";
}
}
var currentDate = new Date().toJSON().slice(0, 10).replace(/-/g, '/');
array.push([timetointeractive, firstcontentfulpaint, firstmeaningfulpaint, speedindex, currentDate, "complete", unusedUrl]);
Utilities.sleep(1000);
return array;
}
}
Any and all help is appreciated!
You're on the right track.
Take a look below at my usage of Array.prototype.map. That's the simpler route.
Your for loop would work just as well IF you declared unusedUrl outside of (ie. before) the loop AND pushed to an existing array. As it is, there's an issue of scope, so unusedUrl is redeclared on every iteration, meaning you'll only assign the last iteration's value to unusedUrl.
Both solutions are below.
Using map
var content = {
lighthouseResult: {
audits: {
'unused-javascript': {
// Other stuff
details: {
// Other stuff
items: [
{
url:
'https://connect.facebook.net/signals/config/1926350194273730?v=2.9.2=stable',
totalBytes: 140229,
wastedBytes: 108197,
wastedPercent: 77.15757011763822,
},
{
url:
'https://static.example.com/domain.us.modern.bundle.a02fef045566caf5d464.js',
totalBytes: 306716,
wastedBytes: 106243,
wastedPercent: 34.63892414884589,
},
{
url: 'https://www.googletagmanager.com/gtm.js?id=GTM-KZ',
totalBytes: 127214,
wastedBytes: 21845,
wastedPercent: 17.17151000374831,
},
],
overallSavingsMs: 1350,
overallSavingsBytes: 236285,
},
},
},
},
}
var items = content.lighthouseResult.audits['unused-javascript'].details.items
var unusedUrls = items.map(item => item.url) // OR, using es6, items.map(({ url }) => url)
console.log(unusedUrls)
Using for
var items = content.lighthouseResult.audits['unused-javascript'].details.items
var unusedUrls = []
for (var i = 0; i < items.length; i++) {
unusedUrls.push(items[i]['url'])
}
I have WEbDataconnector in Javascript, which download data from .json file and load table:
myConnector.getData = function(table, doneCallback) {
$.getJSON("http://url/api/opls/number/tasks?apiKey", function(resp) {
var feat = resp.data,
tableData = [];
// Iterate over the JSON object
var keys = Object.keys(feat);
for (var i = 0, len = keys.length; i < len; i++) {
tableData.push({
"taskId": feat[keys[i]].taskId,
"owner": feat[keys[i]].owner,
"description": feat[keys[i]].description,
"responsible": feat[keys[i]].responsible,
});
}
table.appendRows(tableData);
doneCallback();
});
My problem is that i have multiple URL, with different numbers and apikeys. And i need combine data from all URLs into one table.
Could anyone please help me out? Thank you.
edit:
If i add more elements to data.push() method it ends with:"null is not an object" because some objects in JSON are null,
example of JSON:
"1026533": {
"taskId": 1026533,
"opl": 6919,
"owner": "name",
"description": "text",
"responsible": "name",
"taskStart": {
"date": "2016-03-21 13:28:11.000000",
"timezone_type": 3,
"timezone": "Europe\/Prague"
but sometimes there is an element taskStart with null:
"1026535": {
"taskId": 1026535,
"opl": 6919,
"owner": "name",
"description": "text",
"responsible": "name",
"taskStart": null,
how can i check this and push all data or null? thank you
Use recursion and named function expression with a list of URL.
myConnector.getData = function (table, doneCallback) {
var urls = [ /* the urls */]
if (urls.length == 0) return doneCallback();
$.getJSON(urls.shift(), function callback(resp) {
var feat = resp.data,
tableData = [];
// Iterate over the JSON object
var keys = Object.keys(feat);
for (var i = 0, len = keys.length; i < len; i++) {
tableData.push({
"taskId": feat[keys[i]].taskId,
"owner": feat[keys[i]].owner,
"description": feat[keys[i]].description,
"responsible": feat[keys[i]].responsible,
});
}
table.appendRows(tableData);
var url = urls.shift();
if (url) return $.getJSON(url, callback); // recursion happens here
doneCallback();
});
}
Keep an array containing all the urls that you need to fetchs.
urls = [
'http://url/api/opls/number1/tasks?apiKey1',
'http://url/api/opls/number2/tasks?apiKey2',
'http://url/api/opls/number3/tasks?apiKey3'
];
Then iterate over the array and send an ajax request on each url.
urls.forEach(function(url) {
$.getJSON(url, function(resp) {
var feat = resp.data,
let data = [];
// Iterate over the JSON object
var keys = Object.keys(feat);
for (var i = 0, len = keys.length; i < len; i++) {
data.push({
"taskId": feat[keys[i]].taskId,
"owner": feat[keys[i]].owner,
"description": feat[keys[i]].description,
"responsible": feat[keys[i]].responsible,
});
}
table.appendRows(data);
doneCallback();
});
});
I have a json structured like this:
{
"total": 4367,
"page": 1,
"per_page": 10,
"paging": {
"next": "/videos?query=second%20world%20war&per_page=10&access_token=XXX&page=2",
"previous": null,
"first": "/videos?query=second%20world%20war&per_page=10&access_token=XXX&page=1",
"last": "/videos?query=second%20world%20war&per_page=10&access_token=XXX&page=437"
},
"data": [
{
"uri": "/videos/128373915",
"name": "The Fallen of World War II",
I need to access name and I tried:
$.ajax( {
type: "GET",
url: url,
dataType: 'json',
success: vimeoResultsFunc
});
function vimeoResultsFunc(data){
for (var i = 0; i < data.length; i++) {
console.log(data[i].name);
}
}
But i get nothing
You're missing a level there. The vimeoResultsFunc will receive the top level object, then you have an array called data. Based on what you have it should be
function vimeoResultsFunc(data){
for (var i = 0; i < data.data.length; i++) {
console.log(data.data[i].name);
}
}
In the function vimeoResultsFunc(data) just add console.log(data) and see what is inside the data object. Probably this object does not have the structure you expect.
I have one code to iterate the code and want the item of product by compare the category for example :
if category is "car" then product inside that array should be iterate with index not by name
html
<ul class="menulist"></ul>
<div class="content"></div>
js
var jsonData;
$(document).ready(function () {
$.ajax({
url: "product.json",
dataType: "json",
error: function () {
},
success: getData
});
function getData(data) {
alert(data)
for (i = 0; i < data.length; i++) {
var menulistdata = data[i].category,
menulist = '<li class="" data-att="' + menulistdata + '">' + menulistdata + '</li>'
$(".menulist").append(menulist);
}
$('.menulist li').on('click', function () {
var list = $(this).text();
for (i = 0; i < data.length; i++) {
alert(i)
var productData = data[i].products;
if (data[i].category == list) {
$(".content").append(productData.BMG[i].image + productData.BMG[i].date + productData.BMG[i].size);
}
}
})
}
});
json
[
{
"category":"car",
"products": {
"BMG" : [{
"image" : "images/cars/BMW.jpg",
"date": "5-May-2015",
"type": "JPGE image",
"size": "1132 KB"
}],
"verna":[{
"image" : "images/cars/Verna.jpg",
"date": "5-May-2015",
"type": "JPGE image",
"size": "1132 KB"
}]
}
},
{
"category":"Nature",
"products": {
"Nature Mood At Night" : [{
"image" : "images/nature/Night.jpg",
"date": "5-May-2015",
"type": "JPGE image",
"size": "1132 KB"
}],
"Snowfall on Hut":[{
"image" : "images/nature/Hut.jpg",
"date": "5-May-2015",
"type": "JPGE image",
"size": "1132 KB"
}]
}
}
]
Working Fiddle
data[0].products is of type object – you cannot iterate over an object by indices, only by named keys. Use the for..in statement to iterate over an object.
for( var key in data[0].products ) {
console.log( data[0].products[key] );
}
See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in
What I understand is you want to append all your car properties. So here is code fiddle
$('.menulist li').on('click', function () {
var list = $(this).text();
for (i = 0; i < data.length; i++) {
var productData = data[i].products;
if (data[i].category == list) {
for(z in productData){
for(x in productData[z][0]){
$(".content").append(productData[z][0][x])
}
$(".content").append('<br>')
}
}
}
})
This question already has answers here:
How to get the difference between two arrays in JavaScript?
(84 answers)
Closed 7 years ago.
Using jQuery I would like to compare 2 objects:
sourceArray:
var origArray = [{
"Name": "Single",
"URL": "xxx",
"ID": 123
},
{
"Name": "Double",
"URL": "yyy",
"ID": 345
},
{
"Name": "Family",
"URL": "zzz",
"ID": 567
}];
destination array
var destArray = [{
"Name": "Single",
"URL": "xxx",
"ID": 123
},
{
"Name": "Double",
"URL": "yyy",
"ID": 888
},
{
"Name": "Family",
"URL": "zzz",
"ID": 567
}];
What I would like to do, is compare the target object with the source object based on the ID and find the mis-matched entries with a description on the resultant object. So the result will look like this:
var resultArray = [{
"Name": "Double",
"URL": "yyy",
"ID": 888,
"desc": "missing in source"
},
{
"Name": "Double",
"URL": "yyy",
"ID": 345,
"desc": "missing in destination"
}];
Any quick help is really appreciated.
This isn't a good use of jQuery, but here is some vanilla javascript that does what you want.
function objDiff(array1, array2) {
var resultArray = []
array2.forEach(function(destObj) {
var check = array1.some(function(origObj) {
if(origObj.ID == destObj.ID) return true
})
if(!check) {
destObj.desc = 'missing in source'
resultArray.push(destObj)
}
})
array1.forEach(function(origObj) {
var check = array2.some(function(destObj) {
if(origObj.ID == destObj.ID) return true
})
if(!check) {
origObj.desc = 'missing in destination'
resultArray.push(origObj)
}
})
return resultArray
}
https://jsfiddle.net/9gaxsLbz/1/
If you are wanting to dedupe your array, this will work:
var merged = origArray.concat(destArray);
var unique = merged.filter(function(item) {
return ~this.indexOf(item.ID) ? false : this.push(item.ID);
}, []);
Fiddle: https://jsfiddle.net/Ljzor9c6/
If you are only wanting items that were duped, you can easily invert the condition:
var merged = origArray.concat(destArray);
var dupes = merged.filter(function(item) {
return ~this.indexOf(item.ID) ? true : !this.push(item.ID);
}, []);
You can loop through the items in the first array and put the ID's in a map, then loop through the items in the second array and remove the matching ID's and add the missing.
Then just loop through the map to create the objects in the resulting array:
var origArray = [{
"Name": "Single",
"URL": "xxx",
"ID": 123
},
{
"Name": "Double",
"URL": "yyy",
"ID": 345
},
{
"Name": "Family",
"URL": "zzz",
"ID": 567
}];
var destArray = [{
"Name": "Single",
"URL": "xxx",
"ID": 123
},
{
"Name": "Double",
"URL": "yyy",
"ID": 888
},
{
"Name": "Family",
"URL": "zzz",
"ID": 567
}];
var map = {};
for (var i = 0; i < origArray.length; i++) {
map[origArray[i].ID] = 'source';
}
for (var i = 0; i < destArray.length; i++) {
var id = destArray[i].ID;
if (id in map) {
delete map[id];
} else {
map[id] = 'destination';
}
}
var resultArray = [];
for (key in map) {
var arr = map[key] == 'source' ? origArray : destArray;
for (var i = 0; arr[i].ID != key; i++) ;
resultArray.push({
Name: arr[i].Name,
URL: arr[i].URL,
ID: arr[i].ID,
desc: 'missing in ' + map[key]
});
}
// show result in StackOverflow snippet
document.write(JSON.stringify(resultArray));
var result = [];
for(var i = 0; i < oa.length; i++) {
var idx = mIndexOf(oa[i].ID);
if(idx > -1) {
oa.splice(i, 1);
da.splice(idx, 1);
}
}
for(var i = 0; i < oa.length; i++) {
var ln = result.length;
result[ln] = oa[i];
result[ln].desc = "missing in destination";
}
for(var i = 0; i < da.length; i++) {
var ln = result.length;
result[ln] = da[i];
result[ln].desc = "missing in origin";
}
function mIndexOf(id) {
for(var i = 0; i < oa.length; i++)
if(oa[i].ID == id)
return i;
return -1;
}
console.log(result);
0: Object
ID: 345
Name: "Double"
URL: "yyy"
desc: "missing in destination"
1: Object
ID: 888
Name: "Double"
URL: "yyy"
desc: "missing in origin"
jsfiddle DEMO
For things like this, you should use lodash. With lodash you can just do this:
var resultArray = _.defaults(destArray, origArray);