13

Here is my sample json , i am getting my json obj from firebase i have to convert the list in to array to bind in html trough ng-repeat.

my Json object is

  {
  "cats1": {
    "Name": "cricket",
    "imgUrl": "some url",
    "list1": {
      "bat": {
        "Name": "bat",
        "imgUrl": "some url",
        "price": "$100"
      },
      "pads": {
        "displayName": "pads",
        "imgUrl": "some url",
        "price": "$50"
      }
    }
  },
  "cats2": {
    "Name": "football",
    "imgUrl": "some url"
  }
}

this is how i required

this is the array structure i required , when i add the new list it must store uniquely in cricket category. 

[
  {
    "Name": "cricket",
    "imgUrl": "some url",
    "list1": [
      {
        "Name": "bat",
        "imgUrl": "some url",
        "price": "$100"
      },
      {
        "displayName": "pads",
        "imgUrl": "some url",
        "price": "$50"
      }
    ]
  },
  {
    "Name": "football",
    "imgUrl": "some url"
  }
]

i am new to angular any one please help me to figure out this problem

Improve this question
8
  • 2
    Object.keys(data).map(x=>data[x]) Commented Nov 10, 2016 at 6:29
  • @Rajesh Op doesn't want 'bat' Commented Nov 10, 2016 at 6:43
  • @Mahi he does. He just wants list to be array as well Commented Nov 10, 2016 at 6:45
  • @Rajesh look at the required output then Commented Nov 10, 2016 at 6:46
  • can any one explain me using for loops Commented Nov 10, 2016 at 6:47

3 Answers 3

Reset to default
18

Use Object.keys and pass them on to Array.prototype.map to create the array that you want - see demo below:

var object={cats1:{Name:"cricket",imgUrl:"some url",list1:{bat:{Name:"bat",imgUrl:"some url",price:"$100"},pads:{displayName:"pads",imgUrl:"some url",price:"$50"}}},cats2:{Name:"football",imgUrl:"some url"}};

var result = Object.keys(object).map(e=>object[e]);

console.log(result);
.as-console-wrapper{top:0;max-height:100%!important;}

EDIT:

Correcting the solution to make list1 an array:

var object={cats1:{Name:"cricket",imgUrl:"some url",list1:{bat:{Name:"bat",imgUrl:"some url",price:"$100"},pads:{displayName:"pads",imgUrl:"some url",price:"$50"}}},cats2:{Name:"football",imgUrl:"some url"}};

var result = Object.keys(object).map(function(e){
  Object.keys(object[e]).forEach(function(k){
     if(typeof object[e][k] == "object") {
       object[e][k] = Object.keys(object[e][k]).map(function(l){
         return object[e][k][l];
       });
     }
  });
  return object[e];
});

console.log(result);
.as-console-wrapper{top:0;max-height:100%!important;}

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

7 Comments

Op doesn't want bat ??
should i revert upvote than ?
nice one :) ...
how do i check if properties has object ??
This will restrict to just 1 level down. I'd rather suggest using recursion.
|
3

You can recursion but do note this can cause freeze for big objects and can also lead to Maximum Call Stack exceeded

Logic

  • Loop over object and check if all entries are objects.
  • If yes, then a simple Object.keys(obj).map(x=>obj[x]) will do.
  • If not, then you will have to copy individual values and if object, then again loop in it for inner objects. A simple way is to loop on every key and if type is not object, just return value.

function ObjectToArray(obj) {
  if (typeof(obj) === 'object') {
    var keys = Object.keys(obj);
    var allObjects = keys.every(x => typeof(obj[x]) === 'object');
    if (allObjects) {
      return keys.map(x => ObjectToArray(obj[x]));
    } else {
      var o = {};
      keys.forEach(x => {
        o[x] = ObjectToArray(obj[x])
      });
      return o;
    }
  } else {
    return obj;
  }
}

var d={cats1:{Name:"cricket",imgUrl:"some url",list1:{bat:{Name:"bat",imgUrl:"some url",price:"$100"},pads:{displayName:"pads",imgUrl:"some url",price:"$50"}}},cats2:{Name:"football",imgUrl:"some url"}};

console.log(ObjectToArray(d))

Improve this answer

Comments

1

You could do something like this, by iterating over the input object keys and stripping out the keys.

var app = angular.module("sampleApp", []);

app.controller("sampleController", ["$scope",
  function($scope) {
    $scope.result = {
      "cats1": {
        "Name": "cricket",
        "imgUrl": "some url",
        "list1": {
          "bat": {
            "Name": "bat",
            "imgUrl": "some url",
            "price": "$100"
          },
          "pads": {
            "displayName": "pads",
            "imgUrl": "some url",
            "price": "$50"
          }
        }
      },
      "cats2": {
        "Name": "football",
        "imgUrl": "some url"
      }
    };
    $scope.format = Object.keys($scope.result).map((key) => $scope.result[key])
  }
]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
  <div ng-controller="sampleController">

    <div>Formatted</div>
    <pre>{{format | json}}</pre>
  </div>
</div>

Improve this answer

2 Comments

op doesn't want bat
aah.. overlooked. thanks for pointing it out

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.