在查看没有索引的数组时，无法读取未定义的属性“map”

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

只是提前感谢任何帮助和这个地方以前的巨大资源。这是我第一次问一个问题，我还是一个新手，所以请原谅我遗失的任何明显的事情。

我使用节点从Postgresql数据库创建了一个API。这工作正常我的queries.js文件在下面。

const Pool = require('pg').Pool
const pool = new Pool({
  user: 'user',
  host: 'localhost',
  database: 'database',
  password: 'password',
  port: 5432,
});

const tableThree = (request, response) => {
    pool.query('SELECT * FROM t3_0 ORDER BY time DESC LIMIT 10', (error, results) => {
      if (error) {
        throw error
      }
      response.status(200).json(results.rows)
    })
  }

  module.exports = {
    tableThree,
  }

这将传递给我的index.js文件....

const express = require('express')
const bodyParser = require('body-parser')
const app = express()
const cors = require('cors');
const db = require('./queries')
const port = 3001

app.use(bodyParser.json())
app.use(
  bodyParser.urlencoded({
    extended: true,
  })
);

app.use(cors());

app.get('/', (request, response) => {
  response.json({ info: 'Node.js, Express, and Postgres API' })
});

app.get('/table3', db.tableThree);

app.listen(port, () => {
  console.log(`App running on port ${port}.`)
});

这会创建一个api，我可以在postgresql数据库中查看信息。

从我的角度项目我导入它作为服务...

import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import { map } from 'rxjs/operators';



@Injectable({
  providedIn: 'root'
})
export class simulatorService {


  constructor(private http: HttpClient) { 
    
  }

  tableThree() {
    return this.http.get("http://localhost:3001/table3")
      .pipe(map(result => result));
  }

}

我更新了我的app.module.ts文件，因此可以使用该服务...

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { simulatorService } from './esim06.service';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [simulatorService],
  bootstrap: [AppComponent]
})
export class AppModule { }

然后在app.components.ts文件中我引入了服务，我能够看到预期的数据。

import { Component } from '@angular/core';
import { simulatorService } from './esim06.service';
import { Chart } from 'chart.js';
import { map } from 'rxjs/operators/map';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  chart = [];
  
  constructor(private simulator: simulatorService) {}

  ngOnInit() {
    this.simulator.tableThree()
      .subscribe(res => {
        console.log(res)

        //let i13 = res['list'] || [].map(res => res.i13);
        //let alldates = res['list'] || [].map(res => res.i2)

        let i13 = res[''].map(res => res.i13);
        let alldates = res[''].map(res => res.i2)

        let dates = []
        alldates.forEach((res) => {
            let jsdate = new Date(res)
            dates.push(jsdate.toLocaleTimeString('en', { year: 'numeric', month: 'short', day: 'numeric' }))
        })
        console.log(dates)
        console.log(i13)

        this.chart = new Chart('canvas', {
          type: 'line',
          data: {
            labels: alldates,
            datasets: [
              {
                data: i13,
                borderColor: '#3cba9f',
                fill: false
              },
              //{
              //  data: acquireSun,
              //  borderColor: '#3cba9f',
              //  fill: false
              //},
            ]
          },
          options: {
            legend: {
              display: false
            },
            scales: {
              xAxes: [{
                display: true
              }],
              yAxes: [{
                display: true
              }]
            }
          }
        })
      });
  }

}

对于第一个console.log（res），我可以在检查器中查看数据....

(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {id: "4097", time: "2019-03-16T04:06:38.728Z", ple_id: "177550", meta_id: "1", reduced_id: null, …}
1: {id: "4094", time: "2019-03-16T04:06:31.710Z", ple_id: "177422", meta_id: "1", reduced_id: null, …}
2: {id: "4095", time: "2019-03-16T04:06:30.923Z", ple_id: "177404", meta_id: "1", reduced_id: null, …}
3: {id: "4096", time: "2019-03-16T04:06:28.333Z", ple_id: "177360", meta_id: "1", reduced_id: null, …}
4: {id: "4093", time: "2019-03-16T04:06:25.074Z", ple_id: "177292", meta_id: "1", reduced_id: null, …}
5: {id: "4090", time: "2019-03-16T04:06:22.743Z", ple_id: "177248", meta_id: "1", reduced_id: null, …}
6: {id: "4091", time: "2019-03-16T04:06:21.822Z", ple_id: "177230", meta_id: "1", reduced_id: null, …}
7: {id: "4092", time: "2019-03-16T04:06:19.356Z", ple_id: "177186", meta_id: "1", reduced_id: null, …}
8: {id: "4088", time: "2019-03-16T04:06:16.093Z", ple_id: "177118", meta_id: "1", reduced_id: null, …}
9: {id: "4089", time: "2019-03-16T04:06:13.648Z", ple_id: "177074", meta_id: "1", reduced_id: null, …}
length: 10

但是，当我尝试通过诸如...之类的语句引用数组的特定部分时。

设i13 = res ['']。map（res => res.i13）; let alldates = res ['']。map（res => res.i2）;

我收到以下错误..

core.js:14597 ERROR TypeError: Cannot read property 'map' of undefined
    at SafeSubscriber._next (app.component.ts:25)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:194)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:132)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:76)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (filter.js:38)

我相信这是发生的，因为数组的名称是未定义的。所以我不能写像...

让i13 = res ['list']。map（res => res.i13）;

但我不知道如何强制它接受它作为未定义或给数组索引。任何有关这方面的帮助将不胜感激！

谢谢！

arrays angular chart.js
1个回答
0
投票

要根据我们的评论讨论抛出答案，将更容易解释您的问题所在。

参数'res'中返回的是一个数组。数组可以访问名为map的方法。 Map接受一个函数，并将为数组中的每个值调用一次函数，并返回一个带有map的返回值的新数组。

即：

var res = [{ username: 'jsmith', firstname: 'John' }, { username: 'jdoe', firstname:' Jane" }];

var newArray = res.map(user => user.firstname);
console.log(newArray) // ['John', 'Jane']

基于映射函数，将从数组中的每个对象中获取第一个名称，并将创建具有这些值的新数组。

数组也可以通过整数索引访问。所以：

var john = res[0];
console.log(john) // { username: 'jsmith', firstname: 'John' }

所以在你的情况下，你可以只做res.map，你会得到一个一个接一个地给回调的值，你可以处理它们。或者，您可以通过索引res [0] .id访问元素。

你不能做res [0] .map，因为存储在响应的第一个点的对象不是数组

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