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

Not the best solution from complexity point of view.... but if you will have the same structure of streets array, this will solve the problem.

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

let fullAdress = "";
let listOfAdress = []

for (let street of jsonData.streets) {

  let strNumbers = street.numbers;

  for (let building of strNumbers) {
    fullAdress = building.buildingNumberOrName + " " + street.name + ", " + 
                  jsonData.town + ", " +
                  jsonData.country + ", " +
                  jsonData.postcode;
                  
    listOfAdress.push(fullAdress);
  }
  
}

console.log(listOfAdress)

Answer 2

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.

Answer 3

You could collect all information and push string to the result set. This works for more than one object.

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" }],
    result = data.reduce((r, { county, town, streets, postcode }) => {
        streets.forEach(({ name, numbers }) =>
            numbers.forEach(({ buildingNumberOrName }) =>
                r.push(`${buildingNumberOrName} ${name}, ${town}, ${county}, ${postcode}`)
            )
        );
        return r;
    }, []);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 4

It's hard to answer your question without knowing what you want to do when there are several streets, but in general that looks like a case where you would

• use map() and template strings to convert objects to strings, and then
• join() to merge these strings into a single string.