"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

Accessing the Div id stored in a session parameter

When utilizing ASP.NET Core Razor pages for file uploads and utilizing AJAX Post to send the file to an IFormFile handler, the request

Regular expressions or regex can be used to match the initial letter or letters of various words

Scala string: Unescaping made easy

What are the steps to approve an Amazon Pay request for retrieving a "get checkout session"?

Error: Unable to parse JSON field value due to an unexpected OBJECT_START

Tips for producing/reserving cropped images from a photo? (includes converting images to base64 format)

Tips on managing ajaxStart and ajaxStop events the Angular2 way

Troubleshooting the Vue.js component rendering issue

JavaScript: Unusual behavior discovered in forEach iteration

Guide to transforming Amazon Ion object into JSON object using Go Lang

"Effortlessly emptying the text field with material-ui in React

Add an array as a nested child within another array using node.js and JavaScript

How can I intercept/manage the back button of the browser in React-router?

Increase the value of a number using jQuery

How can you calculate the number of elements in a jQuery array and iterate through each of them?

Identify which anchor tag from the group with the matching class was selected and retrieve its unique identifier

Using Python to Populate an Array Inside a JSON Object

Yahoo Finance provides information on all currencies with the Kuwaiti Dinar (KWD) as

The express app.get middleware seems to be malfunctioning due to a 'SyntaxError: Unexpected end of input'