"Unleashing the Power of Effortless Object Unwr

Question

"Unleashing the Power of Effortless Object Unwr

Looking for a better way to convert a raw json snapshot from Firebase into a JS class. My current method is lengthy and inefficient. Does anyone have a more optimal solution?

Class:

class SuggestedLocation {
  country_slug
  region_slug
  slug
  marker_type
  typeInType
  geometry
  properties
  type
  id
  constructor(country_slug, region_slug, slug, marker_type, typeInType, geometry, properties, type, id) {
    this.country_slug = country_slug
    this.region_slug = region_slug
    this.slug = slug
    this.marker_type = marker_type
    this.typeInType = typeInType
    this.geometry = geometry
    this.properties = properties
    this.type = type
    this.id = id
  }
}

Current unwrapping technique:

static fromSnapshot(snapshot) {
let suggestedLocations = [new SuggestedLocation()]
if (snapshot.exists()) {
  const value = snapshot.val()
  // Monster loop with nested objects - currently inefficient
}
return new SuggestedLocationsObject(suggestedLocations)

}

Example Json:

{
  "united-kingdom" : {
    "calderdale" : {
      "rossendale-way" : {
        "accommodations" : {
          "Campground" : {
            "zO3HxZVELbd" : {
              "geometry" : {
                "coordinates" : [ -2.1901328761018704, 53.65022995288969 ],
                "type" : "Point"
              },
              "properties" : {
                "marker-color" : "#6e875f",
                "marker-size" : "medium",
                "marker-symbol" : "lodging",
                "name" : "",
                "place_id" : "zO3HxZVELbd",
                "plus_code" : ""
              },
              "type" : "Feature"
            }
          }
        }
      }
    }
  }
}

javascript json

Answer 1

Answer №1

To analyze your snapshot data more efficiently, you can utilize the Object.entries method instead of just using Object.keys. This will allow you to retrieve both keys and values at once.

In addition, consider employing the map and flatMap functions to generate an array of instances of SuggestedLocation without explicitly using push.

If you find yourself bothered by multiple assignments to this.*, you might want to alter the constructor signature to accept an object as input rather than individual values. Then, use Object.assign for a streamlined transfer of values.

Regarding the initial element with undefined properties in the array of SuggestedLocation instances, its purpose may be related to scenarios where snapshot.exists() returns false. In such cases, this empty entry serves a specific function. However, it is unclear why this dummy entry is necessary when actual data is present.

Below is the code implementing the aforementioned concepts using plain JavaScript (non-TypeScript):

class SuggestedLocationsObject extends Array {
  constructor(arr) {
    super();
    Object.assign(this, arr);
  }
}

class SuggestedLocation {
  constructor(obj) {
    Object.assign(this, obj);
  }
}

function fromSnapshot(snapshot) {
    return new SuggestedLocationsObject(
      !snapshot.exists() 
      ? [new SuggestedLocation()] 
      : Object.entries(snapshot.val()).flatMap(([country_slug, regionSlugs]) =>
          Object.entries(regionSlugs).flatMap(([region_slug, slugs]) =>
            Object.entries(slugs).flatMap(([slug, markerTypes]) =>
              Object.entries(markerTypes).flatMap(([markerType, accomAmenityTypes]) =>
                Object.entries(accomAmenityTypes).flatMap(([accomAmenityType, typeInTypes]) =>
                  Object.entries(typeInTypes).flatMap(([typeInType, ids]) =>
                    Object.entries(ids).map(([id, {properties, geometry, type}]) =>
                      new SuggestedLocation({country_slug, region_slug, slug, markerType, typeInType, geometry, properties, type, id})
                    )
                  )
                )
              )
            )
          )
        )
    );
}

let data = {
  "united-kingdom" : {
    "calderdale" : {
      "rossendale-way" : {
        "accommodations" : {
          "Campground" : {
            "zO3HxZVELbd" : {
              "geometry" : {
                "coordinates" : [ -2.1901328761018704, 53.65022995288969 ],
                "type" : "Point"
              },
              "properties" : {
                "marker-color" : "#6e875f",
                "marker-size" : "medium",
                "marker-symbol" : "lodging",
                "name" : "",
                "place_id" : "zO3HxZVELbd",
                "plus_code" : ""
              },
              "type" : "Feature"
            }
          }
        }
      }
    }
  }
};

let snapshot = {
    exists() { return true },
    val() { return data }
}

let result = fromSnapshot(snapshot);

console.log(result);

Answer 2

To analyze your snapshot data more efficiently, you can utilize the Object.entries method instead of just using Object.keys. This will allow you to retrieve both keys and values at once.

In addition, consider employing the map and flatMap functions to generate an array of instances of SuggestedLocation without explicitly using push.

If you find yourself bothered by multiple assignments to this.*, you might want to alter the constructor signature to accept an object as input rather than individual values. Then, use Object.assign for a streamlined transfer of values.

Regarding the initial element with undefined properties in the array of SuggestedLocation instances, its purpose may be related to scenarios where snapshot.exists() returns false. In such cases, this empty entry serves a specific function. However, it is unclear why this dummy entry is necessary when actual data is present.

Below is the code implementing the aforementioned concepts using plain JavaScript (non-TypeScript):

class SuggestedLocationsObject extends Array {
  constructor(arr) {
    super();
    Object.assign(this, arr);
  }
}

class SuggestedLocation {
  constructor(obj) {
    Object.assign(this, obj);
  }
}

function fromSnapshot(snapshot) {
    return new SuggestedLocationsObject(
      !snapshot.exists() 
      ? [new SuggestedLocation()] 
      : Object.entries(snapshot.val()).flatMap(([country_slug, regionSlugs]) =>
          Object.entries(regionSlugs).flatMap(([region_slug, slugs]) =>
            Object.entries(slugs).flatMap(([slug, markerTypes]) =>
              Object.entries(markerTypes).flatMap(([markerType, accomAmenityTypes]) =>
                Object.entries(accomAmenityTypes).flatMap(([accomAmenityType, typeInTypes]) =>
                  Object.entries(typeInTypes).flatMap(([typeInType, ids]) =>
                    Object.entries(ids).map(([id, {properties, geometry, type}]) =>
                      new SuggestedLocation({country_slug, region_slug, slug, markerType, typeInType, geometry, properties, type, id})
                    )
                  )
                )
              )
            )
          )
        )
    );
}

let data = {
  "united-kingdom" : {
    "calderdale" : {
      "rossendale-way" : {
        "accommodations" : {
          "Campground" : {
            "zO3HxZVELbd" : {
              "geometry" : {
                "coordinates" : [ -2.1901328761018704, 53.65022995288969 ],
                "type" : "Point"
              },
              "properties" : {
                "marker-color" : "#6e875f",
                "marker-size" : "medium",
                "marker-symbol" : "lodging",
                "name" : "",
                "place_id" : "zO3HxZVELbd",
                "plus_code" : ""
              },
              "type" : "Feature"
            }
          }
        }
      }
    }
  }
};

let snapshot = {
    exists() { return true },
    val() { return data }
}

let result = fromSnapshot(snapshot);

console.log(result);

"Unleashing the Power of Effortless Object Unwr

Answer №1

Similar questions

Convert XML data into a structured table format

There appears to be a JavaScript validation error occurring on the current page, however, you are able

Failure to trigger the success action in ExtJS

Easily retrieve JSON data from a specified URL or localhost website using Visual Studio Apache Cordova

Implementing custom CSS styles to a component in real-time with ng-style

Having trouble with Material-UI Textfield losing focus after re-rendering? Need a solution?

Setting compilerOptions.isCustomElement for VueJS 3 in a Laravel project: A step-by-step guide

"Implementing class names with hash function in Next.js version 14

ng-options encounters duplicate data when using group by in Internet Explorer

Ways to display JSON data in Angular 2

Delay the rendering of the MUI DataGrid column until after the DataGrid is visible on the screen

Creating a collapsible accordion feature with jQuery using a specific HTML layout: wanna learn how?

Guide on plotting latitude and longitude coordinates on Google Maps with Vue.js through JSON data fetched via AJAX

What is the order of reflection in dynamic classes - are they added to the beginning or

Ways to organize backbone models, views, and collections using vim?

Having trouble with installing a React app using npx create-react-app my-app?

Error message: The function pokemon.map does not exist

What is the best way to test chained function calls using sinon?

Is it possible to extract elements from a single list and insert them onto various pages?

The interval keeps resetting every time I want the initial one to expire first