如何遍历JSON对象？Angular中打印外部API返回JSON的HTML语法

Hey there! Let's walk through how to traverse your JSON object and render it in Angular's HTML templates. First, let's recap your sample data to make sure we're on the same page:

{ 
  "job_details": { 
    "job_title": "Cook", 
    "company_email": "suryaadisiva@gmail.com", 
    "industry": "Advertisement", 
    "phone_no": "9746448899", 
    "days_to_join_id": "2", 
    "days_to_join": "Within a week", 
    "participatestatus": "0", 
    "job_type_name": "Full Time", 
    "Qualficationprofileflag": "1", 
    "jobview_count": "1", 
    "company_id": "440", 
    "job_add_date": "2019-02-26 09:33:36", 
    "minimum_qual": "10th/SSLC", 
    "Skills": "Chinese", 
    "jobgender": "Female", 
    "date_diff": 1, 
    "experience": "2 - 3 years", 
    "salary": "Rs 10,000 - 15,000" 
  }, 
  "jobtoshowflag": "1", 
  "jobdeleted": 0 
}

If you need to loop through this object in plain JS (for processing before passing to Angular, or standalone use), here are a few reliable methods:

Method 1: for...in Loop #

Great for iterating over object keys—just remember to check if the property is directly on the object (not inherited):

const jobData = /* your JSON object */;

// Traverse top-level properties
for (const key in jobData) {
  if (jobData.hasOwnProperty(key)) {
    console.log(`${key}:`, jobData[key]);
  }
}

// Traverse nested job_details
for (const key in jobData.job_details) {
  if (jobData.job_details.hasOwnProperty(key)) {
    console.log(`Job Detail - ${key}:`, jobData.job_details[key]);
  }
}

Method 2: Object.keys() + forEach #

Gets an array of the object's keys, then you can loop through them cleanly:

// Top-level keys
Object.keys(jobData).forEach(key => {
  console.log(`${key}:`, jobData[key]);
});

// Nested job_details keys
Object.keys(jobData.job_details).forEach(key => {
  console.log(`Job Detail - ${key}:`, jobData.job_details[key]);
});

Method 3: Object.entries() + forEach #

Gets an array of [key, value] pairs, which is handy if you need both values at once:

// Top-level entries
Object.entries(jobData).forEach(([key, value]) => {
  console.log(`${key}:`, value);
});

// Nested job_details entries
Object.entries(jobData.job_details).forEach(([key, value]) => {
  console.log(`Job Detail - ${key}:`, value);
});

Angular has built-in tools to display this data cleanly. Let's break it down step by step.

2.1 Set Up Your Component #

First, either hardcode the data (for testing) or fetch it from your API using HttpClient. Here's both options:

Option A: Hardcoded Test Data #

import { Component } from '@angular/core';

@Component({
  selector: 'app-job-display',
  templateUrl: './job-display.component.html',
  styleUrls: ['./job-display.component.css']
})
export class JobDisplayComponent {
  jobData = /* your JSON object */;
}

Option B: Fetch from API #

Don't forget to import HttpClientModule in your app module first!

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-job-display',
  templateUrl: './job-display.component.html',
  styleUrls: ['./job-display.component.css']
})
export class JobDisplayComponent implements OnInit {
  jobData: any;

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    // Replace with your actual API endpoint
    this.http.get('https://your-api-url.com/job-details').subscribe(data => {
      this.jobData = data;
    });
  }
}

2.2 Display Data in HTML #

Use the safe navigation operator (?.) to avoid errors if the data hasn't loaded yet, or wrap everything in *ngIf to wait for the data.

Option 1: Direct Property Binding (For Known Fields) #

If you want full control over layout, bind each field directly:

<div *ngIf="jobData">
  <h2>Job Information</h2>
  <p><strong>Job Show Flag:</strong> {{ jobData.jobtoshowflag }}</p>
  <p><strong>Job Deleted:</strong> {{ jobData.jobdeleted }}</p>

  <h3>Job Details</h3>
  <p><strong>Title:</strong> {{ jobData.job_details.job_title }}</p>
  <p><strong>Company Email:</strong> {{ jobData.job_details.company_email }}</p>
  <p><strong>Industry:</strong> {{ jobData.job_details.industry }}</p>
  <p><strong>Phone:</strong> {{ jobData.job_details.phone_no }}</p>
  <!-- Add all other fields as needed -->
</div>

Option 2: Iterate Over the Object (Dynamic Rendering) #

If you want to loop through all fields without hardcoding each one, use Angular's built-in KeyValuePipe to convert the object into an array of key-value pairs:

<div *ngIf="jobData">
  <h2>Job Information</h2>
  <ul>
    <li *ngFor="let item of jobData | keyvalue">
      <strong>{{ item.key | titlecase }}:</strong> {{ item.value }}
    </li>
  </ul>

  <h3>Job Details</h3>
  <ul>
    <li *ngFor="let detail of jobData.job_details | keyvalue">
      <strong>{{ detail.key | titlecase }}:</strong> {{ detail.value }}
    </li>
  </ul>
</div>

The titlecase pipe converts keys like job_title to "Job Title" for better readability.

内容的提问来源于stack exchange，提问作者Alwin