title: How do I loop through an Angular HTTP Response?
body: <p>I'm a beginner in Angular trying to learn the ins and outs. I'm uploading a file and making a call to an API which validates the file. In the response is a list of JSON validation errors that come back based on some values of the file.</p>
  <p>I'm attempting to loop through these responses and display them to the user, but I'm a bit lost.</p>
  <p>I've tried combinations of map/pipe/subscribe and it seems like the subscribe function is working the best for me and is the only way I can see what the values being sent are. But I'm unsure of how to display the actual values instead of [Object, Object].</p>
  <p>I'm also trying to learn the best practices so I'm unsure if I am going down the right path here.</p>
  <p><a href="https://i.stack.imgur.com/vh44e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vh44e.png" alt="Response object" /></a></p>
  <p><a href="https://i.stack.imgur.com/4bByQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4bByQ.png" alt="error list expanded" /></a></p>
  <p><a href="https://i.stack.imgur.com/lKecn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lKecn.png" alt="error list expanded too" /></a></p>
  <p><a href="https://i.stack.imgur.com/IvF9J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IvF9J.png" alt="enter image description here" /></a></p>
  <p>What should I be doing after my POST code is returned?</p>
  <pre><code>this.httpClient.post(this.PartsAPIURL, formData, { headers: headers })
        .subscribe(event =&gt; {
          this.submissionResult = event;
          console.log(this.submissionResult);
          //what to do here?
      });
  </code></pre>
  <p>And how do I combine it with the HTML response?</p>
  <pre><code>&lt;p&gt;{{submissionResult}}&lt;/p&gt;
  </code></pre>
  <p>Here are some of the failed snippets of code I've been trying</p>
  <p>Attempt to assign to an array variable</p>
  <pre><code>this.httpClient.post(this.PartsAPIURL, formData, { headers: headers })
        .subscribe(event =&gt; {
          //fails because the validationErrors and subcategoryErrors are not initialized properly
          this.UploadResponse.validationErrors = event[&quot;validation_errors&quot;];
          this.UploadResponse.subcategoryErrors = event[&quot;subcategory_errors&quot;];
          console.log(this.UploadResponse.validationErrors);
          console.log(this.UploadResponse.subcategoryErrors);
      });
  </code></pre>
  <p>Doesnt return anything - no console statements at all</p>
  <pre><code>this.httpClient.post&lt;PartsUploadResponse&gt;(this.PartsAPIURL, formData, { headers: headers })
        .pipe(
          map(data =&gt; {
            console.log(data)
            this.UploadResponse.subcategoryErrors = data['subcategoryErrors'];
            this.UploadResponse.validationErrors = data['validationErrors'];
            console.log(this.UploadResponse);
          }));
  </code></pre>
  <p>Response class</p>
  <pre><code>export class PartsUploadResponse {
    public validationErrors: any;
    public subcategoryErrors:any;
  
  }
  </code></pre>
  <p>Thank you for the help!</p>