Creating custom dynamic JSON string

Question

I am trying to achieve the following dynamic JSON string creation. I can produce the id part but don't how to produce the name part. Ids are from the list and name is from the textbox.

I tried a lot but nothing seems to work. I want to select both strings and text box should result as below.

{
  "name": "GROUP-X1",
  "objects": [{ // this part is needed as a complete string
    "type": "Host",
    "id": "0050569A-7800-0ed3-0000-008589948757"
  }, {
    "type": "Host",
    "id": "0050569A-7800-0ed3-0000-008589945523"
  }]
}

var output = createJSON1();

function createJSON1() {
  var arr = $("#select1 > option").map((index, val) => ({
    "type": "Host",
    id: val.value
  })).get();
  return JSON.stringify(arr);
}

console.log(output);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="text" id="srch-obj" value="GROUP-X1">
<select id="select1" multiple size="2" style="width: 480px">
  <option>0050569A-7800-0ed3-0000-008589948757</option>
  <option>0050569A-7800-0ed3-0000-008589945523</option>
</select>

Rory McCrossan · Accepted Answer · 2021-10-18 13:26:03Z

1

Your code already builds the objects array. As such, all you need to do is wrap the output within another object providing the name property which you can retrieve from the value of #srch-obj. Try this:

var output = createJSON1();

function createJSON1() {
  let obj = {
    name: $('#srch-obj').val(),
    objects: $("#select1 > option").map((t, el) => ({
      type: "Host",
      id: el.value
    })).get()
  }
  return JSON.stringify(obj);
}

console.log(output);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="text" id="srch-obj" value="GROUP-X1">
<select id="select1" multiple size="2" style="width: 480px">
  <option>0050569A-7800-0ed3-0000-008589948757</option>
  <option>0050569A-7800-0ed3-0000-008589945523</option>
</select>

answered Oct 18, 2021 at 13:26

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

2 Comments

Rory McCrossan Over a year ago

No problem, glad to help

Rory McCrossan Over a year ago

The get() call was in your original code, I simply copied it over. It retrieves the content from within the jQuery object. Normally this is a DOM Element, but as we've used map() it's an array. More info in the docs: api.jquery.com/get

Collectives™ on Stack Overflow

Creating custom dynamic JSON string

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related