使用console.log显示对象中的值

问题描述 投票：0回答：4

我有一个像这样的对象数组：

Object {index: "4", value: -1} 
Object {index: "0", value: 0} 
Object {index: "6", value: 0} 
Object {index: "8", value: 0} 
Object {index: "1", value: 1} 
Object {index: "3", value: 1} 
Object {index: "5", value: 1} 
Object {index: "7", value: 1}

第一个索引为 0，我可以像 

console.log[array[0]
那样访问它，这会给我 
Object {index: "4", value: -1}
现在，如果我不想使用对象数组的索引，而是想通过 
value
或 
 来访问它，该怎么办？ index
在对象本身内部。我尝试过几个不同的命令，例如。 

console.log(array["index: " + 8]
console.log(array["index:" == 8]

除了上面两个示例抛出未定义或错误之外，这些都没有做任何事情，我希望它们打印出来

Object {index: "8", value: 0}
我希望这是有道理的

javascript jquery
4个回答
1
投票

JavaScript 的 属性访问器 无法查看 

Object
所持有的 
Array
来对它们应用条件。

最接近的选项可能是

.filter()
：

var filtered = array.filter(function (item) {
    return item.index === "8";
});

console.log(filtered[0]); // Object {index: "8", value: 0}

您还可以使用 

for
循环 和 
if
测试 来找到它。

1
投票

小提琴演示

function find_index(x) {
    var y = '';
    for (var i = 0; i < arr.length; i++) {
        if (arr[i].index == x) {
            y = arr[i];
            break;
        }
    }
    return y;
}
console.log(find_index(8)); //Object {index: "8", value: 0}
0
投票

这里与

8
无关。这根本不是在 JavaScript 中处理对象的方式，即使是最基本的教程也会向您展示。

给定 

obj = {index: "4", value: -1}
，您可以使用 
obj.index
或 
obj.value
访问这两个值。你不可能发明一些 
"index: == 8"
的怪异并期望得到合理的结果。

obj = {index: "4", value: -1}

console.log(obj.index) // 4
console.log(obj.value) // -1

如果你想找到一个索引为8的对象，这需要使用循环顺序扫描数组，而不是编写一些伪查询语言。

0
投票

要创建一个在两个 AG Grid 组件之间同步过滤器的 React 项目，您需要执行以下步骤：

  1. 初始化 React 项目（使用 Create React App 或您喜欢的方法）。
  2. 安装 AG Grid 及其依赖项。
  3. 创建两个独立的 AG Grid 组件。
  4. 在两个网格之间同步过滤器。

以下是实现此目标的分步指南：

第 1 步：初始化 React 项目

打开终端并运行以下命令来创建新的 React 应用程序：

npx create-react-app ag-grid-sync --template typescript
cd ag-grid-sync

第2步：安装AG Grid

安装 AG Grid 所需的软件包：

npm install ag-grid-react ag-grid-community

第 3 步：创建两个独立的 AG 网格组件

创建两个文件：

GridOne.tsx
和
GridTwo.tsx
。

GridOne.tsx
：

import React, { useRef, useCallback } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import { ColDef } from 'ag-grid-community';

interface GridOneProps {
    onFilterChanged: (filters: any) => void;
    filters: any;
}

const GridOne: React.FC<GridOneProps> = ({ onFilterChanged, filters }) => {
    const gridRef = useRef<AgGridReact>(null);

    const columnDefs: ColDef[] = [
        { headerName: "Make", field: "make" },
        { headerName: "Model", field: "model" },
        { headerName: "Price", field: "price" },
    ];

    const rowData = [
        { make: "Toyota", model: "Celica", price: 35000 },
        { make: "Ford", model: "Mondeo", price: 32000 },
        { make: "Porsche", model: "Boxster", price: 72000 },
    ];

    const onFilterChangedCallback = useCallback(() => {
        const gridApi = gridRef.current!.api;
        const allFilters = gridApi.getFilterModel();
        onFilterChanged(allFilters);
    }, [onFilterChanged]);

    return (
        <div className="ag-theme-alpine" style={{ height: 200, width: 600 }}>
            <AgGridReact
                ref={gridRef}
                columnDefs={columnDefs}
                rowData={rowData}
                onFilterChanged={onFilterChangedCallback}
                defaultColDef={{ filter: true }}
                filterModel={filters}
            />
        </div>
    );
};

export default GridOne;


GridTwo.tsx
：

import React, { useRef, useCallback } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import { ColDef } from 'ag-grid-community';

interface GridTwoProps {
    onFilterChanged: (filters: any) => void;
    filters: any;
}

const GridTwo: React.FC<GridTwoProps> = ({ onFilterChanged, filters }) => {
    const gridRef = useRef<AgGridReact>(null);

    const columnDefs: ColDef[] = [
        { headerName: "Make", field: "make" },
        { headerName: "Model", field: "model" },
        { headerName: "Price", field: "price" },
    ];

    const rowData = [
        { make: "BMW", model: "X5", price: 50000 },
        { make: "Audi", model: "A6", price: 45000 },
        { make: "Mercedes", model: "C-Class", price: 40000 },
    ];

    const onFilterChangedCallback = useCallback(() => {
        const gridApi = gridRef.current!.api;
        const allFilters = gridApi.getFilterModel();
        onFilterChanged(allFilters);
    }, [onFilterChanged]);

    return (
        <div className="ag-theme-alpine" style={{ height: 200, width: 600 }}>
            <AgGridReact
                ref={gridRef}
                columnDefs={columnDefs}
                rowData={rowData}
                onFilterChanged={onFilterChangedCallback}
                defaultColDef={{ filter: true }}
                filterModel={filters}
            />
        </div>
    );
};

export default GridTwo;

第4步：创建主组件来同步过滤器

App.tsx
：

import React, { useState, useCallback } from 'react';
import GridOne from './GridOne';
import GridTwo from './GridTwo';

const App: React.FC = () => {
    const [filters, setFilters] = useState<any>({});

    const handleFilterChanged = useCallback((newFilters: any) => {
        setFilters(newFilters);
    }, []);

    return (
        <div>
            <h1>Grid One</h1>
            <GridOne onFilterChanged={handleFilterChanged} filters={filters} />
            <h1>Grid Two</h1>
            <GridTwo onFilterChanged={handleFilterChanged} filters={filters} />
        </div>
    );
};

export default App;

第 5 步：运行项目

运行以下命令来启动您的项目：

npm start

您应该在页面上看到两个 AG Grid 组件。当您在一个网格上应用过滤器时，它将同步并将相同的过滤器应用到另一个网格。此设置确保过滤器状态通过父组件在两个网格之间共享 (

App.tsx
)。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.