Currently, I have my JSON and a function that loops through the results and then through the URLs. I am trying to only get the first type value which is detail. I have tried looking for ways to get the first value and found that using [0] can work in some situations but not this one. Am I indexing incorrectly? and is there a more succinct way of coding this nested for loop?
const data = {
"data": {
"results": [{
"name": "Deadpool",
"urls": [{
"type": "detail",
"url": "http://marvel.com/characters/12/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
},
{
"type": "wiki",
"url": "http://marvel.com/universe/Deadpool_(Wade_Wilson)?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
},
{
"type": "comiclink",
"url": "http://marvel.com/comics/characters/1009268/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
}
]
}]
}
};
function test(data) {
const dataArr = data.data['results'];
for (let i = 0; i < dataArr.length; i++) {
console.log(dataArr[i].urls);
const urlArr = dataArr[i].urls
for (let j = 0; j < urlArr.length; j++) {
console.log(urlArr[j].type[0]);
}
}
}
test(data);
A functional approach...
Your question seems a little vague, but I think you're looking for the value of type from the first item in each urls array.
const data = {
"data": {
"results": [{
"name": "Deadpool",
"urls": [{
"type": "detail",
"url": "http://marvel.com/characters/12/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
},
{
"type": "wiki",
"url": "http://marvel.com/universe/Deadpool_(Wade_Wilson)?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
},
{
"type": "comiclink",
"url": "http://marvel.com/comics/characters/1009268/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
}]
}]
}
};
const types = data.data.results.map(({ urls: [first, ...rest] }) => first.type);
console.log(types);
Let's break this down...
data.data.results.map(...)
Array.prototype.map will return a new array with the results of calling the provided function on every element in the results array.
({ urls: ... })
This is called destructuring. It defines a new variable, urls, that is assigned the value of the urls property as we iterate through the results items.
({ urls: [first, ...rest] })
The value of the urls variable we defined will be an array. We only care about the first item in the array, so we'll spread the array, defining a new variable called first that's assigned the value of the first item, and a variable, rest, that will be an array of the rest of the items. Basically, take the head of the array. These operations are called spread and rest, respectively.
({ urls: [first, ...rest] }) => first.type
Finally, return the value of the type property from the first urls item.
If I'm completely wrong
And you want the "details" item within each urls array, then a slight change will suffice:
const data = {
"data": {
"results": [{
"name": "Deadpool",
"urls": [{
"type": "detail",
"url": "http://marvel.com/characters/12/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
},
{
"type": "wiki",
"url": "http://marvel.com/universe/Deadpool_(Wade_Wilson)?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
},
{
"type": "comiclink",
"url": "http://marvel.com/comics/characters/1009268/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
}]
}]
}
};
const urls = data.data.results.map(({ urls }) =>
urls.find(({ type }) => type === 'detail')
);
console.log(urls);
If you'd like to learn more about functional programming, Eric Elliott wrote an excellent set of articles on functional programming in JavaScript. Here's the first one.
If the format of your data is fixed you can use.
You can also try different approaches of safe reading data from object.
You can use utilities like these:
data.data['results'][0].urls[0]
If you are not sure about the 0th index you can use find:
data.data['results'][0].urls.find(url => url.type === 'detail')
Try this-
function test(data)
{
var dataArr = data.data.results;
for (let i = 0; i < dataArr.length; i++) {
const urlArr = dataArr[i].urls
for (let j = 0; j < urlArr.length; j++) {
console.log(urlArr[0].type);
}
}
}
You can use find to find the exact element by type prop.
const data = {
"data": {
"results": [{
"name": "Deadpool",
"urls": [{
"type": "detail",
"url": "http://marvel.com/characters/12/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
},
{
"type": "wiki",
"url": "http://marvel.com/universe/Deadpool_(Wade_Wilson)?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
},
{
"type": "comiclink",
"url": "http://marvel.com/comics/characters/1009268/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
}
]
}]
}
};
function test(data) {
const dataArr = data.data['results'];
for (let i = 0; i < dataArr.length; i++) {
//console.log(dataArr[i].urls);
const urlArr = dataArr[i].urls
const detail = urlArr.find(url => url.type == 'detail');
console.log(detail.url);
}
}
test(data);
Something like this?
const data = {
"data": {
"results": [{
"name": "Deadpool",
"urls": [{
"type": "detail",
"url": "http://marvel.com/characters/12/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
},
{
"type": "wiki",
"url": "http://marvel.com/universe/Deadpool_(Wade_Wilson)?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
},
{
"type": "comiclink",
"url": "http://marvel.com/comics/characters/1009268/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
}
]
}]
}
};
const result = [].concat.apply([], data.data.results.map(x => x.urls.map(y => y.type)))[0];
console.log(result);
const data = {
"data": {
"results": [{
"name": "Deadpool",
"urls": [{
"type": "detail",
"url": "http://marvel.com/characters/12/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
},
{
"type": "wiki",
"url": "http://marvel.com/universe/Deadpool_(Wade_Wilson)?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
},
{
"type": "comiclink",
"url": "http://marvel.com/comics/characters/1009268/deadpool?utm_campaign=apiRef&utm_source=6fa9bcf637a9185ee2e3035cb2d3b465"
}
]
}]
}
};
console.log(data.data.results.map(el => el.urls).flat().find(el => el.type === 'detail'));
Related
I have a problem on an object inside of an array and I wanted to display only that as an array.
data1
const data1 = [
{
"id": "01",
"info": "fefef",
"sub": "hieei",
"details": {
"data": "fruits"
}
},
{
"id": "02",
"info": "fefef",
"sub": "hieei",
"details": {
"data": "things"
}
}
]
expected output
const final= [
{
"data": "fruits"
},
{
"data": "things"
}
]
Code
const final = data.map((data) => { ...data})
map over the array and return a new object using the details property. If you don't return a new object, your new array will still carry references to the objects in the original array. So if you change a value of a property in that original array, that change will be reflected in the new array too, and you probably don't want that to happen.
const data1=[{id:"01",info:"fefef",sub:"hieei",details:{data:"fruits"}},{id:"02",info:"fefef",sub:"hieei",details:{data:"things"}}];
// Make sure you return a copy of the
// details object otherwise if you change the details
// of the original objects in the array
// the new mapped array will carry those object changes
// because the array objects will simply references to the old objects
const out = data1.map(obj => {
return { ...obj.details };
});
console.log(out);
Map through the array and extract its details property:
const data1 = [
{
"id": "01",
"info": "fefef",
"sub": "hieei",
"details": {
"data": "fruits"
}
},
{
"id": "02",
"info": "fefef",
"sub": "hieei",
"details": {
"data": "things"
}
}
]
const res = data1.map(e => e.details)
console.log(res)
Using map and destructuring will simplify.
const data1 = [
{
id: "01",
info: "fefef",
sub: "hieei",
details: {
data: "fruits",
},
},
{
id: "02",
info: "fefef",
sub: "hieei",
details: {
data: "things",
},
},
];
const res = data1.map(({ details: { data } }) => ({ data }));
console.log(res);
// if you just need the details object
const res2 = data1.map(({ details }) => details);
console.log(res2);
My target is if the id from digital_assets and products matches then get the value of URL fro digital_assets and ProductName from products object. I'm able to traverse through the object and get the values of digital_assets and products but need some help to compare these two objects based on IDs to get the value of URL and ProductName. Below is what I've done so far.
var data = [{
"digital_assets": [{
"id": "AA001",
"url": "https://via.placeholder.com/150"
},{
"id": "AA002",
"url": "https://via.placeholder.com/150"
}]
}, {
"products": [{
"id": ["BB001", "AA001"],
"ProductName": "PROD 485"
},{
"id": ["BB002", "AA002"],
"ProductName": "PROD 555"
}]
}
];
$.each(data, function () {
var data = this;
//console.log(data);
$.each(data.digital_assets, function () {
var dAssets = this,
id = dAssets['id'];
// console.log(id);
});
$.each(data.products, function () {
var proData = this,
prod_id = proData['id'];
// console.log(prod_id);
$.each(prod_id, function () {
var arr_id = this;
console.log(arr_id);
});
});
});
Do I need to create new arrays and push the values into the new arrays? Then concat() these array to one. ? Bit lost any help will be appreciated.
Here is one way you can do this via Array.reduce, Array.includes, Object.entries and Array.forEach:
var data = [{ "digital_assets": [{ "id": "AA001", "url": "https://via.placeholder.com/150" }, { "id": "AA002", "url": "https://via.placeholder.com/150" } ] }, { "products": [{ "id": ["BB001", "AA001"], "ProductName": "PROD 485" }, { "id": ["BB002", "AA002"], "ProductName": "PROD 555" } ] } ]
const result = data.reduce((r,c) => {
Object.entries(c).forEach(([k,v]) =>
k == 'digital_assets'
? v.forEach(({id, url}) => r[id] = ({ id, url }))
: v.forEach(x => Object.keys(r).forEach(k => x.id.includes(k)
? r[k].ProductName = x.ProductName
: null))
)
return r
}, {})
console.log(Object.values(result))
You can use Array.prototype.find, Array.prototype.includes and Array.prototype.map to achieve this very gracefully.
let data = [
{
"digital_assets": [
{
"id": "AA001",
"url": "https://via.placeholder.com/150"
},
{
"id": "AA002",
"url": "https://via.placeholder.com/150"
}
]
},
{
"products": [
{
"id": ["BB001", "AA001"],
"ProductName": "PROD 485"
},
{
"id": ["BB002","AA002"],
"ProductName": "PROD 555"
}
]
}
];
// Find the 'digital_assets' array
let assets = data.find(d => d['digital_assets'])['digital_assets'];
// Find the 'products' array
let products = data.find(d => d['products'])['products'];
// Return an array of composed asset objects
let details = assets.map(a => {
return {
id : a.id,
url : a.url
name : products.find(p => p.id.includes(a.id)).ProductName
};
});
console.log(details);
changed answer to fit your needs:
var data = [
{
"digital_assets": [
{
"id": "AA001",
"url": "https://via.placeholder.com/150"
},
{
"id": "AA002",
"url": "https://via.placeholder.com/150"
}
]
},
{
"products": [
{
"id": ["BB001", "AA001"],
"ProductName": "PROD 485"
},
{
"id": ["BB002","AA002"],
"ProductName": "PROD 555"
}
]
}
]
let matchingIds = [];
let data_assetsObject = data.find(element => {
return Object.keys(element).includes("digital_assets")
})
let productsObject = data.find(element => {
return Object.keys(element).includes("products")
})
data_assetsObject["digital_assets"].forEach(da => {
productsObject["products"].forEach(product => {
if (product.id.includes(da.id)){
matchingIds.push({
url: da.url,
productName: product.ProductName
})
}
})
})
console.log(matchingIds);
working fiddle: https://jsfiddle.net/z2ak1fvs/3/
Hope that helped. If you dont want to use a new array, you could also store the respective data within the element you are looping through.
Edit:
I think i know why i got downvoted. My example works by making data an object, not an array. changed the snippet to show this more clearly.
Why is data an array anyway? Is there any reason for this or can you just transform it to an object?
Edit nr2:
changed the code to meet the expectations, as i understood them according to your comments. it now uses your data structure and no matter whats in data, you can now search for the objects containing the digital_assets / products property.
cheers
https://jsfiddle.net/2b1zutvx/
using map.
var myobj = data[0].digital_assets.map(function(x) {
return {
id: x.id,
url: x.url,
ProductName: data[1].products.filter(f => f.id.indexOf(x.id) > -1).map(m => m.ProductName)
};
});
I have two arrays of object, the first array (printerChart, around 80 elements) is made of the following type of objects:
[{
printerBrand: 'Mutoh',
printerModel: 'VJ 1204G',
headsBrand: 'Epson',
headType: '',
compatibilty: [
'EDX',
'DT8',
'DT8-Pro',
'ECH',
],
},
....
]
The second array (items, around 500 elements) is made of the following type of objects:
[
{
"customData": {
"brand": {
"value": {
"type": "string",
"content": "hp"
},
"key": "brand"
},
"printer": {
"value": {
"type": "string",
"content": "c4280"
},
"key": "printer"
}
},
"name": "DT8 XLXL",
"image": {
"id": "zLaDHrgbarhFSnXAK",
"url": "https://xxxxxxx.net/images/xxxxxx.jpg"
},
"brandId": "xxxxx",
"companyId": "xxxx",
"createdAt": "2018-03-26T14:39:47.326Z",
"updatedAt": "2018-04-09T14:31:38.169Z",
"points": 60,
"id": "dq2Zezwm4nHr8FhEN"
},
...
]
What I want to do is to iterate via the second array and, if the part of the name of an item (i.e. DT8) is included in an element of the array 'compatibility' of the first array, I would like to include a new properties to it from the element of the first array: printerBrand. I have tried but somehow the iteration doesn't take place correctly. This is what I tried:
items.forEach((item) => {
printerChart.forEach((printer) => {
if (printer.compatibilty.some(compatibleElem => (
item.name.includes(compatibleElem)))) {
item.printerBrand = printer.printerBrand;
} else {
item.printerBrand = '';
}
});
});
What am I doing wrong?
You do
items.items.forEach(...)
Shouldn't you be doing
items.forEach(...)
?
I suggest to initialize item.printerBrand with an empty string and use a nested approach of some for getting a brand and to exit the loops, if found.
This prevents to get an empty string even if there is a brand to assign.
items.forEach((item) => {
item.printerBrand = '';
printerChart.some(printer => {
if (printer.compatibilty.some(compatibleElem => item.name.includes(compatibleElem))) {
item.printerBrand = printer.printerBrand;
return true;
}
});
});
I know there are plenty of questions about iterating through JSON objects but I haven't found one that quite relates to my exact problem. This is the JSON that I'm trying to iterate through:
psinsights = {
"kind": "pagespeedonline#result",
"id": "/speed/pagespeed",
"responseCode": 200,
"title": "PageSpeed Home",
"score": 90,
"pageStats": {
"numberResources": 22,
"numberHosts": 7,
"totalRequestBytes": "2761",
"numberStaticResources": 16,
"htmlResponseBytes": "91981",
"cssResponseBytes": "37728",
"imageResponseBytes": "13909",
"javascriptResponseBytes": "247214",
"otherResponseBytes": "8804",
"numberJsResources": 6,
"numberCssResources": 2
},
"formattedResults": {
"locale": "en_US",
"ruleResults": {
"AvoidBadRequests": {
"localizedRuleName": "Avoid bad requests",
"ruleImpact": 0.0
},
"MinifyJavaScript": {
"localizedRuleName": "Minify JavaScript",
"ruleImpact": 0.1417,
"urlBlocks": [
{
"header": {
"format": "Minifying the following JavaScript resources could reduce their size by $1 ($2% reduction).",
"args": [
{
"type": "BYTES",
"value": "1.3KiB"
},
{
"type": "INT_LITERAL",
"value": "0"
}
]
},
"urls": [
{
"result": {
"format": "Minifying $1 could save $2 ($3% reduction).",
"args": [
{
"type": "URL",
"value": "http://code.google.com/js/codesite_tail.pack.04102009.js"
},
{
"type": "BYTES",
"value": "717B"
},
{
"type": "INT_LITERAL",
"value": "1"
}
]
}
},
{
"result": {
"format": "Minifying $1 could save $2 ($3% reduction).",
"args": [
{
"type": "URL",
"value": "http://www.gmodules.com/ig/proxy?url\u003dhttp%3A%2F%2Fjqueryjs.googlecode.com%2Ffiles%2Fjquery-1.2.6.min.js"
},
{
"type": "BYTES",
"value": "258B"
},
{
"type": "INT_LITERAL",
"value": "0"
}
]
}
}
]
}
]
},
"SpriteImages": {
"localizedRuleName": "Combine images into CSS sprites",
"ruleImpact": 0.0
}
}
},
"version": {
"major": 1,
"minor": 11
}
};
Now, I'm trying to write a function that iterates through all of the ruleResults objects and returns an array of the localizedRuleName properties. According to the JSON, ruleResults has three member objects (AvoidBadRequests, MinifyJavaScript, and SpriteImages). Each of these has a localizedRuleName property I'm trying to access, but when I print out my array, it's blank. Here's how I've written my function:
function ruleList(results) {
var ruleArray = [];
for(var ruleName in results.formattedResults.ruleResults){
ruleArray[counter] = results.formattedResults.ruleResults[ruleName].localizedRuleName;
}
return ruleArray;
}
console.log(ruleList(psinsights));
Can you guys help me get on the right track? I used basically this same method to iterate through the pageStats of the JSON and it worked perfectly. I'm not sure why I can't get it to work with these deeper nested objects and properties.
your problem is not your iteration, but your undefined variable "counter".
Instead of using a counter can use the "push" function:
function ruleList(results) {
var ruleArray = [];
for(var ruleName in results.formattedResults.ruleResults){
ruleArray.push(results.formattedResults.ruleResults[ruleName].localizedRuleName);
}
return ruleArray;
}
fiddle: https://jsfiddle.net/fo9h56gh/
Hope this helps.
you're probably getting a javascript error since counter is not defined. you can try this:
function ruleList(results) {
var ruleArray = [];
var counter = 0;
for(var ruleName in results.formattedResults.ruleResults){
ruleArray[counter] = results.formattedResults.ruleResults[ruleName].localizedRuleName;
counter++;
}
return ruleArray;
}
I am trying to find a child object in JSON by one of its properties and add more properties to that object. I am not sure how to do this using JQuery (or regular javascript). For example: From the following JSON, I would like to find a category with id 123-1 and then add another category object as a child object. Thanks for your help.
JSON:
{
"result": {
"category":
{
"id": 123,
"name": "cat1",
"rules": [
{
"rulename": "r1",
"regex": ""
},
{
"rulename": "r2",
"regex": ""
}
],
"category":
{
"id": "123-1",
"name": "cat1-1",
"rules": [
{
"rulename": "r1-1",
"regex": ""
}
]
}
}
}
}
Javascript:
function addSubCategory(catId, anotherCatObj) {
//Step1: Find category object with catID in the existing json
//Step3: add the supplied object as a child.
}
function appendCategoryTo(categories, destinationCategoryId, newCategoryToAdd){
var success = false;
for (var i = 0; i < categories.length && !success; i++){
var category = categories[i];
if (category.id == destinationCategoryId){
category.category = category.category || [];
success = !!category.category.push(newCategoryToAdd);
} else if (category.category) {
success = appendCategoryTo(category.category, destinationCategoryId, newCategoryToAdd);
}
}
return success;
}
you have to start at the obj.result.category node in order to take advantage of the recursive ability, but you can easily wrap that method in another that makes it more polite.
but, as-is, here's an example usage:
appendCategoryTo(o.result.category, '123-1', {
id: '123-1-1',
name: 'cat-1-1-1',
rules: []
});
console.log(JSON.stringify(o));
Which adds a new category property to the nested category as an array (i assume this follows the nomenclature) then adds the element to that new array--thus giving you:
{
"result": {
"category": [
{
"id": 123,
"name": "cat1",
"rules": [
{
"rulename": "r1",
"regex": ""
},
{
"rulename": "r2",
"regex": ""
}
],
"category": [
{
"id": "123-1",
"name": "cat1-1",
"rules": [
{
"rulename": "r1-1",
"regex": ""
}
],
"category": [ // BEGIN new addition
{
"id": "123-1-1",
"name": "cat-1-1-1",
"rules": [
]
}
] // END new addition
}
]
}
]
}
}
Example to play with on jsfiddle, btw: http://jsfiddle.net/cqRzX/