Transforming a JSON string into an object within a variable amount of nested JSON structures

Question

Transforming a JSON string into an object within a variable amount of nested JSON structures

I'm encountering an issue with modifying JSON strings within JSON objects for varying numbers of objects. Allow me to elaborate further with my code and explanations.

I have a factory that supplies JSON objects

//Factory for products
app.factory('productsFactory', ['$http', '$location', function($http, $location){
    var factory = {};
    factory.getlatestProductsList = function(n){
        return $http.get($location.protocol() + '://' + $location.host() + '/server/api/products/latest/'+n);
    }
    return factory;
}]);

This factory returns an uncertain number of objects

0: Object
active: "1"
alias: "baumbach-circle"
date_c: "2016-01-06 08:09:54"
date_u: null
description: "Corrupti fugit iste quo sunt quidem voluptatibus dolorem. Eos velit architecto veritatis doloribus. Corporis sequi cupiditate possimus voluptates ut consequatur. Accusantium libero qui est sunt et."
id_category: "46"
id_product: "25"
id_user: "177"
images: "[{"thumbImage":"http:\/\/lorempixel.com\/250\/150\/?63763","image":"http:\/\/lorempixel.com\/1024\/768\/?52630","position":0},{"thumbImage":"http:\/\/lorempixel.com\/250\/150\/?99795","image":"http:\/\/lorempixel.com\/1024\/768\/?84669","position":1},{"thumbImage":"http:\/\/lorempixel.com\/250\/150\/?17506","image":"http:\/\/lorempixel.com\/1024\/768\/?88926","position":2},{"thumbImage":"http:\/\/lorempixel.com\/250\/150\/?73869","image":"http:\/\/lorempixel.com\/1024\/768\/?91917","position":3},{"thumbImage":"http:\/\/lorempixel.com\/250\/150\/?70019","image":"http:\/\/lorempixel.com\/1024\/768\/?18509","position":4}]"
name: "Baumbach Circle"
__proto__: Object
1: Object
active: "1"
alias: "elta-road"
date_c: "2016-01-06 08:09:53"
date_u: null
description: "Culpa perferendis dolores rerum deleniti vero cumque. Similique explicabo beatae est quo sit nisi. Et a voluptatem nihil in. Voluptates modi qui est ducimus corrupti."
id_category: "46"
id_product: "24"
id_user: "73"
images: "[{"thumbImage":"http:\/\/lorempixel.com\/250\/150\/?53746","image":"http:\/\/lorempixel.com\/1024\/768\/?49502","position":0},{"thumbImage":"http:\/\/lorempixel.com\/250\/150\/?75052","image":"http:\/\/lorempixel.com\/1024\/768\/?77727","position":1},{"thumbImage":"http:\/\/lorempixel.com\/250\/150\/?32463","image":"http:\/\/lorempixel.com\/1024\/768\/?76121","position":2},{"thumbImage":"http:\/\/lorempixel.com\/250\/150\/?61377","image":"http:\/\/lorempixel.com\/1024\/768\/?89434","position":3},{"thumbImage":"http:\/\/lorempixel.com\/250\/150\/?86873","image":"http:\/\/lorempixel.com\/1024\/768\/?82513","position":4}]"
name: "Elta Road"
__proto__: Object

The issue arises from the images JSON being formatted as a string, requiring me to utilize JSON.parse (at least I believe so, given my limited experience) to convert them into JSON

My inquiry is: Is there a simple and elegant method to parse all image data into JSON or must I resort to using forEach? If so, how would the code implementation look like? I aim to achieve this functionality within the factory to avoid redundancy in each controller calling upon it.

If you require any additional information, please do not hesitate to ask and I will gladly provide it. Thank you in advance.

javascript angularjs json

Answer 1

Answer №1

You have the ability to modify the response received from the $http service before sending it back.

app.factory('productsFactory', ['$http', '$location', function($http, $location){
    var factory = {};
    factory.getlatestProductsList = function(n){
        var url = $location.protocol() + '://' + $location.host() + '/server/api/products/latest/'+n;
        return $http({
            method: 'GET',
            url: url
        }).then(function successCallback(response) {
            // You can customize the response here by parsing or editing it
            return response ;
        }, function errorCallback(response) {

        });
    }
    return factory;
}]);

Answer 2

You have the ability to modify the response received from the $http service before sending it back.

app.factory('productsFactory', ['$http', '$location', function($http, $location){
    var factory = {};
    factory.getlatestProductsList = function(n){
        var url = $location.protocol() + '://' + $location.host() + '/server/api/products/latest/'+n;
        return $http({
            method: 'GET',
            url: url
        }).then(function successCallback(response) {
            // You can customize the response here by parsing or editing it
            return response ;
        }, function errorCallback(response) {

        });
    }
    return factory;
}]);

Answer 3

Answer №2

If you utilize the fact that $http gives back a promise, you can perform some data processing before returning the promise. Please inform me if this approach suits your needs, or if you require assistance in ES5.

factory.getlatestProductsList = function(n){
    return $http.get($location.protocol() + '://' + $location.host() + '/server/api/products/latest/'+n)
    .then(data => data.map(elem => {
       var tmp = Json.parse(elem.images);
       elem.images = tmp
       return elem;
    }));

In ES5:

factory.getlatestProductsList = function(n){
    return $http.get($location.protocol() + '://' + $location.host() + '/server/api/products/latest/'+n)
    .then(function(data) {
       return data.map(function(elem) {
         var tmp = Json.parse(elem.images);
         elem.images = tmp
         return elem;
       });
    });

Answer 4

If you utilize the fact that $http gives back a promise, you can perform some data processing before returning the promise. Please inform me if this approach suits your needs, or if you require assistance in ES5.

factory.getlatestProductsList = function(n){
    return $http.get($location.protocol() + '://' + $location.host() + '/server/api/products/latest/'+n)
    .then(data => data.map(elem => {
       var tmp = Json.parse(elem.images);
       elem.images = tmp
       return elem;
    }));

In ES5:

factory.getlatestProductsList = function(n){
    return $http.get($location.protocol() + '://' + $location.host() + '/server/api/products/latest/'+n)
    .then(function(data) {
       return data.map(function(elem) {
         var tmp = Json.parse(elem.images);
         elem.images = tmp
         return elem;
       });
    });

Answer 5

Answer №3

Here is a code snippet for creating a factory in AngularJS:

//Factory for products
app.factory('productsFactory', ['$http', '$location', function($http, $location){
    var factory = {};
    factory.getlatestProductsList = function(n){
        var url = $location.protocol() + '://' + $location.host() + '/server/api/products/latest/'+n;
        return $http({
            method: 'GET',
            url: url
        }).then(function successCallback(response) {
            var pros = response.data;
            pros.forEach(function(item){
                var pictures = JSON.parse(item.images);
                delete item.images;
                item.images = pictures;
            })
            return pros;
        },function errorCallback(response) {
            console.log('error fetching latest products: ' + response);
        });
    }
    return factory;
}]);

Answer 6

Here is a code snippet for creating a factory in AngularJS:

//Factory for products
app.factory('productsFactory', ['$http', '$location', function($http, $location){
    var factory = {};
    factory.getlatestProductsList = function(n){
        var url = $location.protocol() + '://' + $location.host() + '/server/api/products/latest/'+n;
        return $http({
            method: 'GET',
            url: url
        }).then(function successCallback(response) {
            var pros = response.data;
            pros.forEach(function(item){
                var pictures = JSON.parse(item.images);
                delete item.images;
                item.images = pictures;
            })
            return pros;
        },function errorCallback(response) {
            console.log('error fetching latest products: ' + response);
        });
    }
    return factory;
}]);

Transforming a JSON string into an object within a variable amount of nested JSON structures

Answer №1

Answer №2

Answer №3

Similar questions

What is the process for decoding HTML content that is wrapped within JSON data?

Using dynamic JavaScript appending with the location.href attribute and the ajax-cross-domain.com script for seamless integration

Creating a Copy of an Object in JavaScript that Automatically Updates When the Original is Changed

Exploring JavaScript Unit Testing: Essential dependencies for testing with Karma, jasmine, and bootstrap

Facing a cross-domain problem that is blocking my ajax request to fetch data from my express endpoint

Creating your own JsonConverter in JSON.NET: A step-by-step guide

Guide on loading a JSON file in Play framework utilizing Scala

In my coding project using Angular and Typescript, I am currently faced with the task of searching for a particular value within

Update and republish an outdated npm package

Determine the frequency of matching elements between an array and a JSON column by comparing the two and counting the number of similar terms

Notification system for managing recurring tasks

Error message: Attempting to access the property '_layerAdd' of an undefined object in the context of vue and leaflet integration

Python does not recognize the Json-like response

As I attempted to set up sb-admin-bs4-angular2-master, an application built with Node.js, I encountered an error message while running the npm install command

Utilizing a static method from a Class imported from a Node.js module

Is it necessary to specify the JavaScript version for Firefox? (UPDATE: How can I enable `let` in FF version 44 and below)

Querying the database to check for the presence of a file in a .js file on Google App Engine

Is there a way to stop TD from going to the next line?

The Javascript navigation bar is not displaying properly on mobile devices as it should

Tips on efficiently writing parsed JSON data within an AsyncTask