Exploring the iteration of JSON objects within an array using AngularJS

My auto search module has the following JSON structure. I need to iterate through an array of JSON objects and use keys and values as required.

I have attempted the code below. However, with the provided JSON object, I am able to retrieve the key but not the value.

For example, for the first JSON object, I need to retrieve 'Product Apple', but I am only getting the link.

I tried response.data[key][0], but I am getting the full JSON object instead. Can you point out where I may have gone wrong?

I have updated the Plunker below:

[{
    "/folder1/folder2/folder3/product-1": "Product Apple"
  },
  {
    "/folder1/folder2/folder3/product-2": "Product samsung"
  },
  {
    "/folder1/folder2/folder3/product-3": "Product lenovo"
  },
  {
    "/folder1/folder2/folder3/product-4": "Product Asus"
  },
  {
    "/folder1/folder2/folder3/product-5": "Product Acer"
  },
  {
    "/folder1/folder2/folder3/product-6": "Product Vivo"
  },
  {
    "/folder1/folder2/folder3/product-7": "Product Oppo"
  }
]

Check out the code here

javascriptarraysangularjsjson

Answer №1

After realizing that this post was marked as a duplicate, I carefully reviewed the provided solution and discovered that it only addressed the issue using JavaScript. My goal, however, is to find a way to iterate through AngularJS 'ng-repeat'.

Below, you can find the Plunker link where I have shared the solution I came up with:

[insert code here][1]

Click here to view the code

Answer №2

If you're looking to store that structure in a variable and iterate over it using *ngFor, then the following approach can be taken:

// Component file
let items = [ 
   {  
      "/folder1/folder2/folder3/product-1":"Product Apple"
   },
   {  
      "/folder1/folder2/folder3/product-2":"Product samsung"
   },
   {  
      "/folder1/folder2/folder3/product-3":"Product lenovo"
   },
   {  
      "/folder1/folder2/folder3/product-4":"Product Asus"
   },
   {  
      "/folder1/folder2/folder3/product-5":"Product Acer"
   },
   {  
      "/folder1/folder2/folder3/product-6":"Product Vivo"
   },
   {  
      "/folder1/folder2/folder3/product-7":"Product Oppo"
   }
]

// View template
<ng-container *ngFor="let item of items">
  // Display logic here
</ng-container>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Secure Access with Skype Bot Verification

Recently, I managed to set up a NodeJS bot to synchronize messages between Discord and Skype chats. Although I am relatively new to Javascript and completely unfamiliar with NodeJS, the existence of a framework called Spype has been quite beneficial. The i ...

javascriptnode.jsskype-botsmicrosoft-skype-bot

How to set up a multi-select box for tagging purposes

I tried to implement a multi select box to create tags using the code below. I downloaded select2.min.css and select2.min.js from https://github.com/select2/select2, then copied them into the project's css and js folders. Here is the HTML code snippe ...

javascripthtmlcsstwitter-bootstrap

When node.js v6.11.2 is installed on Windows 7, it does not include the correct npm version

When trying to install node.js v6.11.2 on my Windows 7 computer, I am encountering an issue where it is installing the incorrect version of npm alongside it. Even after downloading the installer directly from node.js' website which claims that 6.11.2 ...

javascriptnode.jsnpmfailed-installation

Effects of jQuery Show / Hide on adjacent select box operations

I created a pair of select boxes where the visibility of one is controlled by the other. Initially, the controlled select box (#select02) works perfectly on page load as long as I don't show/hide it by selecting options in the controlling select box ( ...

javascriptjqueryhtml

Issue: Connection Problem in React, Express, Axios

I've encountered an issue while attempting to host a website on an AWS EC2 instance using React, Express, and Axios. The specific problem I'm facing is the inability to make axios calls to the Express back-end that is running on the same instanc ...

javascriptnode.jsreactjsexpressaxios

An illustration of webpack 4 and Vue.js compatibility tailored specifically for Internet Explorer 11, featuring multiple entry points

This feels like déjà vu - yet another issue with Internet Explorer and webpack. I'm on the brink of deploying my project when IE 11 decides to mess everything up. I thought I had covered all bases with babel-polyfill and the latest versions, but of ...

javascriptinternet-explorerwebpackvue.js

Using an object does not result in updated data, while data changes are typically observed when using a variable

In the process of developing a function to update a custom checkbox upon clicking (without resorting to using the native checkbox for specific reasons). Here's the code snippet for the checkbox: <div class="tick-box" :class="{ tick: isTicked }" @ ...

javascriptvue.jsvuejs2vue-component

When the user scrolls to the right side of the page, fresh content will be loaded

While there are many plugins available that enable content to be loaded when the user reaches the bottom of the page, I have been unable to find a jQuery plugin that allows content to be loaded when the user reaches the right side of the document. Does an ...

javascriptjqueryajaxscroll

The issue with getting a token from Next-auth on the server side persists

Currently, I am working on an application using Next.js and implementing authentication with NextAuth. However, I am encountering an issue with the getToken function not working properly on the server-side. I have double-checked my callbacks configuration ...

javascriptnext.jsjwtaclnext-auth

Creating dynamic routes in React by pulling data from a JSON file

Creating multiple routes based on JSON data file is the goal: routes.jsx import React from 'react'; import { Route, Router, IndexRoute } from 'react-router'; import ReactDOM from 'react-dom'; import App from './index.j ...

javascriptreactjs

Implementing useState to toggle the checked value of a checkbox in React

When passing a list of checkbox fields with attributes to my component, I want to update the checked attribute based on user selection. However, all I have managed to do so far is double the check value in an array. How can I modify this specific key with ...

javascriptreactjs

Implementing a for loop within a scrolling function

How do I multiply functions inside the scroll loop? This is what I currently have: $(window).scroll(function() { b1Center = $("#block-1").offset().top - ($(window).height() - divHeight) / 2; b1Bottom = $("#block-1").offset().top - $(window).height(); b1T ...

javascriptjquery

Tips for Iterating through Nested Arrays using the Inside Array in a Dynamic Way

I am facing an issue with my code as it lacks flexibility when a new array is added to the nested array, in which case the new array is not considered. My main concern is how to access the elements of each nested array simultaneously. Here's an examp ...

javascriptmultidimensional-arrayjavascript-objectsnested-loops

ReactJS is encountering a situation where two children are using the same key and causing

When I try to view the profile information of another user, I encounter a duplicate key error that says: "Warning: Encountered two children with the same key, ``. Keys should be unique so that components maintain their identity across updates. Non-unique k ...

javascriptnode.jsreactjsexpressunique-key

What is the best way to retrieve a list of customers within a specified date range?

How can I retrieve a list of customers within a specified date range? My frontend react app includes starting and ending date pickers, but I'm unsure how to query the data using mongoose in my express app. Below you'll find my mongoose model and ...

javascriptnode.jsmongodbexpressmongoose

Struggling to implement JQuery code in a Next.js application

I'm having trouble getting my tracking code to work in Next.js. <Script> window.dataLayer = window.dataLayer || []; function gtag(){ dataLayer.push(arguments) } gtag('js', new Date()) ...

javascriptreactjsnext.js

The jQuery framework is causing AJAX/API data to be duplicated in the

I've been encountering a common issue for which I can't seem to find a straightforward solution. My current challenge involves using an API to fetch JSON data through an AJAX call. Upon receiving the data, it appears twice in both the console an ...

javascriptjqueryhtmljsonajax

Does Node.js offer a solution or module for converting Google Map polylines into a PNG image without the need for rendering HTML?

I'm attempting to generate a PNG image of polylines on a Google Map using Node.js on the backend without utilizing any view engine. I attempted to use the "webshot" Node.js package, but it was unable to save the polylines on the Google Map. app.get( ...

javascriptjquerynode.jsexpress

Creating dynamic animations by shifting the hue of an image on a canvas

Recently, I've been exploring the world of canvas tags and experimenting with drawing images on them. My current project involves creating a fake night/day animation that repeats continuously. After trying various approaches like SVG and CSS3 filters ...

javascripthtmlcanvascolorshue

What is the best way to ensure a textarea remains expanded when the parent element is in focus?

I have successfully implemented a textarea box that expands upon click and retracts when it loses focus. However, I am facing an issue where if the textbox is already in expanded form, I want it to stay expanded if the user clicks anywhere within the cont ...

javascripthtmlcss