在Angular 5中，可以使用HttpClient模块来获取JSON数据并进行批量调用。以下是一个示例代码，展示了如何批量调用并获取JSON数组字段的数据：

1. 创建一个名为data.service.ts的服务，用于获取数据：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class DataService {
  constructor(private http: HttpClient) { }

  getData(url: string) {
    return this.http.get(url);
  }
}

2. 在组件中使用DataService服务来批量调用并获取JSON数组字段的数据。例如，在app.component.ts组件中：

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `
    
Data:
    

      
{{ item.field }}
    
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  data: any[];

  constructor(private dataService: DataService) { }

  ngOnInit() {
    const urls = ['url1', 'url2', 'url3']; // 要批量调用的URL数组

    // 使用Promise.all来进行批量调用
    Promise.all(urls.map(url => this.dataService.getData(url)))
      .then(responses => {
        this.data = responses.map(response => response.field);
      })
      .catch(error => console.log(error));
  }
}

在以上示例代码中，data.service.ts服务使用HttpClient来发起HTTP GET请求获取数据。在组件中，AppComponent通过ngOnInit生命周期钩子在组件初始化时进行批量调用，并将每个请求的返回值存储在data数组中，然后通过遍历data数组来在模板中显示字段的值。

请注意，上述示例代码中的URL数组应替换为实际的URL。此外，还需要在Angular模块中导入HttpClientModule和在组件的providers数组中提供DataService服务。