Skip to main content
more precisely explains request from backend
Source Link
{
    "count": 40000,
    "next": "http://localhost:8000/merchants/?limit=20&name__startswith=Z&offset=20",
    "previous": null,
    "results": [
        {
            "id": 1294,
            "name": "A"ZSL GreatLondon Read"Zoo",
            "slug": "a"zsl-greatlondon-read"zoo",
            "image": {
                "medium_square_crop""full_size": "http://127.0.0.1:6902/media/__sized__/merchants__placeholder__/f4b509269d8ee02501ad01e648a11c72980c782d-crop-c0-5__0-5-400x400-70placeholder.jpg"png",
                "full_size""thumbnail": "http://127.0.0.1:6902/media/merchants__sized__/f4b509269d8ee02501ad01e648a11c72980c782d__placeholder__/placeholder-thumbnail-100x100.jpg"png",
                "small_square_crop""medium_square_crop": "http://127.0.0.1:6902/media/__sized__/merchants__placeholder__/f4b509269d8ee02501ad01e648a11c72980c782dplaceholder-crop-c0-5__0-5-50x50-70400x400.jpg"png",
                "thumbnail""small_square_crop": "http://127.0.0.1:6902/media/__sized__/merchants__placeholder__/f4b509269d8ee02501ad01e648a11c72980c782dplaceholder-thumbnailcrop-100x100c0-705__0-5-50x50.jpg"png"
            }
        },
        {
            "id": 2293,
            "name": "A Place for Everything""ZenMate",
            "slug": "a-place-for-everything""zenmate",
            "image": {
                "medium_square_crop""full_size": "http://127.0.0.1:6902/media/__sized__/merchants__placeholder__/c105bd1ed954c5c465cdd22d04d7009ed4486157-crop-c0-5__0-5-400x400-70placeholder.jpg"png",
                "full_size""thumbnail": "http://127.0.0.1:6902/media/merchants__sized__/c105bd1ed954c5c465cdd22d04d7009ed4486157__placeholder__/placeholder-thumbnail-100x100.jpg"png",
                "small_square_crop""medium_square_crop": "http://127.0.0.1:6902/media/__sized__/merchants__placeholder__/c105bd1ed954c5c465cdd22d04d7009ed4486157placeholder-crop-c0-5__0-5-50x50-70400x400.jpg"png",
                "thumbnail""small_square_crop": "http://127.0.0.1:6902/media/__sized__/merchants__placeholder__/c105bd1ed954c5c465cdd22d04d7009ed4486157placeholder-thumbnailcrop-100x100c0-705__0-5-50x50.jpg"png"
            }
        }
    ]
}
{
            "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"
            }
        }
{
    "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"
            }
        }
    ]
}
Source Link

How to add value to object dynamically

I getting data from backend in this format:

{
            "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"
            }
        }

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);
        
      })
    }
}