I want to map an array of objects and add a property to each item. At the moment the original values get nested. How can I change it to get an item with a flattened object?
code example
import _ from 'lodash';
let arr = [{name: "tim"}, {name: "tom"}]
const id = {id: 1}
console.dir(_.map(arr, item => ({...id, item})));
result:
[ { id: 1, item: { name: 'tim' } },
{ id: 1, item: { name: 'tom' } } ]
wished result:
[ { id: 1, name: 'tim' },
{ id: 1, name: 'tom' } ]
Spread the item as well:
let arr = [{name: "tim"}, {name: "tom"}]
const id = {id: 1}
console.dir(_.map(arr, item => ({ ...id, ...item })));
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
Or use _.merge() with lodash/fp:
const mergeId = id => _.map(_.merge(id))
let arr = [{name: "tim"}, {name: "tom"}]
const id = {id: 1}
result = mergeId(id)(arr)
console.dir(result);
<script src='https://cdn.jsdelivr.net/g/lodash#4(lodash.min.js+lodash.fp.min.js)'></script>
Related
Below is the screenshot, where the first box is not selected right now, but i want to make it selected when come to first time on this page.
I attached the full expo-link. click-here
I want that 'soup' button selected as by-default.
currently it's working like when come to this page, no-one button is selected but after select the data appears on right black area.
In your Soup Screen First initlize your data array before your state and then set a default value in your userOption state like this.
export default function Soup({ navigation, item }) {
const data = [
{ id: 1, value: "Soup" },
{ id: 2, value: "Break fast" },
{ id: 3, value: "Appetizers" },
{ id: 4, value: "Snacks" },
{ id: 5, value: "Salads" },
{ id: 6, value: "Pasta" },
{ id: 7, value: "Burgers" },
{ id: 8, value: "Chicken" },
{ id: 9, value: "Kebab" },
{ id: 10, value: "Main dishes" },
{ id: 11, value: "Desert" },
{ id: 12, value: "Healthy dishes" },
];
const [option, setOption] = useState(null);
const [products, setProducts] = useState(productsList);
const [userOption, setUserOption] = useState(data[0].value);
const selectHandler = (value) => {
// onSelect(value);
setUserOption(value);
};
return <></>;
}
https://snack.expo.dev/HcZKyg9lR
Snack updated kindly check. I hope this help you out.
I'm trying to follow a graphql tutorial, even thoughg I followed it and double checked I keep getting the above error and I have no idea why
dont you really hate when the bot asks you to type more, its mostly code for a reason I dont have a clue and I posted all my code!!!
const express = require("express");
const expressGraphQL = require("express-graphql");
const graphql = require("graphql");
const {
GraphQlSchema,
GraphQlObjectType,
GraphQLString,
GraphQLList,
GraphQLInt,
GraphQLNonNull,
} = graphql;
const app = express();
const authors = [
{ id: 1, name: "J. K. Rowling" },
{ id: 2, name: "J. R. R. Tolkien" },
{ id: 3, name: "Brent Weeks" },
];
const books = [
{ id: 1, name: "Harry Potter and the Chamber of Secrets", authorId: 1 },
{ id: 2, name: "Harry Potter and the Prisoner of Azkaban", authorId: 1 },
{ id: 3, name: "Harry Potter and the Goblet of Fire", authorId: 1 },
{ id: 4, name: "The Fellowship of the Ring", authorId: 2 },
{ id: 5, name: "The Two Towers", authorId: 2 },
{ id: 6, name: "The Return of the King", authorId: 2 },
{ id: 7, name: "The Way of Shadows", authorId: 3 },
{ id: 8, name: "Beyond the Shadows", authorId: 3 },
];
const BookType = new GraphQlObjectType({
name: "Book",
description: "A Book written by an author",
fields: () => ({
id: { type: GraphQLNonNull(GraphQLInt) },
name: { type: GraphQLNonNull(GraphQLString) },
authorId: { type: GraphQLNonNull(GraphQLInt) },
}),
});
const RouteQueryType = new GraphQlObjectType({
name: "Query",
description: "Root Query",
fields: () => ({
books: new GraphQLList(BookType),
description: "List of Books",
resolve: () => books,
}),
});
const schema = new GraphQlSchema({
query: RouteQueryType,
});
app.use(
"/graphql",
expressGraphQL({
schema: schema,
graphiql: true,
})
);
app.listen(5000, () => console.log("server running"));
Wrong capitilisation GraphQlObjectType should be GraphQLObjectType
How do one hide/prevent a column from rendering in fluent-UI DetailsList component.
Define columns you would like to show, like in const mycolumns.
Notice how in example items have three properties - id, name, surname. However, DetailsList shows only id and name. It is because these columns were defined in const mycolumns.
ListWithHiddenColumns.tsx
import React from 'react';
import { DetailsList } from '#fluentui/react/lib/DetailsList';
export interface IListWithHiddenColumnsProps {}
export const ListWithHiddenColumns: React.FC<IListWithHiddenColumnsProps> = () => {
return (
<>
<DetailsList items={myitems} columns={mycolumns} />
</>
);
};
export const myitems = [
{ id: 1, name: 'Jane', surname: 'Oak' },
{ id: 1, name: 'John', surname: 'Smith' }
];
export const mycolumns = [
{
key: 'id',
name: 'Id',
fieldName: 'id',
minWidth: 50,
maxWidth: 50,
isResizable: false
},
{
key: 'name',
name: 'Name',
fieldName: 'name',
minWidth: 100,
maxWidth: 200,
isResizable: true
}
];
how can i do something like that in React-Native:
data = [
{id:1,title:'Action',games:[
{id:1,title:'Game1'},
{id:2,title:'Game2'},
{id:3,title:'Game3'},
]},
{id:2,title:'Horror',games:[
{id:1,title:'Game1'},
{id:2,title:'Game2'},
{id:3,title:'Game3'},
]},
]
Every time the query string is updated, look for the game within the category.
Returns only the categories that contain a game with the searched characters.
Thank you! :D
I don't know if I understand your question correctly. This is my solution.
If you query for "Game5" you will get whole object that contains query
const data = [
{
id: 1,
title: "Action",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 2,
title: "Horror",
games: [
{ id: 1, title: "Game4" },
{ id: 2, title: "Game5" },
{ id: 3, title: "Game6" },
],
},
];
const query = "Game5";
const result = data.find((category) =>
category.games.find((g) => g.title === query)
);
console.log(result);
You can use 'filter' instead of 'find' and result will be an array.
This is example of filter version. I add one more category so you can see how it filter
const data = [
{
id: 1,
title: "Action",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 2,
title: "Horror",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 3,
title: "Comedy",
games: [
{ id: 1, title: "Game5" },
{ id: 2, title: "Game6" },
{ id: 3, title: "Game7" },
],
},
];
const query = "Game2";
const result = data.filter((category) =>
category.games.find((g) => g.title === query)
);
console.log(result);
And you might want to look at life cycle componentDidUpdate if you write class component, but if you write function component you might want to use useEffect
This is official react hook explaination
EDIT: from your comment you might want something like this
const data = [
{
id: 1,
title: "Action",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 2,
title: "Horror",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 3,
title: "Comedy",
games: [
{ id: 1, title: "Game5" },
{ id: 2, title: "Game6" },
{ id: 3, title: "Game7" },
],
},
];
const query = "Game5";
let result = null;
data.forEach((category) => {
const game = category.games.filter((g) => g.title === query);
if (game.length) result = { ...category, games: game };
});
console.log(result);
EDIT
minimal reproduction repo
It's easier to explain in code than English.
The following code works, but it feels like there's gotta be an easier, more MongoDBy/mongoosy way ...
// recipeModel.js, relevant part of the schema
equipments: [{
_id: {
type: Schema.Types.ObjectId,
ref: 'equipments',
},
quantity: {
type: Number,
required: true,
},
}],
// recipeController.js
const equipmentsWorkaround = recipe => Object.assign({}, recipe.toObject(), {
equipments: recipe.toObject().equipments.map(equip => ({
quantity: equip.quantity,
name: equip._id.name,
_id: equip._id._id,
})),
})
const getItem = (req, res, next) => {
Recipes.findById(req.params.id)
.populate('equipments._id')
.then(equipmentsWorkaround) // <--- ugh ...
.then(recipe => res.json(recipe))
.catch(next)
}
I know how to do a "conventional" ref in mongoose, but is what I'm after here even possible in mongo?
desired outcome:
equipments: [
{
quantity: 1,
name: "Pan",
_id: 'some mongo object here...'
},
{
quantity: 3,
name: "Big Knife",
_id: 'some mongo object here...'
}
]