How to add value to object dynamically-CodePudding

I getting data from backend in this format:

{
    "count": 40000,
    "next": "http://localhost:8000/merchants/?limit=20&name__startswith=Z&offset=20",
    "previous": null,
    "results": [
        {
            "id": 294,
            "name": "ZSL London Zoo",
            "slug": "zsl-london-zoo",
            "image": {
                "full_size": "http://127.0.0.1:6902/media/__placeholder__/placeholder.png",
                "thumbnail": "http://127.0.0.1:6902/media/__sized__/__placeholder__/placeholder-thumbnail-100x100.png",
                "medium_square_crop": "http://127.0.0.1:6902/media/__sized__/__placeholder__/placeholder-crop-c0-5__0-5-400x400.png",
                "small_square_crop": "http://127.0.0.1:6902/media/__sized__/__placeholder__/placeholder-crop-c0-5__0-5-50x50.png"
            }
        },
        {
            "id": 293,
            "name": "ZenMate",
            "slug": "zenmate",
            "image": {
                "full_size": "http://127.0.0.1:6902/media/__placeholder__/placeholder.png",
                "thumbnail": "http://127.0.0.1:6902/media/__sized__/__placeholder__/placeholder-thumbnail-100x100.png",
                "medium_square_crop": "http://127.0.0.1:6902/media/__sized__/__placeholder__/placeholder-crop-c0-5__0-5-400x400.png",
                "small_square_crop": "http://127.0.0.1:6902/media/__sized__/__placeholder__/placeholder-crop-c0-5__0-5-50x50.png"
            }
        }
    ]
}

And I have an object created like this:

let obj: { [k: string]: any } = { 'A': [], 'B': [], 'C': [], 'D': [], 'E': [], 'F': [], 'G': [], 'H': [], 'I': [], 'J': [], 'K': [], 'L': [], 'M': [], 'N': [], 'O': [], 'P': [], 'Q': [], 'R': [], 'S': [], 'T': [], 'U': [], 'V': [], 'W': [], 'X': [], 'Y': [], 'Z': [] };

I want to add those names from the API as the value of object keys empty array based on the first letter of the name.

I am fetching data from the backend like this:

ngOnInit():void{
  for (let i of this.keys) {
      this.api.getMerchantsWithAlbhabet(i).subscribe(x => {
        console.log(x.results);
        
      })
    }
}

CodePudding user response：

use charAt to get the first character, then access the object property, using the fetched character, then finally push into the array!

const arr = [{
    "id": 1,
    "name": "A Great Read",
    "slug": "a-great-read",
    "image": {
      "medium_square_crop": "http://127.0.0.1:6902/media/__sized__/merchants/f4b509269d8ee02501ad01e648a11c72980c782d-crop-c0-5__0-5-400x400-70.jpg",
      "full_size": "http://127.0.0.1:6902/media/merchants/f4b509269d8ee02501ad01e648a11c72980c782d.jpg",
      "small_square_crop": "http://127.0.0.1:6902/media/__sized__/merchants/f4b509269d8ee02501ad01e648a11c72980c782d-crop-c0-5__0-5-50x50-70.jpg",
      "thumbnail": "http://127.0.0.1:6902/media/__sized__/merchants/f4b509269d8ee02501ad01e648a11c72980c782d-thumbnail-100x100-70.jpg"
    }
  },
  {
    "id": 2,
    "name": "A Place for Everything",
    "slug": "a-place-for-everything",
    "image": {
      "medium_square_crop": "http://127.0.0.1:6902/media/__sized__/merchants/c105bd1ed954c5c465cdd22d04d7009ed4486157-crop-c0-5__0-5-400x400-70.jpg",
      "full_size": "http://127.0.0.1:6902/media/merchants/c105bd1ed954c5c465cdd22d04d7009ed4486157.jpg",
      "small_square_crop": "http://127.0.0.1:6902/media/__sized__/merchants/c105bd1ed954c5c465cdd22d04d7009ed4486157-crop-c0-5__0-5-50x50-70.jpg",
      "thumbnail": "http://127.0.0.1:6902/media/__sized__/merchants/c105bd1ed954c5c465cdd22d04d7009ed4486157-thumbnail-100x100-70.jpg"
    }
  }
]

let obj = {
  'A': [],
  'B': [],
  'C': [],
  'D': [],
  'E': [],
  'F': [],
  'G': [],
  'H': [],
  'I': [],
  'J': [],
  'K': [],
  'L': [],
  'M': [],
  'N': [],
  'O': [],
  'P': [],
  'Q': [],
  'R': [],
  'S': [],
  'T': [],
  'U': [],
  'V': [],
  'W': [],
  'X': [],
  'Y': [],
  'Z': []
};

arr.forEach(x => {
  const char = x.name.charAt(0).toUpperCase();
  obj[char].push(x);
});

console.log(obj);

CodePudding user response：

Best guess on the given information:

for (let i of this.keys) {
      this.api.getMerchantsWithAlbhabet(i).subscribe(x => {
        this.obj[i] = x.results.map(result => result.name);     
      })
    }