Problem with UniqueValueRenderer

[LazyDogz]

I want to make a UniqueValueRenderer that load from a list via AJAX but not working. here is my code:

var renderer = [];
    console.log(renderer);
    $.ajax({
        type: 'POST',
        url: '/LocationType/LoadLocationType',  
        success: function (data) {
            var result = JSON.stringify(data);
            var obj = JSON.parse(result);  
            console.log(obj);
            for (var i = 0; i < obj.length; ++i) {
                let rendererpoint = new UniqueValueRenderer({
                    field: "id",
                    uniqueValueInfos: [{
                        value: data[i].id,
                        label: data[i].locationTypeName,
                        symbol: {
                            type: "picture-marker",
                            url:"https://localhost/image/"+ data[i].locationTypeImageName,
                            width: "20px",
                            height: "20px",
                            outline: {
                                color: [255, 255, 255],
                                width: 1
                            }
                        }
                    }]
                });
                 renderer.push(rendererpoint);
            }
            
        },
        error: function () {
            alert('Something when wrong');
        }
    })

But it doesn't working. please help me 

[JoelBennett · Accepted solution]

Your implementation will generate a number of UniqueValueRenderers, each with one symbol.  However, it seems what you're really trying to do is create a single UniqueValueRenderer with all the symbols.  If that's the case, then the code below may solve the problem:

$.ajax({
	type: "GET",
	dataType: "json",
	url: "/LocationType/LoadLocationType",  
	success: function(data) {
		var renderer = new UniqueValueRenderer({field:"id});

		for (var i = 0; i < data.length; ++i) {
			renderer.addUniqueValueInfo({
				value: data[i].id,
				label: data[i].locationTypeName,
				symbol: {
					type: "picture-marker",
					url: "https://localhost/image/" + data[i].locationTypeImageName,
					width: "20px",
					height: "20px",
					outline: {
						color: [255, 255, 255],
						width: 1
					}
				}
			});
		}

		//now do something with the renderer (e.g. add to a layer, etc).
	},
	error: function () {
		alert('Something when wrong');
	}
})

[LazyDogz]

Thank you so much.