How do I split and Array into two parts based on type- Angular JS

Question

I am trying to split an array into 2 types based on type: Buyer or Supplier. If you look at the last snippet, there is an array called newCompanies where there are company names with the type of company.

I am trying to get that company array data from local storage and I want to split them into 2 arrays so that I can have 2 types of listboxes. One is the Buyer listbpx and the other is supplier listbox.

Thanks in advance

var companies = JSON.parse(localStorage.getItem("newCompany"));

var splitted = companies.reduce(function(obj, item) {
  if (obj[item.type] == null) {
    obj[item.type] = [];
  }
  obj[item.type].push(item);
  return obj;
}, {});

splitted.buyer;
splitted.supplier;
$scope.companies.push(splitted.supplier);

$scope.companies.push(splitted.buyer);

<div class="form-group">
  <label class="control-label col-sm-2">Company</label>
  <div class="col-sm-10" ng-class="{ 'has-error' : addForm.addCompany.$invalid && !addForm.addCompany.$pristine }">
    <select class="form-control" name="addCompany"
            placeholder="Select Company"
            ng-options="company for company in companies"
            ng-model="newUser.company" ng-required="true">
    </select>
    <span class="help-block" ng-show="addForm.addCompany.$invalid && !addForm.addCompany.$pristine">
Your Company is required.
   </span>
  </div>
</div>

var newCompany = [{
    name: "Huawei", // -->COMPANY NAME
    email: "[email protected]",
    phone: "123-123-1234",
    owner: "Drath",
    type: "buyer"
  },
  {
    name: "Asus", // -->COMPANY NAME
    email: "[email protected]",
    phone: "999-123-8888",
    owner: "Vadar",
    type: "supplier"
  },
  {
    name: "Acer", // -->COMPANY NAME
    email: "[email protected]",
    phone: "676-989-8888",
    owner: "Randall",
    type: "supplier"
  }
];
window.localStorage.setItem("newCompany", JSON.stringify(newCompany));

Becks · Accepted Answer · 2018-11-21 21:45:10Z

1

var newCompany = [{
    name: "Huawei", // -->COMPANY NAME
    email: "[email protected]",
    phone: "123-123-1234",
    owner: "Drath",
    type: "buyer"
  },
  {
    name: "Asus", // -->COMPANY NAME
    email: "[email protected]",
    phone: "999-123-8888",
    owner: "Vadar",
    type: "supplier"
  },
  {
    name: "Acer", // -->COMPANY NAME
    email: "[email protected]",
    phone: "676-989-8888",
    owner: "Randall",
    type: "supplier"
  }
];

let buyers = [], suppliers = [];
for (let company of newCompany) {
  if (company.type === "buyer")
    buyers.push(company);
  else
    suppliers.push(company);
}

console.log("Buyers:");
console.log(buyers);
console.log("Suppliers:");
console.log(suppliers);

answered Nov 21, 2018 at 21:45

Becks

4681 gold badge5 silver badges14 bronze badges

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

2 Comments

Vaibhav27 Over a year ago

Thank you so much. It totally works! Can you please tell me how this" let company of newCompany" works?

Becks Over a year ago

It's a foreach loop for iterables (like arrays, maps, strings, etc.), you can learn more about it here

Davi · Accepted Answer · 2018-11-21 22:27:20Z

0

With a reduce:

var companies = JSON.parse(window.localStorage.getItem('newCompany'));

var splitted = companies.reduce(function (obj, item) {
  if (obj[item.type] == null) { obj[item.type] = []; }
  obj[item.type].push(item);
  return obj;
}, {});

Will result in splitted looking like this:

{
  buyer: [{name: "Huawei", ... }],
  supplier: [{name: "Asus", ... }, {name: "Acer", ... }]
}

And then grab the information from splitted:

splitted.buyer;    // -> [{name: "Huawei", ... }]
splitted.supplier; // -> [{name: "Asus", ... }, {name: "Acer", ... }]

This has the additional benefit, that if you add a third "type" of company later, you won't have to change a single line of code.

edited Nov 21, 2018 at 22:27

answered Nov 21, 2018 at 21:43

Davi

4,2941 gold badge18 silver badges29 bronze badges

3 Comments

Vaibhav27 Over a year ago

I tried it. Its not working. I am getting [object, object] in the listbox. I have updated the code in my question please check that.

Davi Over a year ago

The fact that you see [object Object] in the <select> elements has nothing to do with the way the array is divided, but it has to do with how Angular constructs the final HTML from the array contents. I'm not much of an expert on Angular to be honest, but by looking at the code you provided I'd suggest looking into ng-options and ng-model

Davi Over a year ago

@Vaibhav27 According to the AngularJS docs, you have to change ng-options to something like this: company.name for company in companies to display the name part: docs.angularjs.org/api/ng/directive/ngOptions

Collectives™ on Stack Overflow

How do I split and Array into two parts based on type- Angular JS

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related