如何从打字稿中的对象获取键和值

Question

I got a dictionary pair like {general: "this is the value content"} from a ngForm.

 <div class="col-10"> <div> <h1>Terms of Use</h1> </div> <form #termForm="ngForm" (ngSubmit)="saveTerm(termForm)"> <div class="col-12"> <div class="d-flex justify-content-between mb-1"> <label for="general" id='general'>General</label> <button>Save General</button> </div> <ckeditor [(ngModel)]="generalContent" #general="ngModel" name="general" [config]="config" [readonly]="false"> </ckeditor> </div> </form> </div>

How can the pair data be saved to separate variables a and b? a = "general" b = "this is the value content"

Answer 1

If you have the object already stored in a variable, and you plan to only map a single key-value pair to "a" and "b", you could go with:

const obj = { general: "this is the value content" };
const result = Object.entries(obj).map(([k,v]) => ({ a: k, b: v }))[0];
// { a: "general", b: "this is the value content" }

Answer 2

If you have more than a single key-value pair, You can convert the object to an array:

const terms = {term1: "term1 content", term2: "term2 content"}
const array = Object.entries(terms)
  .map(([key, val]) => [key, val])
  .reduce((a, b) => a.concat(b));
// ["term1", "term1 content", "term2", "term2 content"]

If you want to separate the key-value only in HTML, You can use keyvalue pipe:

<div class="col-10">
  <div>
      <h1>Terms of Use</h1>
  </div>
  <form #termForm="ngForm" (ngSubmit)="saveTerm(termForm)">
      <div class="col-12" *ngFor="let term of terms | keyvalue">
          <div class="d-flex justify-content-between mb-1">  
              <label [for]="term.key" [id]="term.key">{{term.key}}</label>
              <button>Save {{term.key}}</button>
          </div>
          <ckeditor        
              [(ngModel)]="term.value"
              #termElem="ngModel"
              [name]="term.key"
              [config]="config"
              [readonly]="false">
          </ckeditor>
      </div>
  </form>
</div>