Javascript/Jquery - Create array format based on JSON response

Question

Used below JS code to get JSON response from endpoint URL. Response value returns correctly like below JSON format.

From this JSON format, i need to extract and display in array format for DATALAYER. But, below code getting output of last time instead of all JSON response items to show.

Format required:

newArray [
  {
    codePlan: "SSS0111",
    title: "Title 1"
  },
  {
    codePlan: "",
    title: "Title 2"
  },
  {
    codePlan: "SSS0888,CCC0222,EEE0001,DDD0009",
    title: "Title 3"
  }
]

But it get last item only and displays like this.

newArray [
  {
    codePlan: "SSS0891",
    title: "Title 5"
  }
]

var endpointUrl = '/data/codelisting.json';

$.get(endpointUrl, function (response) {
    $.each(response.data, function (i, item) {
        var dataLayerObject = {};
        var newArray = [
          {
            codePlan: item.codePlan,
            title: item.title
          }
        ];
        dataLayerObject = {
          arrayParent: {
            newArray : [...newArray]
          }
        };
        DTM.setDataLayer(dataLayerObject);
    });
});

{
   "total": 5,
   "data":[
      {
         "title":"Title 1",
         "description":"description 1"
         "codePlan":[
            "SSS0111"
         ]
      },
      {
         "title":"Title 2",
         "description":"description 2"
         "codePlan":[]
      },
      {
         "title":"Title 3",
         "description":"description 3"
         "codePlan":[
            "SSS0888",
            "CCC0222",
            "EEE0001",
            "DDD0009"
         ]
      },
      {
         "title":"Title 4",
         "description":"description 4"
         "codePlan":[
            "SSS0897"
         ]
      },
      {
         "title":"Title 5",
         "description":"description 5"
         "codePlan":[
            "SSS0891"
         ]
      }
   ]
}

question from:https://stackoverflow.com/questions/65947800/javascript-jquery-create-array-format-based-on-json-response

Answer 1

The problem with var newArray = [ it updates the newArray value with a new value each time in a loop .. So you need to define it before .each() var newArray = []; and let .each() add a new value to it newArray[i] =

$.get(endpointUrl, function (response) {    
    var newArray = [];       //<<<<<<<<<<< here
    $.each(response.data, function (i, item) {
      var dataLayerObject = {};
      newArray[i] = [        // <<<<<< use newArray[i] here
          {
            codePlan: item.codePlan,
            title: item.title
          }
        ];
       dataLayerObject = {
         arrayParent: {
         newArray : [...newArray]
       }
    };
    DTM.setDataLayer(dataLayerObject);
  });

var response = [
  {
    codePlan: "SSS0111",
    title: "Title 1"
  },
  {
    codePlan: "",
    title: "Title 2"
  },
  {
    codePlan: "SSS0888,CCC0222,EEE0001,DDD0009",
    title: "Title 3"
  }
];

var newArray = []
$.each(response , function(i , item){
  newArray[i] = [{
    codePlan: item.codePlan,
    title: item.title
  }]
});

console.log(newArray);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>