object 相关问题

我正在尝试创建一个将在结果中显示的搜索功能，我尝试了不同的方法但不起作用。我正在尝试创建一个将在结果中显示的搜索功能，我尝试了不同的方法但不起作用。 <Grid item xs={12} > <TextField label="Search Accounts" // value={searchQuery} // onChange={(e) => setSearchQuery(e.target.value)} fullWidth sx={{ mb: 2, width: '50%' }} /> <Table> <TableHead> <TableRow> <TableCell>Active</TableCell> <TableCell>Edit</TableCell> <TableCell>Account </TableCell> <TableCell>Site Key</TableCell> </TableRow> </TableHead> <TableBody> {Object.entries(state.values.accounts).map(([accountKey, accountValue]) => { const path = `values.accounts.${accountKey}` return ( <TableRow key={path} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}> <TableCell key={`${path}.active`}> <Switch name={`${path}.active`} onChange={onChangeSwitch} checked={accountValue.active} /> </TableCell> <TableCell> <IconButton sx={{ padding: 0 }} size="small" onClick={() => openModal({ account: accountKey, path })}> <EditIcon /> </IconButton> </TableCell> <TableCell xs={12} > {accountValue.name} - {accountKey} </TableCell> <TableCell >{accountValue.siteKey} </TableCell> </TableRow> ) })} </TableBody> </Table> </Grid> 提前谢谢您。我尝试使用过滤器，尝试创建一个新对象来获取过滤后的数据。我不明白你想要实现什么，但根据我的猜测，你想在你的网站中为特定产品/项目创建一个搜索过滤器选项，所以这里有一个简短的 .filter 功能代码，可能会有所帮助给你.. const handleGlobalFilter = (e: any, searchText: string) => { // This is when onChange event occurs.. setGlobalSearchList({ ...globalSearchList, [e.target.id]: searchText, }) } useEffect(() => { if (localData) { if (Object.keys(globalSearchList).length > 0) { const response = localData.filter(function (item: any) { return item['id'].toString().toLowerCase().includes(globalSearchList['globalSearch'].toString().toLowerCase()) || item['firstName'].toString().toLowerCase().includes(globalSearchList['globalSearch'].toString().toLowerCase()) || item['lastName'].toString().toLowerCase().includes(globalSearchList['globalSearch'].toString().toLowerCase()) || item['email'].toString().toLowerCase().includes(globalSearchList['globalSearch'].toString().toLowerCase()) }) setDisplayData(response) } } }, [globalSearchList]);

javascript reactjs object

回答 1 投票 0

制作基本的待办事项列表。在刷新时访问本地存储以保留待办事项列表时，我得到 {"TODO_ITEM:1":"wash trees"} 而不是洗碗

我制作了一个非常基本、简单的待办事项列表。当我通过输入（洗碗）添加到列表时，它会显示为洗碗。但是当从本地存储访问数组中的对象时刷新...

javascript arrays object local-storage

回答 1 投票 0

C# 将 List 类添加到新的 List 类而不循环

我有一个课程中返回的用户列表我的班级：列表公共类员工列表 { 公共 int Emp_No { 得到;放; } 公共字符串 Sys_Prefix { 获取；放; } 公开做空公司_No { ge...

c# asp.net-mvc object arraylist

回答 1 投票 0

无法在 JavaScript 中生成对象中的动态密钥

我已经初始化了一个空对象，在其中动态创建一个键并在 for 循环内将值插入其中。但问题是它只取最后一个值。为什么会发生这种情况？什么

javascript arrays object

回答 1 投票 0

在 HTML/JavaScript 中显示天气数据时出现问题（displayWeather 错误）

让天气= { apiKey: "a5fd20552e868ea7597dd68dec1dd543", fetchWeather: 函数(城市) { fetch("https://api.openweathermap.org/data/2.5/weather?q=" + 城市+ “&单位=我...

javascript object

回答 1 投票 0

在数组对象中使用值而不是索引

我似乎无法格式化保存到本地存储的数组。可以改变数组的索引值吗？我有一个像这样的数组对象： const myArray = [{id: 41, name: "x"}, {i...

javascript arrays json object local-storage

回答 1 投票 0

我的表product_commandes中的数据未插入

我的 PostgreSQL 数据库面临显示问题。我是java初学者，所以我在这里寻求帮助，我希望得到一些解释来理解发生了什么。为了解释这个问题，我有两个

java postgresql hibernate object jpa

回答 1 投票 0

比较两个嵌套数据结构时如何识别更改的属性值？ [已关闭]

我正在开发一个 TypeScript 项目，我需要比较两个具有潜在嵌套结构的对象并识别它们之间已更改的字段。例如，考虑一个旧对象

javascript arrays object data-structures difference

回答 3 投票 0

javascript 通过使用正则表达式搜索字段和值来创建对象

我希望你能帮我解决这个问题。我需要搜索文本中的字段和值并将它们转换为对象。文本示例 <@if VERSION = "A1"> <@assign CTA =...

javascript jquery arrays object regexp-replace

回答 1 投票 0

在 C# 中创建动态对象

我有一个对象列表列表。第一个条目是标头名称列表：它们的类型为“object {string}” 然后接下来的条目是数据行，对应于那些标题 n...

c# list object dynamic mapping

回答 1 投票 0

如何识别和比较具有嵌套结构的 TypeScript 对象中的更改字段？

我正在开发一个 TypeScript 项目，我需要比较两个具有潜在嵌套结构的对象，并识别它们之间已更改的字段。例如，考虑一个旧对象

javascript arrays typescript object data-structures

回答 1 投票 0

如何避免改变传递给 Nuxt 3 组件 prop 对象的原始嵌套对象？

我通过 Nuxt 3 中的 props 将数据对象从一个组件传递到另一个组件：父组件我在 Nuxt 3 中通过 props 将数据对象从一个组件传递到另一个组件：父组件 <template> <div> <Tests :objParent="objParent" /> </div> </template> <script setup> const objParent = {title: {en:"title en", fr:"title fr"}} </script> 子组件 <template> <div > <h1>objParent : {{ props.objParent.title.en }}</h1> <v-text-field label="label" v-model="objChild.title.en" /> <h1>objChild : {{ objChild.title.en }}</h1> </div> </template> <script setup> const props = defineProps(["objParent"]); const objChild = ref({...props.objParent}); </script> 问题是，如果我改变 objChild 中的嵌套对象，它们仍然会在父组件的原始嵌套对象中发生改变。在没有嵌套对象的情况下传递对象时，我没有遇到同样的问题 - 例如： // title can be mutated without mutating the original object const objParent = {title: "title en"} 我做了一些研究，找到了这个解决方案： const objChild = ref(JSON.parse(JSON.stringify(props.objParent))); 这是一个有效的解决方案吗？为了扩展 Emil 的评论，由于您的新对象是直接使用原始对象的 props 创建的（通过 spread 运算符），因此每个嵌套对象将继续指向嵌套在原始父对象中的对象。发生这种情况是因为 JavaScript 中的对象与原始值不同，因为它们是引用类型。当您将一个对象分配给变量时，您为该对象分配了一个引用 - 这意味着如果您继续在其他地方分配相同的对象，它会仍然指向原始对象，并且对于所有它的嵌套对象。所以： const x = { hello: 'world' }; const y = { x }; const z = { y }; z.y.x.hello = 'kitty'; // {hello: 'kitty'} console.log(x); 正如您自己指出的，在 JavaScript 中生成深层副本的一种简单技术是将其序列化/反序列化为 JSON 字符串： const x = { hello: 'world' }; const y = { x }; const z = JSON.parse(JSON.stringify({ y })); z.y.x.hello = 'kitty'; // {hello: 'world'} console.log(x); // {y: {x: {hello: 'kitty'}}} console.log(z); 回答你的问题 - 是的，它是一种有效、有效且广泛使用的创建深度克隆的方法。但请注意，并非所有内容都可以序列化为 JSON，包括符号键控属性、BigInt值和循环引用。请参阅注意事项此处。如果您期望接收的数据已经来自 REST API，则它很可能不包含任何不可序列化的数据。您可以在此 Stack Overflow 问题中找到其他替代方案（及其注意事项）。

javascript object vuejs3 nuxt3

回答 1 投票 0

将十六进制转换为 Node.js (Javascript) 中的文本 (ASCII) 或 JSON 对象

我从硬件接收十六进制并尝试使用 Node.js (Javascript) 将其转换为 json 对象收到数据 50 4F 53 54 20 2F 77 69 66 69 20 48 54 54 50 2F 31 2E 31 0D 0A 48 6F 73 74 ...

javascript node.js object hex ascii

回答 1 投票 0

在 Nuxt 3 中通过 props 在组件之间传递数据对象

我通过 Nuxt 3 中的 props 将数据对象从一个组件传递到另一个组件。我在 Nuxt 3 中通过 props 将数据对象从一个组件传递到另一个组件。 <template> <div> <Tests :objParent="objParent"></Tests> </div> </template> <script setup> const objParent={title: {en:"title en", fr:"title fr"}} </script> 子组件中的接收 <template> <div > <h1>objParent : {{ props.objParent.title.en }}</h1> <v-text-field label="label" v-model="objChild.title.en"></v-text-field> <h1>objChild : {{ objChild.title.en }}</h1> </div> </template> <script setup> const props = defineProps(["objParent"]); const objChild = ref({...props.objParent}); </script> 但是新对象的修改会更改原始对象但是传递一个没有子对象的对象是可行的 const objParent={title: "title en"} 我找到了这个解决方案，是真的吗？ const objChild = ref(JSON.parse(JSON.stringify(props.objParent))); 为了扩展 Emil 的评论，由于您的新对象是直接使用原始对象的 props 创建的（通过 spread 运算符），因此每个嵌套对象将继续指向嵌套在原始父对象中的对象。发生这种情况是因为 JavaScript 中的对象与原始值不同，因为它们是引用类型。当您将一个对象分配给变量时，您为该对象分配了一个引用 - 这意味着如果您继续在其他地方分配相同的对象，它会仍然指向原始对象，并且对于所有它的嵌套对象。所以： const x = { hello: 'world' }; const y = { x }; const z = { y }; z.y.x.hello = 'kitty'; // {hello: 'kitty'} console.log(x); 正如您自己指出的，在 JavaScript 中生成深层副本的一种简单技术是将其序列化/反序列化为 JSON 字符串： const x = { hello: 'world' }; const y = { x }; const z = JSON.parse(JSON.stringify({ y })); z.y.x.hello = 'kitty'; // {hello: 'world'} console.log(x); // {y: {x: {hello: 'kitty'}}} console.log(z); 回答你的问题 - 是的，它是一种有效、有效且广泛使用的创建深度克隆的方法。但请注意，并非所有内容都可以序列化为 JSON，包括符号键控属性、BigInt值和循环引用。请参阅注意事项此处。如果您期望接收的数据已经来自 REST API，则它很可能不包含任何不可序列化的数据。您可以在此 Stack Overflow 问题中找到其他替代方案（及其注意事项）。

javascript object vuejs3 nuxt3

回答 1 投票 0

object 相关问题

最新问题