Javascript foreach loop recursive function

Question

In html i have the text input as http://www.zfun.com/api/order/{companies->id}

HTML:

<form
  class="forms-sample"
  id="requestform"
  name="requestform"
  enctype="multipart/form-data"
>
  <div id="getmethod">
    <div class="input-group">
      <input
        type="hidden"
        id="requesturl"
        name="requesturl"
        value="{{$getrequesturl}}"
      />

      <div class="input-group">Enter Store URL</div>
      <div class="input-group">
        <input
          type="text"
          id="storeurl"
          name="storeurl"
          class="urlconcat form-control marginleft"
          aria-label="Text input with dropdown button"
          placeholder="Enter Store Url"
          value="{{$getstoreurl}}"
        />
      </div>
      <br /><br />
      <div class="input-group">
        <div class="input-group-prepend">
          <select class="form-control" id="method" name="method">
            <option value='GET' @if($getmethodname == 'GET') selected="selected" @endif>GET</option>
            <option value='POST' @if($getmethodname == 'POST') selected="selected" @endif>POST</option>
            <option value='PUT' @if($getmethodname == 'PUT') selected="selected" @endif>PUT</option>
            <option value='DELETE' @if($getmethodname == 'DELETE') selected="selected" @endif>DELETE</option>
          </select>
        </div>
        <input
          Ftype="text"
          id="endpoint"
          name="endpoint"
          class="urlconcat requesturltext getrequesturl form-control marginleft"
          aria-label="Text input with dropdown button"
          placeholder="Enter End Point"
          value="{{$getendpoint}}"
        />
        <button
          type="submit"
          class="btn btn-primary mr-2 marginleft"
          id="savebtn"
        >
          Send
        </button>
        <button class="btn btn-secondary" type="button">Cancel</button>
        <button
          class="btn btn-success mr-2 marginleft"
          id="addurl"
          type="button"
        >
          + Add URL
        </button>
        <button
          class="removeurl btn btn-danger mr-2 marginleft"
          type="button"
          style="display: none"
        >
          Remove
        </button>
      </div>
    </div>
  </div>
</form>

i have array values in javascript as

{
  "id": 245,
  "fullName": "ZFUser ",
  "type": "Partner",
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1bmlxdWVfbmFtZSI6ImFjdXRyYWNrQHpvbmVmdW5uZWwuY29tIiwicm9sZSI6IlRoaXJkUGFydHlVc2VyIiwiQ29tcGFueSI6IkFCQyIsIlRva2VuVHlwZSI6IkxvZ2luIiwiVXNlcklkIjoiMjQ1IiwiQ29tcGFueVR5cGUiOiJQYXJ0bmVyIiwibmJmIjoxNjE3MjY5MDYxLCJleHAiOjE2MTcyNzI2NjAsImlhdCI6MTYxNzI2OTA2MX0.Y41hjF_iINZZeXN0_rAPs5Zv7B9cGhtjtTxe32fhTrQ",
  "refreshToken": "XRDNLL3vcAMgD4qGnVMav/O1YarZrZM9OKqWjLAi3Ao=",
  "role": "ThirdPartyUser",
  "weightUOM": "LB",
  "currencyUOM": "USD",
  "dimensionUOM": "IN",
  "companies": [
    {
      "id": 3,
      "company": "ABC",
      "role": "ThirdPartyUser",
      "gatewayId": 0,
      "storeName": null,
      "isDefault": true
    }
  ],
  "secureObjects": [
    {
      "category": "Order",
      "secureObjects": [
        {
          "id": 1,
          "className": "ShippingInfo"
        }
      ]
    }
  ]
}

If I click send button, i need to replace the value for {companies->id} with 3 which is in array.

I tried the code,

function getloop(ss,tagresult){
  $.each(tagresult, function (i,vall){ 
    var s="";//console.log(i);
    ss.forEach(function loop(index,item1) {
      if(loop.stop){ return; }
      if(i==index && (typeof vall[item1]=='object' || typeof vall[item1]=='array')){
         tagresult=vall[item1];alert(typeof vall[item1]);
         ss = jQuery.grep(ss, function(value) {
              return value != item1;
         });
         loop.stop = true;  
         getloop(ss,tagresult);     
       }
       if(i==index && typeof vall[item1]!='object' && typeof vall[item1]!='array'){
        s=vall.item1;alert(i+"---"+index);alert("s"+s);//console.log(s);//console.log(vall[0][item1]);
      }
    });
    }); 
}

tagresult is the array with values.

ss is the array which i achieved using companies->id.split("->");

So, ss has the values as ss=["companies","id"]

If the url is http://www.zfun.com/api/order/{companies->id}/{companies->gatewayId},i need to replace gatewayid also.

My expected output is

http://www.zfun.com/api/order/3
http://www.zfun.com/api/order/3/0

Any help would be greatly appreciated.

Answer 1

Seems to me that this can be solved by mapping the values in the array to the wanted URL structure rather than doing recursion:

 const tagresult = [ { "id": 245, "fullName": "ZFUser ", "type": "Partner", "token": "eyJhbGciOiJCI6IkpXVCJ9.eyJ1bmlxdWVfbmyYWNrQHpvbmVmdW5uZWwuY29tIiwicm9sZSI6IlRoaXJkUGFydHlVc2VyIiwiQ29tcGFueSI6IkFCQyIs6IkxvZ2luIiwiVXNlcklkIjoiMjQ1IiwiQ29tcGFueVR5cGUiOiJQYXJ0bmVyIiwibmJmIjoxNjE3MjY5MDYxLCJleHAiOmlhdCI6MTYxNzI2OTA2MX0.Y41hjF_iINZZeXN0_rAPs5Zv7B9cGhtjtTxe32fhTrQ", "refreshToken": "XRDNLL3vcAMgD4qGnVMav/O1YarZrZM9OKqWjLAi3Ao=", "role": "ThirdPartyUser", "weightUOM": "LB", "currencyUOM": "USD", "dimensionUOM": "IN", "companies": [ { "id": 3, "company": "ABC", "role": "ThirdPartyUser", "gatewayId": 0, "storeName": null, "isDefault": true } ], "secureObjects": [ { "category": "Order", "secureObjects": [ { "id": 1, "className": "ShippingInfo" } ] } ] } ] const output = tagresult.flatMap(val => val.companies.flatMap(comp => [`http://www.zfun.com/api/order/${comp.id}`, `http://www.zfun.com/api/order/${comp.id}/${comp.gatewayId}`])); console.log(output);