Develop Reference

How can I .filter an object by elements within an array inside an object?

I've been playing around trying to learn in an API project using Postman and conducting tests using JavaScript. So far, I have succeeded with the help of reading on websites and watching YouTube videos. Of course, previous tests and playing around have been fairly easy but now I came to a stop. I really tried to figure this out for several weeks but I need further guidance, a push in the right direction or direct help.
What I'm trying to do is to filter out some of the response to only view objects that contain specific data.
To do that, I'm using a filter where I want all products containing a specific value inside an array "product_option_values".
My first approach was to see if I could sort products having any values from the first array, and it worked. It filters just fine.
var filterSmall = jsonData.products.filter(fs => fs.associations.product_option_values);
My next approach was to get to my goal of filtering out products according to specific values inside this array. I tried many simple .(dot) combinations and pointing to [index] to access it without any luck. (I must add that I know how to access this from a specific product, but that way doesn't work when filtering).
I've also tried other approaches such as:
var filterSmall = jsonData.products.filter(fs => fs.associations["product_option_values", 0, "name"] === "S");
and other similar combinations.
This is a very shortened sample of the structure of "products" which in its full form consists of 20 products and far more values inside of it:
{
"products": [
{
"id": 16,
"manufacturer_name": "Graphic Corner",
"quantity": "0",
"price": "12.900000",
"indexed": "1",
"name": "Mountain fox notebook",
"associations": {
"categories": [
{
"id": "2"
},
{
"id": "6"
}
],
"product_option_values": [
{
"id": "22"
},
{
"id": "23"
}
]
}
},
{
"id": 17,
"manufacturer_name": "Graphic Corner",
"quantity": "0",
"price": "12.900000",
"indexed": "1",
"name": "Brown bear notebook",
"associations": {
"categories": [
{
"id": "2"
},
{
"id": "6"
}
],
"product_option_values": [
{
"id": "23"
},
{
"id": "24"
}
]
}
}
]
}
and here is a small and expanded sample from product_option_values:
{
"product_option_values": [
{
"id": 1,
"id_attribute_group": "1",
"color": "",
"position": "0",
"name": "S"
},
{
"id": 2,
"id_attribute_group": "1",
"color": "",
"position": "1",
"name": "M"
},
{
"id": 3,
"id_attribute_group": "1",
"color": "",
"position": "2",
"name": "L"
}
]
}
How do I proceed? Did I do anything correct or even close to it?
Perhaps I've been staring at this for too long.
Thanks in advance.

If you want to compare nested attributes you have to transform the objects (e.g. by using a map operation), so that the relevant attributes are easily accessible for a comparison. If you want to filter by product_option_value id, you could do something like this:
const jsonData = {
"products": [
{
"id": 16,
"manufacturer_name": "Graphic Corner",
"quantity": "0",
"price": "12.900000",
"indexed": "1",
"name": "Mountain fox notebook",
"associations": {
"categories": [
{
"id": "2"
},
{
"id": "6"
}
],
"product_option_values": [
{
"id": "22"
},
{
"id": "23"
}
]
}
},
{
"id": 17,
"manufacturer_name": "Graphic Corner",
"quantity": "0",
"price": "12.900000",
"indexed": "1",
"name": "Brown bear notebook",
"associations": {
"categories": [
{
"id": "2"
},
{
"id": "6"
}
],
"product_option_values": [
{
"id": "23"
},
{
"id": "24"
}
]
}
}
]
};
const sample = {
"product_option_values": [
{
"id": 22,
"id_attribute_group": "1",
"color": "",
"position": "0",
"name": "S"
},
{
"id": 2,
"id_attribute_group": "1",
"color": "",
"position": "1",
"name": "M"
},
{
"id": 3,
"id_attribute_group": "1",
"color": "",
"position": "2",
"name": "L"
}
]
};
const ids = sample.product_option_values.map((el) => String(el.id));
console.log(ids);
const filtered = jsonData.products.filter((fs) => fs.associations.product_option_values.map((e) => e.id).some((f) => ids.includes(f)));
console.log(filtered);

Extract value inside a multi-nested JSON Object with a "number" as a key name?

I'm trying to get the title of the first song in the JSON Object below but I have to go through a number as a key name.
Normally, we can do like this: title = top100.content.rank.title but it doesn't work with title = top100.content.1.title like the Object below.
My current solution is: title = Object.values(Object.values(top10.data)[1])[0].title which is very long and ugly. If you have a better way, please help me.
top100 = {
"info": {
"category": "Billboard",
"chart": "HOT 100",
"date": "2021-09-11",
"source": "Billboard-API"
},
"content": {
"1": {
"rank": "1",
"title": "Butter",
"artist": "BTS",
"weeks at no.1": "10",
"last week": "7",
"peak position": "1",
"weeks on chart": "15",
"detail": "up"
},
"2": {
"rank": "2",
"title": "Stay",
"artist": "The Kid LAROI & Justin Bieber",
"last week": "1",
"peak position": "1",
"weeks on chart": "8",
"detail": "down"
},
...
}
}

you can use the obj[key] syntax
top100['content'][1]['title']

you can access title of the first song in this way:
top100.content["1"].title

Change JSON format/layout

I have a universal variable on my website which includes line items with relevant details. These line items are reflective of what the user has in their cart. I am integrating with a third party who require the data passed through to them to be formatted slightly different. The below is the data layer currently on my website:
"lineItems": [
{
"product": {
"id": "s83y016b5",
"sku_code": "s83y016b5",
"url": "/en-gb/jeans/p/s83y016b5",
"image_url": "http://www.my-website.com/a/p/shirt.jpeg",
"name": "Jeans",
"manufacturer": "",
"category": "Everyday Wear",
"stock": 116,
"currency": "GBP",
"unit_sale_price": 16,
"unit_price": 16,
"size": "6-9 Months",
"color": "Indigo"
},
"quantity": 1
}
]
The below is what format the third party needs:
"lineItems": [
{
"sku": "s83y016b5",
"name": "Jeans",
"description": "A super great pair of jeans.",
"category": "Everyday Wear",
"other": {"fieldName": "This can be a string or any value you like"}
"unitPrice": 11.99,
"salePrice": 11.99,
"quantity": 2,
"totalPrice": 23.98
"imageUrl": "http://www.my-website.com/a/p/shirt.jpeg",
"productUrl": "http://www.my-website.com/index.php/shirt.html",
}]
Obviously this needs to be dynamic based on the products in the cart. What I intend to do is use javascript to amend the data and send this to the third party via Google Tag Manager.
Any help would be greatly appreciated. Any questions welcome.

This should be close to what you're looking for.
let oldLineItems = "your object";
let newLineItems = {};
newLineItems.lineItems = [];
for (let i in oldLineItems.lineItems) {
newLineItems.lineItems[i] = {};
for (let key in oldLineItems.lineItems[i].product)
{
newLineItems.lineItems[i][key] = oldLineItems.lineItems[i].product[key];
}
}

See code below.
I'm not sure how your lineItems object is set up, but below I just created an array called line Items. If line items is a key in an object which I suspect from your snippet above, you will have to go a level deeper in the for loops used in my example below.
Simply add further details to the new object in the nested for in loops below.
var lineItems =
[
{
"product": {
"id": "s83y016b5",
"sku_code": "s83y016b5",
"url": "/en-gb/jeans/p/s83y016b5",
"image_url": "http://www.my-website.com/a/p/shirt.jpeg",
"name": "Jeans",
"manufacturer": "",
"category": "Everyday Wear",
"stock": 116,
"currency": "GBP",
"unit_sale_price": 16,
"unit_price": 16,
"size": "6-9 Months",
"color": "Indigo",
"description": 'Some random description'
},
"quantity": 1
},
{
"product": {
"id": "s83y01699",
"sku_code": "s83y01699",
"url": "/en-gb/pants/p/s83y016b5",
"image_url": "http://www.my-website.com/a/p/pants.jpeg",
"name": "Pants",
"manufacturer": "",
"category": "Casual Wear",
"stock": 90,
"currency": "au",
"unit_sale_price": 14,
"unit_price": 14,
"size": "6-9 Months",
"color": "Indigo",
"description": 'Some random description'
},
"quantity": 14
},
];
var newLineItems = [];
for(var char in lineItems){
// Adding some values to newLineItems.
newLineItems.push({
sku: lineItems[char].product.sku_code,
name: lineItems[char].product.name,
description: lineItems[char].product.description,
category: lineItems[char].product.category,
quantity: lineItems[char].quantity
});
}
console.log(JSON.stringify(newLineItems));

How can I access a specific item in JSON object based on a value?

I'm having a bit of trouble getting the information I want out of a set of data (see below). Essentially, I need to get the fuel price for each different type of fuel. Originally I was working off the assumption that each item in the data had all 4 types of fuel, so if I wanted the diesel price, I could just say data.locations[i].fuelTypes[3].price. However, let's say a store doesn't have Premium gas - then diesel would be located at fuelTypes[2].
Is there a way to look up the item in the fuelTypes array based on its description? Right now the only thing I can think of would be to iterate over everything in the fuelTypes array and say
if (data.locations[i].fuelTypes[j].description == 'Diesel') {
gasPrice = data.locations[i].fuelTypes[j].price;
}
But this seems like it would be inefficient over a large number of records.
Here's a simplified version of the data I'm working with.
var data = {
"locations": [
{
"name": "Store 1",
"fuelTypes": [
{
"description": "Unleaded",
"price": "1.00",
"currency": "USD"
},
{
"description": "Plus",
"price": "2.00",
"currency": "USD"
},
{
"description": "Premium",
"price": "3.00",
"currency": "USD"
},
{
"description": "Diesel",
"price": "4.00",
"currency": "USD"
}
]
},
{
"name": "Store 2",
"fuelTypes": [
{
"description": "Unleaded",
"price": "1.00",
"currency": "USD"
},
{
"description": "Plus",
"price": "2.00",
"currency": "USD"
},
{
"description": "Premium",
"price": "3.00",
"currency": "USD"
},
{
"description": "Diesel",
"price": "4.00",
"currency": "USD"
}
]
}
]
};

Another approach, since it hasn't been mentioned is to use JSON path.
$..fuelTypes[?(#.description=='Diesel')]
Would return:
[{
"description": "Diesel",
"price": "4.00",
"currency": "USD"
},
{
"description": "Diesel",
"price": "4.00",
"currency": "USD"
}]

If I understand correctly, the essential problem is that you need to convert your data from being indexed to being key=>value.
If you had a function like this:
function toKeyValue(fuelTypesArray) {
ob = {};
for (var i = 0; i < fuelTypesArray.length; i++) {
ob[fuelTypesArray[i].description] = {
price: fuelTypesArray[i].price,
currency: fuelTypesArray[i].currency
};
}
return ob;
}
Then instead of accessing Diesel unreliably like so:
data.locations[i].fuelTypes[3].price
You could use
toKeyValue(data.locations[i].fuelTypes)["Diesel"].price

backbone.js can't fetch data from url?

I had this working the other day, I don't know what I did differently but I can't fetch the data to add into my collection. From tutorials and the docs this code should work right?
var Player = Backbone.Model.extend({});
var PlayersCollection = Backbone.Collection.extend({
url: "data/players.json",
model: Player
});
var playersCollection = new PlayersCollection();
playersCollection.fetch({
success: function(players) {
alert('success')
},
error: function() {
alert('fail')
}
});
I get the error with that, I am thinking I am missing something VERY easy. Maybe it is my JSON, here is a look at it.
[
{
"name": "JELLY Bryant",
"team": "Ballaz",
"team_id": "1",
"number": "24",
},
{
"name": "Lebron James",
"team": "Miami Heat",
"team_id": "2",
"number": "6"
},
{
"name": "Dwayne Wade",
"team": "Miami Heat",
"team_id": "2",
"number": "3"
},
{
"name": "Michael Beasley",
"team": "Miami Heat",
"team_id": "2",
"number": "30"
},
{
"name": "Carmelo Anthony",
"team": "New York Knicks",
"team_id": "3",
"number": "15"
},
{
"name": "Ron Artest",
"team": "New York Knicks",
"team_id": "3",
"number": "5"
},
{
"name": "Karl Malone",
"team": "Los Angeles Lakers",
"team_id": "1",
"number": "33"
},
{
"name": "Damion Lillard",
"team": "Portland Trailblazers",
"team_id": "4",
"number": "3"
},
{
"name": "Westly Matthews",
"team": "Portland Trailblazers",
"team_id": "4",
"number": "55"
},
{
"name": "Wilt Chamberlin",
"team": "Los Angeles Lakers",
"team_id": "1",
"number": "17"
}
]
Inside the network tab (chrome dev tools) it does make a successful get on the json.
Request URL:http://localhost/FRESH/data/players.json
Request Method:GET
Status Code:200 OK (from cache)
I have to be missing something here lol. I had some large code that was getting data from hard coded collection then when I switched to the url method it wasn't working so I stripped it to the bare basics, so it's obviously something ticky-tack I am missing.
WOOOOOOW I saw that I added an extra comma to the end of the first json model "JELLY Bryant" and that solved it, I didnt think that was such a big deal, I just noticed it now.

Your server sends an invalid JSON : you have a dangling comma in the first object. Check http://json.org/ for what constitutes a valid JSON format and some online tools like http://jsonlint.com/ can give you a quick check.
Try
[
{
"name": "JELLY Bryant",
"team": "Ballaz",
"team_id": "1",
"number": "24"
}
]