JSON对象发布请求的输入字段

Question

So I have some input fields which are optional and I require to build a json object which will be sent then to http.post. Optional means if fields are empty then I don't add it to a json, property too. Here is the following input fields.

<input type="text" [(ngModel)]="searchQuery" placeholder="Keyword">

     <div class="row">
        <div class="col-lg-6">
            <p-calendar id="kera" [(ngModel)]="startDate" dateFormat="yy-mm-dd" placeholder="Start date" [showIcon]="true"></p-calendar>
        </div>
        <div class="col-lg-6">
            <p-calendar id="kera" [(ngModel)]="endDate" dateFormat="yy-mm-dd" placeholder="End date" [showIcon]="true"></p-calendar>
        </div>
    </div>

The expecting object that will be sent to http should look like this:

  "search": {
    "scope": [2, 3, 32],
    "type": "basic",
    "text": {
      "value": searchQuery, //string variable coming from UI

    },

    "date": {
      "type": "range",
      "from": startDate, //string variable coming from UI
      "to": endDate //string variable coming from UI
    }
  }

Should it be done using json.prase? Or should be something similar like this,

 var search = {};
 search.text = { value: "", fields: [] };
 {value: "", fields: Array(0)}
 seach.text.value = "tom";
 search.text.value = "tom";
 search.text.fields.push("subject");
 search.text.fields.push("body"); 

So I have to manually build object before sending it

Answer 1

it depends on the system that you send to it . and if you send an empty object and there is no any validation in that API then the API will called and it will correct . and about forming the object just form it as a js

let data = { 
     /// create the structure here not as you do 
     'search':{ 
         'text':"blabla",  
         ... 
     },
     .... 
}
this.http.post(url, data);

Answer 2

I would use a form, you get a nice object with properties and values. Then also use a helper object, check the form object, if the properties have values, then insert those properties with corresponding values into the helper object, which you in the end send to your backend.

You can use a reactive form or a template driven form. I like to use reactive form myself as it has some nice features and you have better control over your form. Also since you are using array(s), template driven forms really do not have support for that. So below is a sample for you of reactive forms:

myForm: FormGroup;

constructor(private fb: FormBuilder) {
    this.myForm = fb.group({
      field1: [''],
      field2: ['']
    })
}

Template:

<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)">
  <input formControlName="field1">
  <input formControlName="field2">
  <button type="submit">Submit</button>
</form>

So on your submit in this case, you get an object like:

{
  "field1": "",
  "field2": ""
}

Iterate the object properties in your submit method, set property and value if the property has a value to your helper object:

onSubmit(values) {
  let obj = {};
  for(let prop in values) {
    // do not try to trim unless type is 'string'
    if((typeof values[prop] == 'string')) {
      values[prop] = values[prop].trim();
    }
    // property has value, insert property and value to helper obj
    if(values[prop].length) {
      obj[prop] = values[prop];
    }
  }
  // post this object to your backend
  console.log(obj)
}

Here's a StackBlitz with above code :)

Since you also have array(s) involved, you would want to look into reactive forms and how to use FormArray in that reactive form: https://angular.io/guide/reactive-forms

Answer 3

Ok so an elegant solution was to create an object manually:

var searchObj = { 
  "search": {
  "scope": [2, 3, 32],
  "type": "basic",
  "date": {
    "type": "range",
    "from": "", 
    "to" : "" 
  },
  "text": {
  value: "", fields: [],
  },
  "HasAttachmentsOnly": hasAttachments,

}
};


searchObj.search.text.value = searchQuery;
searchObj.search.date.from = startNumber;
searchObj.search.date.to = endNumber; 


if (body){
searchObj.search.text.fields.push("body");
}
if (subject){
  searchObj.search.text.fields.push("subject");
  }
  if (attachName){
    searchObj.search.text.fields.push("attachmentname");
    }
    if (attachCont){
      searchObj.search.text.fields.push("attachmentcontent");
      }



  return this.http.post('/api/search/', 
  searchObj
 ).map(data => data)

    }

  }