Include a fresh attribute to a current JSON within a FOR loop

Question

Include a fresh attribute to a current JSON within a FOR loop

My goal is to populate a bootstrap-carousel using a more detailed JSON file pulled from a database. To illustrate, here is an example of my old JSON structure:

old.json

[
{"screen": [{
    "img" : "../static/images/product/34.jpg",
    "price": "Rs 100",
    "href": "#mobile/1234"
},{

    "img": "../static/images/product/34.jpg",
    "price": "Rs 101",
    "href":"#mobile/1234"
},...

]},
 {"screen": [{
    "img" : "../static/images/product/34.jpg",
    "price": "Rs 100",
    "href": "#mobile/1234"
},{

    "img": "../static/images/product/34.jpg",
    "price": "Rs 101",
    "href":"#mobile/1234"
},...

]}
]

Now, I am aiming to update it with a new.JSON that provides more detailed information.

new.JSON

[
 {
    "sku": "d58a2ece-4387-41d0-bacb-c4b7935f8405",
    "selectedQtyOptions": [],
    ...
},
{
    "sku": "b8ea355d-7acc-455b-a55c-027b0e5c73cd",
    "selectedQtyOptions": [],
    ...
},
...
]

To achieve this, I used an AngularJS controller and a loop to group the data in sets of four under the screen attribute:

mainApp.controller('MultiCarouselController', function($scope, $http) {

$scope.products = [];
$scope.Math = Math;
$http.get("/get_broad_category_products/?BroadCategory=BroadCategory3")
        .success(function (response) {
            $scope.products = response;
            var iteration = Math.ceil($scope.products.length/4);
            var carouselJson = [];
            for(var index = 0; index < iteration; index++){ 
               var temp = [];
               for (var i = (index*4) ; i < (4*(index+1)) ; i++){
                    temp = temp.concat($scope.products[i])  
                }
                var jsTemp = { "screen": [] };              
                carouselJson.push(jsTemp.screen.push(temp));  
            }
            console.log(carouselJson);
     }).error(function(){
            console.log('An error occurred.');
     });

 });

This code successfully groups the data into sets of four under the screen property. Hopefully, this explanation helps clarify the process!

javascript json angularjs

Answer 1

Answer №1

I have limited experience with angular and its handling of JSON is not something I am particularly fond of.

JSON is essentially a serialized object, making it easy to mix and match data as long as precautions are taken.

Consider two JSON files: JSON1 contains a list of products, each with a unique ID. JSON2 contains amendments to JSON1 that include specific names like "extraImages", "newItems", "updates", and "newData". Simply concatenating the files won't work since they are not arrays, and concatenating JSON strings directly does not work either.

To properly join the two objects, one must have prior knowledge of the data structures and understand the semantic meaning of each item in both files.

The two JSON files in string form are:

// JavaScript objects for JSON1 and JSON2
var JSON1 = `{
    // JSON content for items...
}`;
var JSON2 = `{
    // JSON content for extras...
}`

Working with JSON in string form can be challenging due to difficulty in searching and retrieving data. JavaScript provides a built-in object called JSON for handling JSON data.

The JSON object includes methods such as JSON.stringify(Obj) and JSON.parse(String).

JSON.stringify converts basic JS data types into a JSON string.
JSON.parse converts a JSON string back into a JS Object or Array.

First, convert both JSON strings to objects:

// Convert JSON strings to objects
var items = JSON.parse(JSON1);
var extras = JSON.parse(JSON2);

Now that we have two plain JS objects, we can manipulate and combine them as needed.

For example, when dealing with extra images that are represented as an array, one needs to iterate through each item in the array and locate the corresponding product by ID.

// Example code for adding extra images to products
if(extras.extraImages !== undefined){ 
     // Iterate over each extra image item
     extras.extraImages.forEach(function(item){
         var arrayOfImages;
         if(item.images !== undefined && typeof item.images === "array"){
               arrayOfImages = item.images;
         }
         // Logic to find and append images to existing products...
     });
  } 
  // Similar logic required for other features such as updates, new items, etc.

By carefully following the semantics of the data structures and understanding the relationships between different elements, one can successfully merge two JSON objects together. Once the necessary modifications are made, the updated object can be converted back to a JSON string using JSON.stringify.

This approach provides a solid foundation for handling JSON data effectively without relying on Angular's abstraction layer. It may require more effort, but it ensures a deeper understanding of the underlying mechanisms.

Answer 2

I have limited experience with angular and its handling of JSON is not something I am particularly fond of.

JSON is essentially a serialized object, making it easy to mix and match data as long as precautions are taken.

Consider two JSON files: JSON1 contains a list of products, each with a unique ID. JSON2 contains amendments to JSON1 that include specific names like "extraImages", "newItems", "updates", and "newData". Simply concatenating the files won't work since they are not arrays, and concatenating JSON strings directly does not work either.

To properly join the two objects, one must have prior knowledge of the data structures and understand the semantic meaning of each item in both files.

The two JSON files in string form are:

// JavaScript objects for JSON1 and JSON2
var JSON1 = `{
    // JSON content for items...
}`;
var JSON2 = `{
    // JSON content for extras...
}`

Working with JSON in string form can be challenging due to difficulty in searching and retrieving data. JavaScript provides a built-in object called JSON for handling JSON data.

The JSON object includes methods such as JSON.stringify(Obj) and JSON.parse(String).

JSON.stringify converts basic JS data types into a JSON string.
JSON.parse converts a JSON string back into a JS Object or Array.

First, convert both JSON strings to objects:

// Convert JSON strings to objects
var items = JSON.parse(JSON1);
var extras = JSON.parse(JSON2);

Now that we have two plain JS objects, we can manipulate and combine them as needed.

For example, when dealing with extra images that are represented as an array, one needs to iterate through each item in the array and locate the corresponding product by ID.

// Example code for adding extra images to products
if(extras.extraImages !== undefined){ 
     // Iterate over each extra image item
     extras.extraImages.forEach(function(item){
         var arrayOfImages;
         if(item.images !== undefined && typeof item.images === "array"){
               arrayOfImages = item.images;
         }
         // Logic to find and append images to existing products...
     });
  } 
  // Similar logic required for other features such as updates, new items, etc.

By carefully following the semantics of the data structures and understanding the relationships between different elements, one can successfully merge two JSON objects together. Once the necessary modifications are made, the updated object can be converted back to a JSON string using JSON.stringify.

This approach provides a solid foundation for handling JSON data effectively without relying on Angular's abstraction layer. It may require more effort, but it ensures a deeper understanding of the underlying mechanisms.

Answer 3

Answer №2

It seems like you're looking to add a new property to each element within the temp array. One way to achieve this is by creating a new object using your $scope.products[i].

for(var index = 0; index < iteratation; index++){ // Creating a kind of 2D matrix with [0,1],[0,2],[1,1],[1,2]
   var temp = [];
   for (var i = (index*4) ; i < (4*(index+1)) ; i++){
      var destObj = $scope.products[i];
      destObj.screen = 'xx' // Your value assignment goes here.
      temp = temp.concat(destObj)  // Grouping 4 JSON objects together
   }
carouselJson.push(temp);
 }

I hope this explanation is helpful.

Answer 4

It seems like you're looking to add a new property to each element within the temp array. One way to achieve this is by creating a new object using your $scope.products[i].

for(var index = 0; index < iteratation; index++){ // Creating a kind of 2D matrix with [0,1],[0,2],[1,1],[1,2]
   var temp = [];
   for (var i = (index*4) ; i < (4*(index+1)) ; i++){
      var destObj = $scope.products[i];
      destObj.screen = 'xx' // Your value assignment goes here.
      temp = temp.concat(destObj)  // Grouping 4 JSON objects together
   }
carouselJson.push(temp);
 }

I hope this explanation is helpful.

Answer 5

Answer №3

this source really assisted me

JavaScript Array Push with key value pair

my loop now looks like this:

var carouselJson = [];
for(var index = 0; index < iteratation; index++){ // representing a 2D matrix as [0,1],[0,2],[1,1],[1,2]
      var temp = [];
      var screen = ['screen'];
      var obj = {};
      for (var i = (index*4) ; i < (4*(index+1)) ; i++){
          temp = temp.concat($scope.products[i]);  // combining 4 JSON objects as a group
         }
      obj[screen]=temp;
      carouselJson.push(obj);  // adding the group to new JSON array
     }
   $scope.mCarousels = carouselJson;

Answer 6

this source really assisted me

JavaScript Array Push with key value pair

my loop now looks like this:

var carouselJson = [];
for(var index = 0; index < iteratation; index++){ // representing a 2D matrix as [0,1],[0,2],[1,1],[1,2]
      var temp = [];
      var screen = ['screen'];
      var obj = {};
      for (var i = (index*4) ; i < (4*(index+1)) ; i++){
          temp = temp.concat($scope.products[i]);  // combining 4 JSON objects as a group
         }
      obj[screen]=temp;
      carouselJson.push(obj);  // adding the group to new JSON array
     }
   $scope.mCarousels = carouselJson;

Include a fresh attribute to a current JSON within a FOR loop

Answer №1

Answer №2

Answer №3

Similar questions

Tips for optimizing character count for mobile web pages with varying screen sizes and font settings

Make the navigation bar stay at the top of the page when scrolling past another element with a top position of 100vh

Is there a way to substitute one substring with another substring within the values of an array's objects using Javascript?

Selecting Elements with JQuery

Start progress bars on several divs that share a common class

Error encountered in Node/Express application: EJS partials used with Angular, causing Uncaught ReferenceError: angular is not defined

React - error caused by an invalid hook call. Uncaught Error: React encountered a minified error with code #

Add a new variable to the data in a jQuery ajax request for each request with any updates

ReactJS | Display or Conceal an Array of Objects depending on a specified condition

Is there a way to substitute user ID with the username in JSON using Django?

Enhance Canvas when React State Changes

Choosing the entire contents of a webpage using jQuery

Accessing one controller from another module in AngularJS using TypeScript is a common challenge that many developers face. In this article, we

In my app.post request in node.js and express, the body object is nowhere to be found

Understanding Node.JS: A Dive into Key Concepts

What is the best way to invoke a Servlet from within a d3.json() function

Exploring Substrings in jQuery/JavaScript

The angular ui-router logout state fails to redirect to the login page unless the page is refreshed

The error occurred at line 12 in the app.js file, where it is unable to access properties of an undefined object, specifically the 'className' property. This occurred within an anonymous function in an HTMLDivElement

"Implementing a method to return a View along with a JSON response