Utilizing AngularJS with an extensive collection of JSON data

Question

Utilizing AngularJS with an extensive collection of JSON data

Currently, I am working on developing an application that utilizes a Parent-Child hierarchy by incorporating AngularJs to connect the information retrieved from the RESTFUL web service with the user interface.

To demonstrate, here is an example of the JSON structure that the web service might provide:

{"id":0,"name":"Parent One","listOfChildren":[{"id":0,"name":"Child 1","childType":"CHILD1"},{"id":1,"name":"Child 2","childType":"CHILD1"}]}

While I understand how to store this data in an array and present it in a table through Angular's ng-repeat feature, I am faced with a challenge. With potentially hundreds or even thousands of children for each parent, and countless parents overall, managing such a massive array becomes daunting.

Additionally, updating a parent with a new child requires searching the entire array to locate the specific parent before inserting the new child, resulting in significant inefficiency.

Therefore, my inquiry revolves around finding a more streamlined approach to handle this scenario without relying on a single extensive array.

I appreciate any guidance or assistance provided. Thank you.

javascript arrays json angularjs

Answer 1

Answer №1

Given the vast amount of data at hand, finding a flawless solution may prove to be challenging. Do you really need to display all parents and children simultaneously? Perhaps implementing pagination to show only 100 nodes at a time could be beneficial. It seems in your case that both parent and children share the same id property value of 0. Is this accurate or do parents and children possess distinct ids? Are you able to modify the format of the json provided by the backend web service?

Bearing some assumptions in mind based on the aforementioned questions, here is my suggested proposal:

Transform your JSON into a structured format similar to the following:

var bigobject = {
    100: {
        "id":100,
        "name":"Parent One",
        "listOfChildren":{
            101: {
                "id":101,
                "name":"Child 1",
                "childType":"CHILD1"
            },
            102: {
                "id":102,
                "name":"Child 2",
                "childType":"CHILD1"
            }
            ... // further children listed here
        }
    },
    103: {
        "id":103,
        "name":"Parent Two",
        "listOfChildren":{
            104: {
                "id":104,
                "name":"Child 3",
                "childType":"CHILD1"
            },
            105: {
                "id":105,
                "name":"Child 4",
                "childType":"CHILD1"
            }
            ... // more children listed here
        }
    },
    ...  // additional parents included
}

The concept involves organizing a single comprehensive json object where each node’s key corresponds to its id. Moreover, transforming a parent’s listOfChildren from an array to an object bearing keys matching the ids of its children.

Incorporating a new child to a parent becomes relatively straightforward. For instance:

var parentId = 103;
var newChild = {"id":110,"name":"Child 2","childType":"CHILD1"};
bigobject[parentId].listOfChildren[newChild.id] = newChild;

To facilitate paginating results, one could utilize the provided limitTo filter along with a customized startFrom filter:

.filter('startFrom', function() {
    return function(input, start) {
        if(!input) return input;
        start = +start;
        return input.slice(start);
    };
});

This would necessitate adjusting your ng-repeat as follows:

<div ng-repeat="(parentId, parent) in bigobject | startFrom:start | limitTo:pageSize">
    <div ng-repeat="(childId, child) in bigobject[parentId].listOfChildren">
        {{parent.name}} - {{child.name}}
    </div>
</div>

I trust this guidance proves helpful in steering you towards a viable direction.

Answer 2

Given the vast amount of data at hand, finding a flawless solution may prove to be challenging. Do you really need to display all parents and children simultaneously? Perhaps implementing pagination to show only 100 nodes at a time could be beneficial. It seems in your case that both parent and children share the same id property value of 0. Is this accurate or do parents and children possess distinct ids? Are you able to modify the format of the json provided by the backend web service?

Bearing some assumptions in mind based on the aforementioned questions, here is my suggested proposal:

Transform your JSON into a structured format similar to the following:

var bigobject = {
    100: {
        "id":100,
        "name":"Parent One",
        "listOfChildren":{
            101: {
                "id":101,
                "name":"Child 1",
                "childType":"CHILD1"
            },
            102: {
                "id":102,
                "name":"Child 2",
                "childType":"CHILD1"
            }
            ... // further children listed here
        }
    },
    103: {
        "id":103,
        "name":"Parent Two",
        "listOfChildren":{
            104: {
                "id":104,
                "name":"Child 3",
                "childType":"CHILD1"
            },
            105: {
                "id":105,
                "name":"Child 4",
                "childType":"CHILD1"
            }
            ... // more children listed here
        }
    },
    ...  // additional parents included
}

The concept involves organizing a single comprehensive json object where each node’s key corresponds to its id. Moreover, transforming a parent’s listOfChildren from an array to an object bearing keys matching the ids of its children.

Incorporating a new child to a parent becomes relatively straightforward. For instance:

var parentId = 103;
var newChild = {"id":110,"name":"Child 2","childType":"CHILD1"};
bigobject[parentId].listOfChildren[newChild.id] = newChild;

To facilitate paginating results, one could utilize the provided limitTo filter along with a customized startFrom filter:

.filter('startFrom', function() {
    return function(input, start) {
        if(!input) return input;
        start = +start;
        return input.slice(start);
    };
});

This would necessitate adjusting your ng-repeat as follows:

<div ng-repeat="(parentId, parent) in bigobject | startFrom:start | limitTo:pageSize">
    <div ng-repeat="(childId, child) in bigobject[parentId].listOfChildren">
        {{parent.name}} - {{child.name}}
    </div>
</div>

I trust this guidance proves helpful in steering you towards a viable direction.

Utilizing AngularJS with an extensive collection of JSON data

Answer №1

Similar questions

ReactJS is throwing an error stating that the component is undefined

Learn the technique of looping through multiple HTML elements and wrapping them in Vue.js easily!

Android's clean white backdrop as the keyboard disappears

Is there a way to stop mUI from displaying the dropdown menu once Chrome automatically fills in a user's address details?

Ways to interpret/decode dynamic JSON structures

Did an ASP.NET Core WebAPI HttpPost contain a JSON property?

Using Jquery to dynamically add or remove a class based on scrolling behavior

Having difficulty getting the sign operator to show up in a text field

Content must be concealed following the third paragraph

When implementing Passport-jwt for fetching user data, req.user may sometimes be undefined

Maximizing JSON performance: Enhancing Drupal backend and optimizing IONIC Frontend

Reactivating a function with jQuery once the page has finished loading

Using Flask to send JSON data to the client and then redirect with make_request

Using a delimiter to assign the values of one array as keys to another array requires intricate logic and deep thought

What is the behavior of a variable when it is assigned an object?

Internet Explorer 11 Ajax problem

Enable or disable dropdown based on selected radio button status

Getting event properties in a React component using the rest operator: A comprehensive guide

When using GSON to convert a JSON string to an object, some unexpected nulls and zeros are being returned

Template for standardized data for testing across multiple languages