Invalid response of JSON data from Django QuerySet

Question

With this query:

def high_hazard(request):
    reference_high = FloodHazard.objects.filter(hazard='High')
    ids_high = reference_high.values_list('id', flat=True)

    flood_hazard = []
    djf = Django.Django(geodjango='geom', properties=['bldg_name', 'bldg_type'])
    geoj = GeoJSON.GeoJSON()
    for myid in ids_high:
        getgeom = FloodHazard.objects.get(id=myid).geom
        response_high = BuildingStructure.objects.filter(geom__intersects=getgeom)
        get_hazard = geoj.encode(djf.decode(response_high.transform(900913)))
        flood_hazard.append(get_hazard)

    return HttpResponse(flood_hazard, content_type='application/json')

I was able to filter the BuildingStructure model based on FloodHazard type which is in this case with "high" value. Although it returns a JSON data, the output is messed up. I guess because it tests all the geometry from the FloodHazard model during loop. So, it returns several null set or empty and lots of FeatureCollection which makes it an invalid JSON data. The output of the query above is like this:

{
    "crs": null,
    "type": "FeatureCollection",
    "features": [

    ]
}{
    "crs": null,
    "type": "FeatureCollection",
    "features": [

    ]
}{
    "crs": null,
    "type": "FeatureCollection",
    "features": [
        {
            "geometry": {
                "type": "MultiPoint",
                "coordinates": [
                    [
                        13974390.863509608,
                        1020340.6129766875
                    ]
                ]
            },
            "type": "Feature",
            "id": 3350,
            "properties": {
                "bldg_name": "",
                "bldg_type": ""
            }
        },
        {
            "geometry": {
                "type": "MultiPoint",
                "coordinates": [
                    [
                        13974400.312472697,
                        1020356.5477410051
                    ]
                ]
            },
            "type": "Feature",
            "id": 3351,
            "properties": {
                "bldg_name": "",
                "bldg_type": ""
            }
        }
    ]
}

As I test it with a JSON validator, it is invalid. So, is there a way to restructure(using underscore.js or jquery) this JSON to output like below? or I need to change my query?

{
    "crs": null,
    "type": "FeatureCollection",
    "features": [
        {
            "geometry": {
                "type": "MultiPoint",
                "coordinates": [
                    [
                        13974390.863509608,
                        1020340.6129766875
                    ]
                ]
            },
            "type": "Feature",
            "id": 3350,
            "properties": {
                "bldg_name": "",
                "bldg_type": ""
            }
        },
        {
            "geometry": {
                "type": "MultiPoint",
                "coordinates": [
                    [
                        13974400.312472697,
                        1020356.5477410051
                    ]
                ]
            },
            "type": "Feature",
            "id": 3351,
            "properties": {
                "bldg_name": "",
                "bldg_type": ""
            }
        }
    ]
}

and just ignore/remove all the FeatureCollection without values and group all with values. Here is the result of the query above for reference.

Answer 1

Instead of

return HttpResponse(flood_hazard, content_type='application/json')

Try

return HttpResponse(json.dumps(flood_hazard), content_type='application/json')

You will have to import json at the top.