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

Encountering a 404 error for core.js and browser.js while loading an Angular 2 app through system.src.js

Invoke the ng-click function within the ng-change function

JavaScript Navigation Bar Error: The value of 'undefined' is not recognized as an object

Disabling the submit button on an MC form - step by step guide

Loop through the .getJSON response using jQuery

The conditional statement does not align with my Regular Expression

Reconfigure a portion of a string using Vue's dynamic replacement feature

Tips for retrieving arguments within a method called from a template in vue.js?

Navigating Between Pages with Parameters in Ionic 2 (starter app)

Creating stylish error labels using Materialize CSS

Toggle the display of data in an angular table with a button click

guiding user immediately to blog post upon successful login

How can I utilize a variable in a v-for loop as a label for a q-btn in Vue.js?

How to Make a Div Tag Fade Effect with JavaScript in an External File

There seems to be an issue with the HighCharts chart export feature as it is not showing the Navigator graph

Creating a jsp page content with jquery and retrieving request parameters

What is the best way to separate one dropdown area from another dropdown area?

From Vanilla Javascript to ES6 Spread Operator

Create an Ajax request function to execute a PHP function, for those just starting out

JavaScript: Remove just the specific user input without affecting the rest of the HTML block