How to convert json array object to json array

Question

** Scenario:**

I am using lodash to remove the empty key from my JSON.

But when it removes the keys it converts my array in an object for example

{
"projection": "Miller",
"series": [
    {
        "mapPolygons": {
        "states": {
            "hover": {
                "properties": {
                    "fill": "#67b7dc"
                }
            }
        }
    },
    "heatRules": {
        "0": {
            "min": "#a82626",
            "max": "#AAAA00"              
        }
    },
    "data": {
        "0": {
            "id": "US",
            "value": 3461.37
        },
        "1": {
            "id": "DE",
            "value": 2858.09
        },
        "2": {
            "id": "NO",
            "value": 3418.87
        },
        "3": {
            "id": "ES",
            "value": 3522.46
        }
    }
}
],
 "zoomControl": {
"slider": {
    "height": 100
}
},
  "titles": {
    "0": {
    "fontSize": 20
    }
},
"homeZoomLevel": 1
}

Problem:

If you see in the above code there is heatRules property which is an array after converting it is converted into object of 0, again if you see data attribute it does same if you see titles attribute it does same over there.

i have used below link code to remove empty object and null object:

Why lodash converts my array into object?

Input Data:

    {
"projection": "Miller",
"series": [
    {
    "mapPolygons": {
    "states": {
        "hover": {
            "properties": {
                "fill": "#67b7dc",
                "size": ""
            }
        }
    }
},
"heatRules": [
     {
        "min": "#a82626",
        "max": "#AAAA00",
         "fill": null              
    }
],
"data": [
    {
        "id": "US",
        "value": 3461.37
    },
    {
        "id": "DE",
        "value": 2858.09
    },
    {
        "id": "NO",
        "value": 3418.87
    },
    {
        "id": "ES",
        "value": 3522.46
    }
]
}
],
     "zoomControl": {
"slider": {
    "height": 100
}
},
  "titles": [
   {
    "fontSize": 20,
   "fontColor": "" 
    }
],
"homeZoomLevel": 1
}

Output Data:

{
"projection": "Miller",
"series": [
    {
    "mapPolygons": {
    "states": {
        "hover": {
            "properties": {
                "fill": "#67b7dc"
            }
        }
    }
},
"heatRules": [
     {
        "min": "#a82626",
        "max": "#AAAA00"              
    }
],
"data": [
    {
        "id": "US",
        "value": 3461.37
    },
    {
        "id": "DE",
        "value": 2858.09
    },
    {
        "id": "NO",
        "value": 3418.87
    },
    {
        "id": "ES",
        "value": 3522.46
    }
]
}
],
     "zoomControl": {
"slider": {
    "height": 100
}
},
  "titles": [
   {
    "fontSize": 20 
    }
],
"homeZoomLevel": 1
}

If you see above output it removes null and blank key from properties -> size, heatRulues -> fill and from title it removes fontColor.

Please share your input sample data – Arshpreet Wadehra Jan 25 '19 at 05:50 — Arshpreet Wadehra, Jan 25 '19 at 05:50
and also the expected output. – holydragon Jan 25 '19 at 06:19 — holydragon, Jan 25 '19 at 06:19
@ArshpreetWadehra i have provided input data. – Mayur Jan 25 '19 at 06:52 — Mayur, Jan 25 '19 at 06:52
@holydragon i have provided expected output too. – Mayur Jan 25 '19 at 06:52 — Mayur, Jan 25 '19 at 06:52

Steven Spungin · Answer 1 · 2019-01-25T14:14:02.877

1

If your code uses

typeof v === 'object'

it will return true for arrays.

To check for array, use

Array.isArray(t)

Treating array as object and iterating over keys will result in your issue.

Sample Function To Recurse But Not Process Arrays

function removeFalsies(obj) {
  return _.transform(obj, function(o, v, k, l) {
      if (Array.isArray(obj) {
          for (let arrItem of obj) {
            removeFalsies(arrItem);
          }
          return
        }
        // else not array...
      })
  }

edited Jan 25 '19 at 14:14

answered Jan 25 '19 at 06:45

Steven Spungin

27,002
5
88
78

Thanks, @steven-spungin could your please update in the function. – Mayur Jan 25 '19 at 06:56
@Mayur I do no see a `function` in your question. Are you referring to the linked answer? If so, I added a modification that should process items in the array instead of the provided code. – Steven Spungin Jan 25 '19 at 14:14

score 0 · Answer 2 · answered Jan 25 '19 at 07:37

STEPS

Iterate over heatRules property (since it is array so there might be multiple objects in there)
Iterate over the properties of each object in heatRules
Delete every property that has value of null

let data = {
  "projection": "Miller",
  "series": [{
    "mapPolygons": {
      "states": {
        "hover": {
          "properties": {
            "fill": "#67b7dc",
            "size": ""
          }
        }
      }
    },
    "heatRules": [{
      "min": "#a82626",
      "max": "#AAAA00",
      "fill": null
    }],
    "data": [{
        "id": "US",
        "value": 3461.37
      },
      {
        "id": "DE",
        "value": 2858.09
      },
      {
        "id": "NO",
        "value": 3418.87
      },
      {
        "id": "ES",
        "value": 3522.46
      }
    ]
  }],
  "zoomControl": {
    "slider": {
      "height": 100
    }
  },
  "titles": [{
    "fontSize": 20,
    "fontColor": ""
  }],
  "homeZoomLevel": 1
}

data.series[0].heatRules.forEach(hr => {
  Object.keys(hr).forEach(p => {
    if (hr[p] === null) {
      delete hr[p]
    }
  })
})

console.log(data)

score 0 · Answer 3 · answered Jan 25 '19 at 07:37

I tried Why lodash converts my array into object? e.g. and its working. check the code below.

let a = {
  "projection": "Miller",
  "series": [
    {
      "mapPolygons": {
        "states": {
          "hover": {
            "properties": {
              "fill": "#67b7dc",
              "size": ""
            }
          }
        }
      },
      "heatRules": [
        {
          "min": "#a82626",
          "max": "#AAAA00",
          "fill": null
        }
      ],
      "data": [
        {
          "id": "US",
          "value": 3461.37
        },
        {
          "id": "DE",
          "value": 2858.09
        },
        {
          "id": "NO",
          "value": 3418.87
        },
        {
          "id": "ES",
          "value": 3522.46
        }
      ]
    }
  ],
  "zoomControl": {
    "slider": {
      "height": 100
    }
  },
  "titles": [
    {
      "fontSize": 20,
      "fontColor": ""
    }
  ],
  "homeZoomLevel": 1
}

removeFalses = (obj)=> {
    return _.transform(obj, function (o, v, k) {

      if (v && typeof v === 'object' && !_.isArray(v)) {

        if (v !== '') {
          o[k] = removeFalses(v);
        }

      } else if(_.isArray(v)) {
  if(!o.hasOwnProperty(k)) o[k] = [];

  //And if it is array loop through it

  _.forEach(v, function(v1, k1) {
     o[k].push(removeFalses(v1));
  });

  }else if (v === false) {
        o[k] = v;
      } else if (v) {
        o[k] = v;
      }
    });
  }

console.log(removeFalses(a)) //desired output

How to convert json array object to json array

3 Answers3

Sample Function To Recurse But Not Process Arrays