After importing json data into an arrayList and storing it in local-storage, the structure looks like this:
[
{
"id": 1,
"name": "Albany",
"manufacture": "Albany Superior Low Gi Sliced Brown Seed Bread 700g",
"price": 15.49,
"category": "Food",
"type": "Breads",
"image": "data:image/jpeg;base64,/9j/4AAQSkZJRgA..."
},
{
"id": 2,
"name": "Blue Ribbon",
"manufacture": "Blue Ribbon Brown Plus Low Gi Bread 700g",
"price": 13.99,
"category": "Food",
"type": "Breads",
"image": "data:image/octet-stream;base64,/9j/4AAQSkZJRgABA..."
},
{...},
{...},
...
]
The next step involved creating a class that extracts these values from local storage, filters them based on a specific product type, and modifies the information accordingly. Here's how the class is structured:
export class MilkCreamComponent implements OnInit {
allProducts: Array<Product> = [];
quantity: number = 1;
resultArray:any;
milkProducts =[]
newMilkProducts = [];
constructor( private prod: ProductService, public _DomSanitizer: DomSanitizer) { }
ngOnInit() {
this.allProducts = JSON.parse(localStorage.getItem('product-data') );
var productMilk = this.allProducts.filter(item => item.type === 'Milk');
this.milkProducts = productMilk;
for (var i=0; i < this.milkProducts.length / 4; i++) {
var imageString = this.milkProducts[i].image;
var edittedImageString = imageString.substring(imageString.indexOf(",") + 1 );
var newImageStringFormat = "data:image/jpeg;base64," + edittedImageString;
if ( edittedImageString === this.milkProducts[i].image.substring(this.milkProducts[i].image.indexOf(",") + 1) ){
var index = this.milkProducts.indexOf( this.milkProducts[i] );
if (index !== -1) {
this.milkProducts.indexOf[index] = this.milkProducts[i].id, this.milkProducts[i].name, this.milkProducts[i].manufacture,
this.milkProducts[i].price, this.milkProducts[i].category, this.milkProducts[i].type, newImageStringFormat;
console.log ( this.milkProducts );
}
}
else{
console.log("Images Are Not Equal\nSee milk-cream.component.ts\nSee Image Conversion Codes");
}
}
}
}
interface Product {
id: number;
name: string;
manufacture: string;
price: number;
category: string;
type: string;
image: string;
}
The main objective now is to update specific key values within the array list and then display the modified arrayList through console log.