How to create json object dynamically from UI using values from input fields before sending to API

Question

I have a http.post request which sends an object as a parameter, the expected format is like this:

 var searchQuery;
 var subj;
 var body;
 var startDate;
 var endDate;

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

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

The problem is some values are optional meaning that if I don't provide searchQuery as a string then the whole key value should be ingnored, e.g "value": searchqery should be not included in the json object if I did not provide value to that variable. Same goes for startDate and endDate if I don't provide values then date shouldbe ignored from the json. So how to dynamically include or exlude key pair value in the object that coming from UI and how to build that object before sending to a post request?

Whould it be something like this?

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

user184994 · Accepted Answer · 2018-01-04 21:20:22Z

1

You can create a function that's a bit more flexible.

var searchQuery = "";
var subj = null;
var body = "";
var startDate = "";
var endDate = null;

let obj = {
  "search": {
    "scope": [2, 3, 32],
    "type": "basic",
    "text": {
      "value": searchQuery, //string variable coming from UI
      "fields": [
        subj, body //string variable coming from UI
      ]
    },

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

function removeNull(obj) {
  return Object.keys(obj).reduce((res, key) => {
    if (Array.isArray(obj[key])) {
      // If it's an array, filter out the null items
      res[key] = obj[key].filter((item) => item != null && item !== "");
    } else if (typeof obj[key] === "object" && obj[key] != null) {
      // If it's an object, call the function recursively
      res[key] = removeNull(obj[key]);
    } else if (obj[key] != null && obj[key] !== "") {
      // Otherwise, only add it to the results if it's not null
      res[key] = obj[key];
    }
    return res;
  }, {});
}

console.log(removeNull(obj));

edited Jan 4, 2018 at 21:20

answered Jan 4, 2018 at 21:07

user184994

18.3k2 gold badges51 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AlexFF1 Over a year ago

Thank you for help, but it should remove property "value" if its empty " ". I am still struggling how to implement this

AlexFF1 Over a year ago

just a quick one, maybe you can show the same for "fields": [ subj, body ] if there is no "fields" added subj or body so just empty "fileds" : [] then remove it completly, thanks in advance

user184994 Over a year ago

Where we do res[key] = , that is where we're adding something to the result. The result of obj[key].filter is the array without null elements. All you need to do is check if the array is empty before you add it to the result

Collectives™ on Stack Overflow

How to create json object dynamically from UI using values from input fields before sending to API

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related