Develop Reference

Get returned data from Jquery Returned Object for each object

I did give this a read but it didn't quite help me.
How do I loop through or enumerate a JavaScript object?
I am trying to get the values of the response
response(data.suggestions);
The below is what I get if I console.log(data.suggestions);
(1) [{…}, {…}]
0:
id: "10"
name: "Iron Man"
1:
id: "93"
name: "Purple Dinosaur Inc."
How can I get the values by the keys.
so something like
response(data.suggestions["name"]);

To get the values of the specific names you can iterate over the array and read the name property of the current object.
obje.forEach(x => console.log(x.name))
To store the values in a new array I would recommend using map()
const valArr = obje.map(x => x.name);
const obje = [{
id: "10",
name: "Iron Man"
},
{
id: "93",
name: "Purple Dinosaur Inc."
}
]
obje.forEach(x => console.log(x.name));
const valArr = obje.map(x => x.name);
console.log(valArr)

This is an array but you are trying to access it as an object.
You need to access the index first.
Use the following:
console.log(data.suggestions[0]["name"]);
That should give you "Iron Man" in this case.
If you want to cycle through them, you can use a for loop.
for(var i = 0; i < data.suggestions.length; i++) {
console.log(data.suggestions[i]["name"]);
}
This will print out each "name" key from all of your objects in the console.

React: Handling an onChange within mapping render

I have created a matrix/table using material ui and have also used a button toggle to select a value.
The table is a matrix where a member can see what their current membership is, and they can choose from other membership types based on age... seniors, juniors, infants.
https://codesandbox.io/s/64j65yrxpw
The demo above will give more clarity. The issue is that when I select an option of yes, no or maybe - all options across all people are selected rather than just that person in that row and across all membership types - (click an option and you will see the problem).
The below is what feeds the table:
const selected = [
{ personId: "0001657", fullName: "Joe Bloggs", seniorStatus: "Yes" },
{ personId: "0001666", fullName: "John Doe", seniorStatus: "No" }
];
and ideally will want something like this returned based on selections:
const newlySelected = [
{ personId: "0001657", fullName: "Joe Bloggs", seniorStatus: "Yes", juniors: "maybe" },
{ personId: "0001666", fullName: "John Doe", seniorStatus: "No", juniors: "no", infants: "yes" },
];
I appreciate that there are two issues here... the toggle not behaving individually and the return of desired json - any help would be awesome. thanks

You have a "too simple" state.
state = {
alignment: "left",
formats: ["bold"]
};
Your state.alignment used by all buttons. If you want to keep it in the form of single component you need to make it 2D array:
[
['<#1 btn value>', '<#2 btn value', ...],
[..., ..., ...]
]
Then when you call setState you need to change the relevant item in the 2D array based on the action location. You have to indexes, one of the row, one of the cell, you can use them.
UPDATE
New state - 2D array
value: [
["no", "no", "no"],
["no", "no", "no"]
]
New ToggleButtonGroup - using rowIdx and cellIdx to have the right position in the 2D array
<ToggleButtonGroup
className={classes.toggleButtonGroup}
value={value[rowIdx][cellIdx]}
exclusive
onChange={(event, val) => this.handleValue(event, val, rowIdx, cellIdx)}
>
New handleValue - using the rowIdx, cellIdx to change the value in the right position.
handleValue = (event, val, rowIdx, cellIdx) => {
const newValue = [...this.state.value]
newValue[rowIdx][cellIdx] = val
this.setState({
value: newValue,
})
}

Javascript Map a Collection

The Issue:
I'm attempting to build a simple search tool. It returns a search query by matching an id to another item with the same id. Without going into the complexities, the issue I'm having is that when my data was organized previously, the map function from javascript returned all the results perfectly. However, now that my data is structured a bit differently (a collection, I think?) ....the ids don't appear to be lining up which causes the wrong search results to show.
The function in question:
const options = this.props.itemIds.map((id) => (
<Option key={this.props.itemSearchList[id].id}>
{this.props.itemSearchList[id].name}
</Option>
));
When the data was structured like this it worked as expected:
Example of previous structure:
const items = [
{
id: 0,
name: "name 0",
tags: ['#sports', '#outdoor', '#clothing'],
},
{
id: 1,
name: "name 1",
tags: ['#sports', '#outdoor', '#clothing'],
},
{
id: 2,
name: "Name 2",
tags: ['#sports', '#outdoor', '#clothing'],
},
Now that the data is a ?collection...the map function doesn't work as anticipated and it returns improper results or none at all: I've been able to use the lodash Map function on this structure successfully in the past.
Here's a screenshot of the new data:
I believe a representative way to write out the example would be:
const newItems = [
0: {
id: 0,
name: "name here",
},
1: {
id: 1,
name: "name here",
},
]
Any recommendations for making this work or need more info? Perhaps I'm misunderstanding the issue entirely, but I believe it has to do with data structure and the map function from JS. I can see results returning, but the id's are not lining up appropriately anymore.
Here's a visual representation of the misalignment. The orange is the search input and it pulling the right result. The green is the misalignment of what it's actually showing because of the data structure and mapping (I assume).

The issue is you were using index and lining that up with id as a sort of pseudo-key which is...beyond fragile. What you should be doing is keying by id (meaing itemsshould be an object) and then having a seperate array that stores the order you want. So items would be an object keyed by id:
const items = {
1: {
id: 1,
name: "name 1",
tags: ['#sports', '#outdoor', '#clothing'],
},
2: {
id: 2,
name: "name 2",
tags: ['#sports', '#outdoor', '#clothing'],
},
9: {
id: 9,
name: "Name 9",
tags: ['#sports', '#outdoor', '#clothing'],
},
};
And then itemIds (which it appears you already have) is an array with the correct order:
const itemIds = [1,9,2];
And then they can be accessed in the right order by looping over that array, and getting the element by said key:
itemIds.map((id) => {
const item = items[id];
// do something with the item
}
Take a look at how Redux recommends normalizing state shape.
https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape

What you call "collections" and "maps" are actually arrays. Now one of the arrays has the objects exactly at the position in the array that matches the id:
items[5].id === 5
Now through sorting /mutating / whatever you change the order so that the element at a certain position doesnt have that as an id:
newItems[5].id // 7 :(
That means that you cannot access the item that easy anymore, you now either have to sort the array again to bring it into order, or you search for an object with the id:
newItems.find(item => item.id === 5) // { id: 5, ... }
Or you switch over to some unsorted collections like a real Map:
const itemsMap = new Map(newItems.map(item => ([item.id, item])));
So you can get a certain item with its id as:
itemsMap.get(5) // { id: 5, ... }
... but the whole thing doesnt have to do with Array.prototype.map at all.

Here was my simple solution:
const options = [];
this.props.itemList.forEach((item) => {
if (this.props.searchResults.includes(item.id)) {
options.push(<Option key={item.id}>{item.name}</Option>);
}
});
Let me know what you think (to the group that tried to help!)

Javascript object as a type of mini database?

Is it possible to use a JavaScript object as a type of mini database? I often find myself needing a kind of database structure when I'm coding in JS but it feels like overkill to use an actual database like MySQL (or similar).
As an example, let's say I need to structure this data as a JS object:
Object idea: Stuff to sell
Items to sell: The junk in the garage
Object structure: List all items including item name, item condition, and item value
In order to make this into a JS object I would maybe write:
var stuffToSell = {};
Then my first item would maybe look like:
var stuffToSell = {
item : "Coffee Maker",
condition : "Good",
price : 5
};
Now to me this seems like I'm on the right track, until I come to add another item and I end up having to use the properties item, condition, and price again in the same JS object — which feels wrong? — or is it?? At this point my brain keeps shouting the word "ARRAY!" at me but I just can't see how I can use an array inside the object, or an object inside an array to achieve what I want.
My end goal (in this simplified example) is to be able to then use object-oriented syntax to be able to access certain items and find out specific information about the item such as price, condition etc. For example if I want to know the price of the "coffee maker" I would like to write something like:
stuffToSell["coffee maker"].price
...and then the result above should be 5.
I feel like I'm on the right track but I think I'm missing the array part? Could someone please tell me what I'm missing or maybe what I'm doing completely wrong! And also if it is wrong to have duplicate property names in the same JS object? For example, is it okay to have:
var stuffToSell = {
item : "Coffee Maker",
price : 5,
item : "Mountain Bike",
price : 10,
item : "26 inch TV",
price : 15
};
...it seems wrong because then how does JS know which price goes with which item??
Thanks in advance :)

You're definitely on the right track!
A lot of people will refer to what you're talking about as a hash.
Here's my suggested structure for you:
var store = {
coffee_maker: {
id: 'coffee_maker',
description: "The last coffee maker you'll ever need!",
price: 5,
},
mountain_bike: {
id: 'mountain_bike',
description: 'The fastest mountain bike around!',
price: 10,
},
tv: {
id: 'tv',
description: 'A big 26 inch TV',
price: 15,
},
}
Having a structure like that will let you do this:
store.mountain_bike.price // gives me 10
Need an array instead, say for filtering or looping over?
Object.keys gives you an Array of all the object's keys in the store ['coffee_maker', 'mountain_bike', 'tv']
// Now we just have an array of objects
// [{id: 'coffee_maker', price: 5}, {id: 'mountain_bike', price: 10} ...etc]
var arr = Object.keys(store).map(el => store[el])
Need to just filter for items that are less than 10?
This will give us an array of products less than 10:
// gives us [{id: 'coffee_maker', price: 5}]
var productsUnder10 = arr.filter(el => el.price < 10)
These techniques can be chained:
var productsOver10 = Object.keys(store)
.map(el => store[el])
.filter(el => el.price > 10)
Need to add a product?
store['new_product'] = {
id: 'new_product',
description: 'The Newest Product',
price: 9000,
}
Here's another way, which would be good to start getting used to.
This is a 'safe' way to update the store, read up on immutability in javascript to learn about it
store = Object.assign({}, store, {
'new_product': {
id: 'new_product',
description: 'The Newest Product',
price: 9000,
}
})
...and another way, that you should also read up on and start using:
This is the object spread operator, basically just an easier way to work with immutable structures
store = {
...store,
'new_product': {
id: 'new_product',
description: 'The Newest Product',
price: 9000,
}
}
Resources
JavaScript Arrow Functions
Object and Array Spread Syntax
Immutable Javascript using ES6 and beyond

You can actually use json or create an array of objects.If using a separate file to store the objects, first load the file. Use array filter method to get an new array which matches the filter condition , like you want to get the item with id 1. This will return an array of objects.
var dict = [{
'id': 1,
'name': 'coffee-mug',
'price': 60
},
{
'id': 2,
'name': 'pen',
'price': 2
}
]
function getItemPrice(itemId) {
var getItem = dict.filter(function(item) {
return item.id === itemId
});
return getItem[0].price;
}
console.log(getItemPrice(1))

JSON objects don't support repeated keys, so you need to set unique keys.
Put an id as your key to group your items:
var stuffToSell = {
'1': {
item: "Coffee Maker",
price: 5
},
'2': {
item: "Mountain Bike",
price: 10
}
.
.
.
}
Now you can access the item's price very fast.
Look at this code snippet (Known Ids)
var stuffToSell = {
'1': {
item: "Coffee Maker",
price: 5
},
'2': {
item: "Mountain Bike",
price: 10
},
'3': {
item: "26 inch TV",
price: 15
}
};
let getPrice = (id) => stuffToSell[id].price;
console.log(getPrice('1'));
See? the access to your items it's fast and your code follows a readable structure.
Look at this code snippet (Item's name as key)
var stuffToSell = {
'Coffee Maker': {
price: 5
},
'Mountain Bike': {
price: 10
},
'26 inch TV': {
price: 15
}
};
let getPrice = (id) => stuffToSell[id].price;
console.log(getPrice('Coffee Maker'));
Look at this code snippet (Item's name: price)
var stuffToSell = {
'Coffee Maker': 5,
'Mountain Bike': 10,
'26 inch TV': 15
};
let getPrice = (id) => stuffToSell[id];
console.log(getPrice('Coffee Maker'));

Remove Attribute names from Json string

Hi lets say I have a JSON string which represent a record in a grid containing 3 columns Id, Name, Status. I'm currently writing some JavaScript logic where you can filter the rows of data by typing some text in the text box. The filter will be applied to data in all columns. So if I type "James" Record 1 below will be returned an if I type None Record 1 and 2 will be returned. The problem is if I type Id, Name, or Status which is not the data but the attribute names, all records are always returned.
Record 1
{
Id: 1,
Name: "James",
Status: "None"
}
Record 2
{
Id: 2,
Name: "Paul",
Status: "None"
}
How can I modify a JSON string so that
{ Id: 2, Name: "Paul", Status: "None"}
will become
{ 2, "Paul", "None"}

Your question is a bit unclear (and I'm afraid Matthias' edit made that matter worse).
{ Id: 1, Name: "James", Status: "None" } is not a valid JSON string, but it is a valid Javascript object. JSON strings need to have their values within quotes.
If you are indeed dealing with a JSON string, with quoted properties, and you simply want the output you've requested, you could do something like this:
var person = '{ "Id": 1, "Name": "James", "Status": "None" }';
person = person.replace(/\s*"[^"]+"\s*:/g,"");
// > person = '{ 1, "James", "None" }'
If you are dealing with a Javascript object, a simple way of getting the values without the property names would be to do something like this:
var person = { Id: 1, Name: "James", Status: "None" };
person = Object.keys(person).map(function(k) { return person[k] }).join(',');
// > person = '1,James,None'
Both options will give you a string that you could search for just the values you're interested in. In the latter scenario, you'd need to add some formatting to turn the outcome into exactly what you have requested, but then given the question I'm assuming presentation is not a big deal.
However, if at all possible, I think your code would much more closely match your intentions if you instead modified the search algorithm to inspect values and not entire objects. You haven't shown us any of the code doing the searching, though, so I can't really add suggestions for that at this point.