New in version realm@10.5.0.
You can use the Realm.Dictionary data type to manage a collection of unique String keys paired with values. The dictionary data maps to the Javascript Object type.
For example, creating a HomeOwner Realm object where the home property is defined as a dictionary type could look like this:
realm.create('HomeOwner', { name: 'Anna Smith', home: {address: '2 jefferson lane', yearRenovated: 1994, color: 'blue'},});You can define a dictionary of mixed values for a Realm object model in three ways:
set the data type of your field to an empty object, "{}".
Add the data type before the brackets to create a dictionary with values of a specific type. For example, "int{}" to specify that dictionary values must be integers or "string{}" to specify that dictionary values must be strings.
Define the object type explicitly. This is necessary for using object Types in your Realm as ditionary values.
class HomeOwner extends Realm.Object { static schema = { name: 'HomeOwner', properties: { name: 'string', home: '{}', pets: { type: 'dictionary', objectType: 'Pet', optional: true, }, }, };}Use an interface that extends the Realm.Dictionary type to define the syntax for your dictionary object. All of your Realm Objects for this class must follow the syntax specified in the interface.
interface Home extends Realm.Dictionary { address?: string; color?: string; price?: number; yearRenovated?: number;}class HomeOwner extends Realm.Object<HomeOwner> { name!: string; home!: Home; pets?: Pet[]; static schema: ObjectSchema = { name: 'HomeOwner', properties: { name: 'string', home: 'mixed{}', pets: { type: 'dictionary', objectType: 'Pet', optional: true, }, }, };}Realm disallows the use of . or $ characters in map keys. You can use percent encoding and decoding to store a map key that contains one of these disallowed characters.
const mapKey = "kitchen.windows";const encodedMapKey = mapKey.replace(".", "%2E");In the following CreateHomeOwner example, we create a new object with a dictionary property.
The CreateHomeOwner component does the following:
Create React state that represents the homeowner's name and address, respectively.
Get access to an open realm instance by calling the useRealm() hook within the component.
Create a component method SubmitHomeOwner() that performs a write transaction and creates a new HomeOwner object based on the TextInput values for the homeowner's name and address, respectively.
Add an onPress event on the submit button that calls SubmitHomeOwner()
1const CreateHomeOwner = () => {2 const [homeOwnerName, setHomeOwnerName] = useState('John Smith');3 const [address, setAddress] = useState('1 Home Street');4 const realm = useRealm();56 const submitHomeOwner = () => {7 8 realm.write(() => {9 realm.create('HomeOwner', {10 name: homeOwnerName,11 12 13 home: {14 address,15 },16 });17 });18 };19 return (20 <View>21 <TextInput22 value={homeOwnerName}23 onChangeText={text => setHomeOwnerName(text)}24 />25 <TextInput value={address} onChangeText={text => setAddress(text)} />26 <Button27 title='Submit Home Owner'28 onPress={submitHomeOwner}29 />30 </View>31 );32};To filter a query, run collection.filtered() to specify a subset of results based on the value(s) of one or more object properties. You can specify results based on the value of a dictionary's properties by using bracket notation.
You can also determine whether a results collection has a certain key or value by using <dictionary>.@keys or <dictionary>.@values. For instance, if you had a HomeOwner collection with a nested home dictionary, you could return all HomeOwner objects with a home with a "price" property by running the query: home.@keys = "price".
In the following HomeList example, we query for objects that have dictionary properties.
The HomeList component does the following:
Performs a query for all homeowners by passing the HomeOwner class to the useQuery hook.
Performs a query for homeowners with a listed price by passing collection.filtered() the query: home.@keys = "price".
Performs a query for the summer hill house by running collection.filtered() using bracket notation to find the first homeowner with an address set to "Summerhill St." and getting their home by using dot syntax.
Performs a query for all homeowners with any field with a value of red by passing collection.filtered() the query: 'home.@values = "red"'. We then get the first homeowner's home.
Display the results of our queries in the UI by rendering information about the homes
1const HomeList = () => {2 3 const homeOwners = useQuery(HomeOwner);45 6 7 const listedPriceHomes = useQuer(HomeOwner, homeOwners => {8 return homeOwners.filtered('home.@keys = "price"');9 });1011 12 13 const summerHillHouse = useQuery(HomeOwner, homeOwners => {14 return homeOwners.filtered('home["address"] = "Summerhill St."');15 })[0].home;1617 18 19 const redHouse = useQuery(HomeOwner, homeOwners => {20 return homeOwners.filtered('home.@values = "red"');21 })[0].home;2223 return (24 <View>25 <Text>All homes:</Text>26 {homeOwners.map(homeOwner => (27 <View>28 <Text>{homeOwner.home.address}</Text>29 </View>30 ))}3132 <Text>All homes with a price:</Text>33 {listedPriceHomes.map(homeOwner => (34 <View>35 <Text>{homeOwner.home.address}</Text>36 <Text>{homeOwner.home.price}</Text>37 </View>38 ))}3940 <Text>Summer Hill House:</Text>41 <Text>{summerHillHouse.address}</Text>42 <Text>{summerHillHouse.color}</Text>4344 <Text>Red House:</Text>45 <Text>{redHouse.address}</Text>46 </View>47 );48};1const HomeList = () => {2 3 const homeOwners = useQuery(HomeOwner);45 6 7 const listedPriceHomes = useQuery(HomeOwner, homeOwners => {8 return homeOwners.filtered('home.@keys = "price"');9 });1011 12 13 const summerHillHouse = useQuery(HomeOwner, homeOwners => {14 return homeOwners.filtered('home["address"] = "Summerhill St."');15 })[0].home;1617 18 19 const redHouse = useQuery(HomeOwner, homeOwners => {20 return homeOwners.filtered('home.@values = "red"');21 })[0].home;2223 return (24 <View>25 <Text>All homes:</Text>26 {homeOwners.map(homeOwner => (27 <View>28 <Text>{homeOwner.home.address}</Text>29 </View>30 ))}3132 <Text>All homes with a price:</Text>33 {listedPriceHomes.map(homeOwner => (34 <View>35 <Text>{homeOwner.home.address}</Text>36 <Text>{homeOwner.home.price}</Text>37 </View>38 ))}3940 <Text>Summer Hill House:</Text>41 <Text>{summerHillHouse.address}</Text>42 <Text>{summerHillHouse.color}</Text>4344 <Text>Red House:</Text>45 <Text>{redHouse.address}</Text>46 </View>47 );48};Update a dictionary's property by using the dictionary.set() method or dot notation to set its property to a new value.
In the following UpdateHome example, we update a dictionary's property.
The UpdateHome component does the following:
useRealm() hook
updateAddress() that performs a write
dictionary.set() to set the home's address to the value of the address state variable. It also uses dot syntax to set the yearRenovated to 2004.
Render a TextInput that displays and changes the address state variable.
updateAddress()
1const UpdateHome = ({homeOwnerName}) => {2 const [address, setAddress] = useState('');3 const realm = useRealm();4 const homeOwner = useQuery(5 HomeOwner,6 homeOwners => {7 return homeOwners.filtered(`name == '${homeOwnerName}'`);8 },9 [homeOwnerName],10 )[0];1112 const updateAddress = () => {13 14 realm.write(() => {15 16 homeOwner.home.set({address});17 18 homeOwner.home.yearRenovated = 2004;19 });20 };2122 return (23 <View>24 <Text>{homeOwner.name}</Text>25 <TextInput26 value={address}27 onChangeText={setAddress}28 placeholder='Enter new address'29 />30 <Button31 onPress={updateAddress}32 title='Update Address'33 34 />35 </View>36 );37};1const UpdateHome = ({homeOwnerName}: {homeOwnerName: string}) => {2 const [address, setAddress] = useState('');3 const realm = useRealm();4 const homeOwner = useQuery(5 HomeOwner,6 homeOwners => {7 return homeOwners.filtered(`name == '${homeOwnerName}'`);8 },9 [homeOwnerName],10 )[0];1112 const updateAddress = () => {13 14 realm.write(() => {15 16 homeOwner.home.set({address});17 18 homeOwner.home.yearRenovated = 2004;19 });20 };2122 return (23 <View>24 <Text>{homeOwner.name}</Text>25 <TextInput26 value={address}27 onChangeText={setAddress}28 placeholder='Enter new address'29 />30 <Button31 onPress={updateAddress}32 title='Update Address'33 />34 </View>35 );36};To delete members of a dictionary, use the dictionary.remove() method with an array of properties to remove from the dictionary.
In the following HomeInfo example, we delete members of a dictionary.
The HomeInfo component does the following:
Get access to an open realm instance by calling the useRealm() hook within the component.
Retrieve the first homeowner that matches the name passed into the component as a prop. We do this by getting the first value returned from the query: useQuery(HomeOwner).filtered(`name == '${homeOwnerName}'`).
Create a component method deleteExtraHomeInfo() that performs a write transaction and calls dictionary.remove() to remove the yearRenovated and color properties.
Render the homeowner's name and home address in the UI.
Add an onPress event on the "Delete extra home info" button that calls deleteExtraHomeInfo().
1const HomeInfo = ({homeOwnerName}) => {2 const realm = useRealm();3 const homeOwner = useQuery(4 HomeOwner,5 homeOwners => {6 return homeOwners.filtered(`name == '${homeOwnerName}'`);7 },8 [homeOwnerName],9 )[0];1011 const deleteExtraHomeInfo = () => {12 realm.write(() => {13 14 homeOwner.home.remove(['yearRenovated', 'color']);15 });16 };1718 return (19 <View>20 <Text>{homeOwner.name}</Text>21 <Text>{homeOwner.home.address}</Text>22 <Button23 onPress={deleteExtraHomeInfo}24 title='Delete extra home info'25 26 />27 </View>28 );29};1const HomeInfo = ({homeOwnerName}: {homeOwnerName: string}) => {2 const realm = useRealm();3 const homeOwner = useQuery(4 HomeOwner,5 homeOwners => {6 return homeOwners.filtered(`name == '${homeOwnerName}'`);7 },8 [homeOwnerName],9 )[0];1011 const deleteExtraHomeInfo = () => {12 realm.write(() => {13 14 homeOwner.home.remove(['yearRenovated', 'color']);15 });16 };1718 return (19 <View>20 <Text>{homeOwner.name}</Text>21 <Text>{homeOwner.home.address}</Text>22 <Button23 onPress={deleteExtraHomeInfo}24 title='Delete extra home info'25 />26 </View>27 );28};RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4