Formatting Javascript Object to new Array

Question

I am having a few issues formatting data in the way I require it. At the moment, I have an empty function

populateAddresses(data) {
    console.log(JSON.stringify(data))
}

This outputs the full data which takes the following format

{
  "county": "WEST MIDLANDS",
  "town": "SOLIHULL",
  "streets": [
    {
      "name": "MARSLAND ROAD",
      "numbers": [
        {
          "buildingNumberOrName": "1",
          "buildingName": "",
          "subBuildingName": "",
          "buildingNumber": "1"
        },
        {
          "buildingNumberOrName": "3",
          "buildingName": "",
          "subBuildingName": "",
          "buildingNumber": "3"
        }
      ]
    }
  ],
  "postcode": "B92 7BU"
}

So it is basically the addresses for a postcode. What I am trying to do is create an array of complete addresses. So for the above example, my array would be something like this

["1 MARSLAND ROAD, SOLIHULL, WEST MIDLANDS, B92 7BU", "3 MARSLAND ROAD, SOLIHULL, WEST MIDLANDS, B92 7BU"]

So it will be buildingNumberOrName + streets name, then town, county and postcode. There could be more than one street, which could potentially complicate things a bit further?

I was thinking about maybe looping the Object to get the information, something like

Object.keys(data).forEach(key => {

});

But then I think I will have to many inner loops. I have seen mapping, but not sure how this could be used here?

Any advice appreciated.

Thanks

Answer 1

It's not a problem to have nested loops for this. Your data only really has two levels (streets and numbers), so nested loops do the trick clearly and easily:

const array = [];
const {county, town, postcode} = data;
for (const {name, numbers} of data.streets) {
    for (const {buildingNumberOrName} of numbers) {
        array.push(`${buildingNumberOrName} ${name} ${town}, ${county}, ${postcode}`);
    }
}

Live Example:

const data = {
  "county": "WEST MIDLANDS",
  "town": "SOLIHULL",
  "streets": [
    {
      "name": "MARSLAND ROAD",
      "numbers": [
        {
          "buildingNumberOrName": "1",
          "buildingName": "",
          "subBuildingName": "",
          "buildingNumber": "1"
        },
        {
          "buildingNumberOrName": "3",
          "buildingName": "",
          "subBuildingName": "",
          "buildingNumber": "3"
        }
      ]
    }
  ],
  "postcode": "B92 7BU"
};

const array = [];
const {county, town, postcode} = data;
for (const {name, numbers} of data.streets) {
    for (const {buildingNumberOrName} of numbers) {
        array.push(`${buildingNumberOrName} ${name} ${town}, ${county}, ${postcode}`);
    }
}

console.log(array);

That works just fine if there are multiple streets, assuming the structure of the object for subsequent entries in streets is the same as the one you've shown.

Or if you need to stick to ES5 or earlier:

var array = [];
var county = data.county, town = data.town, postcode = data.postcode;
data.streets.forEach(function(street) {
    var name = street.name;
    street.numbers.forEach(function(num) {
        array.push(num.buildingNumberOrName + " " + name + " " + town + ", " + county + ", " + postcode);
    });
});

Live Example:

var data = {
  "county": "WEST MIDLANDS",
  "town": "SOLIHULL",
  "streets": [
    {
      "name": "MARSLAND ROAD",
      "numbers": [
        {
          "buildingNumberOrName": "1",
          "buildingName": "",
          "subBuildingName": "",
          "buildingNumber": "1"
        },
        {
          "buildingNumberOrName": "3",
          "buildingName": "",
          "subBuildingName": "",
          "buildingNumber": "3"
        }
      ]
    }
  ],
  "postcode": "B92 7BU"
};

var array = [];
var county = data.county, town = data.town, postcode = data.postcode;
data.streets.forEach(function(street) {
    var name = street.name;
    street.numbers.forEach(function(num) {
        array.push(num.buildingNumberOrName + " " + name + " " + town + ", " + county + ", " + postcode);
    });
});

console.log(array);

---

That follows the rule from your question about the output:

...buildingNumberOrName + streets name, then town, county and postcode...

but you can mix in the other properties from the objects in the numbers array as necessary when creating the string.