I am trying to read data from json file into angular.js but i am not getting data.
[
{
"code": "AD",
"name": "Andorra",
"population": "84000"
},
{
"code": "TN",
"name": "Tunisia",
"population": "10589025"
},
{
"code": "TW",
"name": "Taiwan",
"population": "22894384"
},
{
"code": "TZ",
"name": "Tanzania",
"population": "41892895"
},
{
"code": "UA",
"name": "Ukraine",
"population": "45415596"
},
{
"code": "UG",
"name": "Uganda",
"population": "33398682"
},
{
"code": "UM",
"name": "U.S. Minor Outlying Islands",
"population": "0"
},
{
"code": "US",
"name": "United States",
"population": "310232863"
},
{
"code": "UY",
"name": "Uruguay",
"population": "3477000"
},
{
"code": "UZ",
"name": "Uzbekistan",
"population": "27865738"
},
{
"code": "VA",
"name": "Vatican City",
"population": "921"
},
{
"code": "VC",
"name": "Saint Vincent and the Grenadines",
"population": "104217"
},
{
"code": "VE",
"name": "Venezuela",
"population": "27223228"
},
{
"code": "VG",
"name": "British Virgin Islands",
"population": "21730"
},
{
"code": "VI",
"name": "U.S. Virgin Islands",
"population": "108708"
},
{
"code": "VN",
"name": "Vietnam",
"population": "89571130"
},
{
"code": "VU",
"name": "Vanuatu",
"population": "221552"
},
{
"code": "WF",
"name": "Wallis and Futuna",
"population": "16025"
},
{
"code": "WS",
"name": "Samoa",
"population": "192001"
},
{
"code": "ZW",
"name": "Zimbabwe",
"population": "11651858"
}
]
index.html
<html ng-app="countryApp">
<head>
<meta charset="utf-8">
<title>Angular.js JSON Fetching Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
var countryApp = angular.module('countryApp', []);
countryApp.controller('CountryCtrl', function ($scope, $http){
$http.get('countries.json').success(function(data) {
$scope.countries = data;
});
});
</script>
</head>
<body ng-controller="CountryCtrl">
<h2>Angular.js JSON Fetching Example</h2>
<table>
<tr>
<th>Code</th>
<th>Country</th>
<th>Population</th>
</tr>
<tr ng-repeat="country in countries">
<td>{{country.code}}</td>
<td>{{country.name}}</td>
<td>{{country.population}}</td>
</tr>
</table>
</body>
</html>
when you make an $http.get call, the callback function returns the response object. This means that you need to access the data property of the response, not just assign the response:
$http.get('countries.json').success(function(response) {
$scope.countries = response.data;
});
take a look at the docs for $http.get, specifically the example ($http docs)
Please check the path of the json file because the code it's fine.
If you are executing the code from your local machine you need a server to run the code like nodejs.
Related
This is my events.json file
events.json
{
"data":
[
{
"slug": 11305,
"slugforurl": "11305-cretech-london",
"summary": "Cretech London ",
"start": {
"minutetimezone": "00"
},
"end": {
"minutetimezone": "00"
},
"areas": [
{
"slug": 27,
"title": "London"
}
],
"country": { "title": "United Kingdom" }
},
{
"slug": 11439,
"slugforurl": "11439-pydata-global-2021-global-online-conference",
"summary": "PyData Global 2021 (GLOBAL ONLINE CONFERENCE)",
"start": {
"minutetimezone": "30"
},
"end": {
"minutetimezone": "30"
},
"areas": [
{
"slug": 62,
"title": "Edinburgh"
}
],
"country": { "title": "United Kingdom" }
},
{
"slug": 11450,
"slugforurl": "11450-stormid-coderdojo-thursday-october-28th",
"summary": "StormID CoderDojo - Thursday October 28th",
"start": {
"minutetimezone": "30"
},
"end": {
"minutetimezone": "00"
},
"venue": {
"slug": 735,
"title": "Storm ID",
"description": "Storm ID Offices",
"address": "43 Constitution Street",
"addresscode": "EH6 7BS",
"lat": "55.9759",
"lng": "-3.1665"
},
"areas": [
{
"slug": 62,
"title": "Edinburgh"
}
],
"country": { "title": "United Kingdom" }
},
{
"slug": 11479,
"slugforurl": "11479-geek-brekky",
"summary": "Geek Brekky",
"start": {
"minutetimezone": "00"
},
"end": {
"minutetimezone": "30"
},
"venue": {
"slug": 380,
"title": "Tamper Sellers Wheel",
"description": "",
"address": "Arundel Street",
"addresscode": "S1 2N",
"lat": null,
"lng": null
},
"areas": [
{
"slug": 40,
"title": "Sheffield"
}
],
"country": { "title": "United Kingdom" }
}```
This is weatherEvents.js file
**WeatherEvents.js**
```import React, { Component } from 'react'
import events from './events.json'
export class WeatherEvents extends Component {
render() {
return (
<div>
<h3>Events with Weather Forecast</h3>
<table>
<thead>
<tr>
<th>#</th>
<th>Name of the Event</th>
<th>City</th>
<th>Weather</th>
</tr>
</thead>
<tbody>
{events.data.map((eve) =>
<tr>
<td>{eve.slug}</td>
<td>{eve.summary}</td>
<td>{eve.areas.map((city,index) =>
<p key={ index}>{ city.title}</p>
)}
</td>
</tr>
)
}
</tbody>
</table>
</div>
)
}
}
Hi,
In the event.json file it shows my json values and in the WeatherEvents.js file it shows the react code. I want to access the title in areas in the events.json file. even I used map() it gives an error. Initially I used map() function to get the inner data and again used map() function to access 'title' inside the areas, for normal nested can used event.country.title it is working properly, but for the areas as it is an array can't access the data. Even though I used map() function it gives tghe following error. Can anyone give me a solution for this.
TypeError: Cannot read properties of undefined (reading 'map')
Thanks
Make sure your JSON data is valid.
You can check the here example with data rendering.
const events = {
"data":
[
{
"slug": 11305,
"slugforurl": "11305-cretech-london",
"summary": "Cretech London ",
"start": {
"minutetimezone": "00"
},
"end": {
"minutetimezone": "00"
},
"areas": [
{
"slug": 27,
"title": "London"
}
],
"country": { "title": "United Kingdom" }
},
{
"slug": 11439,
"slugforurl": "11439-pydata-global-2021-global-online-conference",
"summary": "PyData Global 2021 (GLOBAL ONLINE CONFERENCE)",
"start": {
"minutetimezone": "30"
},
"end": {
"minutetimezone": "30"
},
"areas": [
{
"slug": 62,
"title": "Edinburgh"
}
],
"country": { "title": "United Kingdom" }
},
{
"slug": 11450,
"slugforurl": "11450-stormid-coderdojo-thursday-october-28th",
"summary": "StormID CoderDojo - Thursday October 28th",
"start": {
"minutetimezone": "30"
},
"end": {
"minutetimezone": "00"
},
"venue": {
"slug": 735,
"title": "Storm ID",
"description": "Storm ID Offices",
"address": "43 Constitution Street",
"addresscode": "EH6 7BS",
"lat": "55.9759",
"lng": "-3.1665"
},
"areas": [
{
"slug": 62,
"title": "Edinburgh"
}
],
"country": { "title": "United Kingdom" }
},
{
"slug": 11479,
"slugforurl": "11479-geek-brekky",
"summary": "Geek Brekky",
"start": {
"minutetimezone": "00"
},
"end": {
"minutetimezone": "30"
},
"venue": {
"slug": 380,
"title": "Tamper Sellers Wheel",
"description": "",
"address": "Arundel Street",
"addresscode": "S1 2N",
"lat": null,
"lng": null
},
"areas": [
{
"slug": 40,
"title": "Sheffield"
}
],
"country": { "title": "United Kingdom" }
}
]
}
class WeatherEvents extends React.Component {
render() {
return (
<div>
<h3>Events with Weather Forecast</h3>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>Name of the Event</th>
<th>City</th>
</tr>
</thead>
<tbody border="1">
{events.data.map((eve) =>
<tr>
<td>{eve.slug}</td>
<td>{eve.summary}</td>
<td>{eve.areas.map((city,index) =>
<p key={ index}>{ city.title}</p>
)}
</td>
</tr>
)
}
</tbody>
</table>
</div>
)
}
}
ReactDOM.render(
<WeatherEvents />,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
I have a use-case to create a JSON structure in React in order to POST an API request. The JSON structure body contains objects and arrays.
Please let me know how to create it in ReactJS.
Below is the sample JSON structure that needs to be created using ReactJS:-
{
"transactionAmount": {
"currency": "INR",
"value": 1220.38
},
"transactionDate": "2020-05-18T00:00:00Z",
"tripData": {
"agencyBooked": false,
"legs": [
{
"endLocation": {
"countryCode": "IN",
"city": "Delhi",
"name": "Indira Gandhi International"
},
"startDate": "2020-05-22",
"startTime": "08:00",
"returnLeg": false,
"startLocation": {
"countryCode": "US",
"city": "San Francisco",
"name": "San Francisco International"
},
"endTime": "21:00",
"endDate": "2020-05-22",
"startLocationDetail": "none"
},
{
"endLocation": {
"countryCode": "US",
"city": "San Francisco",
"name": "San Francisco International"
},
"returnLeg": true,
"startDate": "2020-05-24",
"startLocation": {
"countryCode": "IN",
"city": "Delhi",
"name": "Indira Gandhi International"
},
"startTime": "17:00"
}
],
"segmentType": {
"category": "REQ_SEG_AIRFR",
"code": "AIRFR"
},
"selfBooked": false,
"tripType": "ROUND_TRIP"
}
}
You can simply make a JSON format like this.
const dummyObject = {
name: 'Dummy',
age: 22,
about: {
hobbies: ['soccer']
},
works: true
}
I am trying to get the latitude and longitude of the cities according to id...for example if i will click on kanpur it will show its latitude which is returning from API.But what i did is returning latitude of only last city which is returning from API.
my app.js code is:
.controller('AppCtrl', function($scope,
$http,$ionicModal,$cordovaGeolocation, $ionicLoading, $ionicPlatform) {
$scope.currentItem = 1;
$scope.latitude;
$scope.longitude;
$scope.ers = {
'agency_device_id' : ''
};
$scope.submit = function(){
var link = 'http://trendytoday.in/ers/api/DeviceAlarms';
$http.post(link, {ers: $scope.ers},{headers: {'Content-Type': 'application/json'} }).then(function (res){
// $scope.mssg = res.data.ers.resMessage;
// $scope.resp = res.data.ers.response;
$scope.arr = [];
angular.forEach(res.data.ers.data.alarms, function(value) {
$scope.arr.push(value);
//console.log(value.city)
latitude=value.lattitude;
longitude=value.longitude;
})
});
}
$scope.getdetails = function(){
window.alert(latitude);
};
});
and API response is:
{
"ers": {
"resMessage": "1",
"response": "Success",
"data": {
"alarms": [
{
"id": "1",
"alarm_id": "2",
"title": "Fire",
"description": "fire",
"type": "Fire",
"priority": "High",
"address": "Kanpur, Uttar Pradesh, India",
"city": "Kanpur",
"state": "UP",
"country": "India",
"zipcode": "123456",
"lattitude": "26.449923",
"longitude": "80.3318736"
},
{
"id": "3",
"alarm_id": "4",
"title": "test-02",
"description": "test-02",
"type": "Medical",
"priority": "High",
"address": "Borivali West, Mumbai, Maharashtra, India",
"city": "Mumbai",
"state": "MH",
"country": "India",
"zipcode": "123456",
"lattitude": "19.2461644",
"longitude": "72.85090560000003"
}
]
}
}
}
Assuming your $scope.currentItem is the id of the selected city such as kanpur, then when the API returns the data, check for this value to match the id and set the $scope variables.
I hope you get the idea.
function MyCtrl($scope) {
$scope.currentItem = 1;
$scope.latitude;
$scope.longitude;
$scope.submit = function() {
$scope.res = {
data: {
"ers": {
"resMessage": "1",
"response": "Success",
"data": {
"alarms": [{
"id": "1",
"alarm_id": "2",
"title": "Fire",
"description": "fire",
"type": "Fire",
"priority": "High",
"address": "Kanpur, Uttar Pradesh, India",
"city": "Kanpur",
"state": "UP",
"country": "India",
"zipcode": "123456",
"lattitude": "26.449923",
"longitude": "80.3318736"
},
{
"id": "3",
"alarm_id": "4",
"title": "test-02",
"description": "test-02",
"type": "Medical",
"priority": "High",
"address": "Borivali West, Mumbai, Maharashtra, India",
"city": "Mumbai",
"state": "MH",
"country": "India",
"zipcode": "123456",
"lattitude": "19.2461644",
"longitude": "72.85090560000003"
}
]
}
}
}
}
$scope.arr = [];
angular.forEach($scope.res.data.ers.data.alarms, function(value) {
$scope.arr.push(value);
if ($scope.currentItem == value.id) {
$scope.latitude = value.lattitude;
$scope.longitude = value.longitude;
}
});
}
$scope.submit();
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app ng-controller="MyCtrl">
Long: {{longitude}}
Lati: {{latitude}}
</body>
the only thing i changed is i passed obj as a parameter to getdetails function.
$scope.getdetails = function(obj){
alert(obj.lattitude);
}
and in html:
<div ng-repeat="obj in arr " ng-click="getdetails(obj)">
<p><b>{{obj.city}}</b></p>
</div>
I'm trying to loop through a multi-dimensional array to get properties of products that are part of line items. They look basically like this: (I did a json_encode so it would be easier to read)
[{
"rcpt": "email#email.com",
"vars": [{
"name": "SYSTEM",
"content": "Bikes"
}, {
"name": "CUSTOMERSERVICE",
"content": "(855-553-4889)"
}, {
"name": "IMAGE",
"content": "http:\/\/www.url.com\/assets\/images\/chicago\/email\/dear_member.jpg"
}, {
"name": "LINKCOLOR",
"content": "#3db7e4"
}, {
"name": "FACEBOOK",
"content": "Bikes"
}, {
"name": "TWITTER",
"content": "Bikes"
}, {
"name": "INSTAGRAM",
"content": "Bikes"
}, {
"name": "CLOSING",
"content": "Greetings"
}, {
"name": "item",
"content": [{
"lineItem": 1,
"id": "3",
"name": "24-Hour Pass Gift Certificate",
"quantity": 2,
"nameShort": "24-Hour",
"type": "Gift Certificate",
"image": "24hour_blank.jpg",
"price": "9.95",
"total": "19.90",
"taxable": false,
"giftCertificates": {
"3204": {
"id": "3204",
"redemptionNumber": "xxxxx",
"type": "24-Hour"
},
"3205": {
"id": "3205",
"redemptionNumber": "xxxxx",
"type": "24-Hour"
}
}
}, {
"lineItem": 2,
"id": "1",
"name": "Annual Membership Gift Certificate",
"quantity": 2,
"nameShort": "Annual",
"type": "Gift Certificate",
"image": "annual_blank.jpg",
"price": "75.00",
"total": "150.00",
"taxable": false,
"giftCertificates": {
"892": {
"id": "892",
"redemptionNumber": "xxxxxx",
"type": "Annual"
},
"893": {
"id": "893",
"redemptionNumber": "xxxxx",
"type": "Annual"
}
}
}]
}, {
"name": "orderID",
"content": 1220
}, {
"name": "giftMessage",
"content": false
}, {
"name": "email",
"content": "email#email.com"
}, {
"name": "transactionDate",
"content": "12\/23\/2015"
}, {
"name": "transactionTime",
"content": "12:21 pm"
}, {
"name": "salesTaxTotal",
"content": 0
}, {
"name": "salesTaxRatePercent",
"content": "6.250"
}, {
"name": "TransactionAmount",
"content": "169.90"
}, {
"name": "account_number",
"content": "XXXX1111"
}, {
"name": "card_type",
"content": "Visa"
}, {
"name": "firstName",
"content": "tetete"
}, {
"name": "lastName",
"content": "tethuhhu"
}, {
"name": "address",
"content": "295 Place St"
}, {
"name": "city",
"content": "Brooklyn"
}, {
"name": "state",
"content": "NY"
}, {
"name": "zip",
"content": "11238"
}, {
"name": "country",
"content": "US"
}, {
"name": "phone",
"content": "8888888888"
}, {
"name": "transactionId",
"content": "xxxxxx"
}, {
"name": "shipToFirstName",
"content": "tetete"
}, {
"name": "shipToLastName",
"content": "tethuhhu"
}, {
"name": "shipToAaddress",
"content": "295 Place St"
}, {
"name": "shipToCity",
"content": "Brooklyn"
}, {
"name": "shipToState",
"content": "NY"
}, {
"name": "shipToZipCode",
"content": "11238"
}, {
"name": "ShipToCountry",
"content": "US"
}, {
"name": "ShipToCountry",
"content": "US"
}]
}]
So I am trying to get a print out of each gift certificate's type and redemption number. When I iterate through {{ giftCertificates }} like this:
{{#each giftCertificates}}
{{type}} {{redemptionNumber}}
{{/each}}
I get one of the line items but not the other. I'm guessing maybe it is being overwritten when it loops through again? But I have also tried to loop through {{ item }} and grab {{ giftCertificates.type }} and {{ giftCertificates.redemptionNumber }} and that does not work either. What is the correct way to get all of these from each line item?
Thanks for your help.
I know this is a very old question, but:
you can use {{this.proprietyName}} to get the type and number:
{{#each giftCertificates}}
{{this.892.type}}
{{/each}}
do not forget to add this to the mandrill message o
"merge": true,
"merge_language": "handlebars",
Also, the data structure is not ideal:
giftCertificates[
{
"id": "892",
"redemptionNumber": "xxxxxx",
"type": "Annual"
},
{
"id": "893",
"redemptionNumber": "xxxxxx",
"type": "Annual"
}
]
would be easier to handle.
So I made a webshop with firebase, and I want each product to have its own review section, and to keep it optimized I have to keep my data as flat as possible.
Consider this database structure
Lets say, after I repeat my 7 products. I want to repeat all their corresponding reviews in them, I'm new to angular & really can't figure it out.
Check out this jsfiddle which is an example of my data & lays down what I want to achieve.
// the main (app) module
var myApp = angular.module("myApp", []);
// add a controller
myApp.controller("showProducts", function($scope) {
//Products
$scope.products = [{
"brand": "Apple",
"id": 0,
"img": "img/macbook.png",
"model": 2015,
"name": "Macbook 13'",
"operatingSystem": "OS X",
"price": "1900"
}, {
"brand": "Google",
"id": 1,
"img": "img/chromebook.png",
"model": "Pixel 2",
"name": "Chromebook",
"operatingSystem": "Chrome OS",
"price": "1700"
}, {
"brand": "Dell",
"id": 2,
"img": "img/dellxps13.png",
"model": "XPS13",
"name": "Dell XP13",
"operatingSystem": "Win 10",
"price": "1500"
}, {
"brand": "Lenovo",
"id": 3,
"img": "img/lenovo.png",
"model": "A2",
"name": "Lenovo A2",
"operatingSystem": "Win 7",
"price": "999"
}, {
"brand": "Sony",
"id": 4,
"img": "img/vaio.png",
"model": "VAIO",
"name": "Sony vaio",
"operatingSystem": "Win 8.0",
"price": "1200"
}, {
"brand": "Acer",
"id": 5,
"img": "img/acer.png",
"model": "a7",
"name": "Acer A7",
"operatingSystem": "Win 8.1",
"price": "1199"
}, {
"brand": "AW",
"id": 6,
"img": "http://gearnuke.com/wp-content/uploads/2015/07/alienware-1-1.jpg",
"model": "5A",
"name": "Alienware",
"operatingSystem": "Windows 10",
"price": "5000"
}];
//Reviews
$scope.reviews = [{
"-K1bfGsnWOclf1R85Uec": {
"comment": "This laptop is great",
"rating": "5",
"user": "Maryam"
}
}, {
"-K1bg0wHIUQ9qbxspLmg": {
"comment": "This laptop is working good so far!",
"rating": "4",
"user": "spongbob"
},
"-K1bzqAQpr1br6h04bSH": {
"comment": "some comment",
"rating": "10",
"user": "test"
}
}, {
"-K1bfvS9MYGE82nTx67r": {
"comment": "This laptop is meh",
"rating": "3",
"user": "superman"
}
}, {
"-K1bgSTfbjQ-LRDScH-3": {
"comment": "daym son",
"rating": "10",
"user": "Omar"
}
}, {
"-K1bgljvaeY94E_aPQvY": {
"comment": "commenthere",
"rating": "10",
"user": "pewdiepie"
}
}, {
"-K1bgmXWai9PDake2Wh1": {
"comment": "commenthere",
"rating": "10",
"user": "tiesto"
}
}, {
"-K1bgnMlsp_Dl5ooBl2G": {
"comment": "commenthere",
"rating": "10",
"user": "ex-gf"
},
"-K1gxHCtPdEniOGNFcWi": {
"comment": "idk",
"rating": 3,
"user": "idk"
}
}];
});
.card {
margin: 1% 1% 1% 1%;
padding: 1% 1% 1% 1%;
width: 250px;
height: 150px;
overflow-y: auto;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="showProducts">
<div class="card" ng-repeat="product in products">
<h5>{{ product.name }}</h5>
</div>
<div ng-repeat="review in reviews">
<div ng-repeat="(key, data) in review">User:{{ data.user }} | Comment:{{ data.comment }} | Rating:{{ data.rating }}</div>
</div>
</body>
At the bottom of my results, you will see all the comments. I have tried many things to get them in the right places without much success.
You can use $index to grab the correct list of reviews per product. You'll only need two ng-repeat.
// the main (app) module
var myApp = angular.module("myApp", []);
// add a controller
myApp.controller("showProducts", function($scope) {
//Products
$scope.products = [{
"brand": "Apple",
"id": 0,
"img": "img/macbook.png",
"model": 2015,
"name": "Macbook 13'",
"operatingSystem": "OS X",
"price": "1900"
}, {
"brand": "Google",
"id": 1,
"img": "img/chromebook.png",
"model": "Pixel 2",
"name": "Chromebook",
"operatingSystem": "Chrome OS",
"price": "1700"
}, {
"brand": "Dell",
"id": 2,
"img": "img/dellxps13.png",
"model": "XPS13",
"name": "Dell XP13",
"operatingSystem": "Win 10",
"price": "1500"
}, {
"brand": "Lenovo",
"id": 3,
"img": "img/lenovo.png",
"model": "A2",
"name": "Lenovo A2",
"operatingSystem": "Win 7",
"price": "999"
}, {
"brand": "Sony",
"id": 4,
"img": "img/vaio.png",
"model": "VAIO",
"name": "Sony vaio",
"operatingSystem": "Win 8.0",
"price": "1200"
}, {
"brand": "Acer",
"id": 5,
"img": "img/acer.png",
"model": "a7",
"name": "Acer A7",
"operatingSystem": "Win 8.1",
"price": "1199"
}, {
"brand": "AW",
"id": 6,
"img": "http://gearnuke.com/wp-content/uploads/2015/07/alienware-1-1.jpg",
"model": "5A",
"name": "Alienware",
"operatingSystem": "Windows 10",
"price": "5000"
}];
//Reviews
$scope.reviews = [{
"-K1bfGsnWOclf1R85Uec": {
"comment": "This laptop is great",
"rating": "5",
"user": "Maryam"
}
}, {
"-K1bg0wHIUQ9qbxspLmg": {
"comment": "This laptop is working good so far!",
"rating": "4",
"user": "spongbob"
},
"-K1bzqAQpr1br6h04bSH": {
"comment": "some comment",
"rating": "10",
"user": "test"
}
}, {
"-K1bfvS9MYGE82nTx67r": {
"comment": "This laptop is meh",
"rating": "3",
"user": "superman"
}
}, {
"-K1bgSTfbjQ-LRDScH-3": {
"comment": "daym son",
"rating": "10",
"user": "Omar"
}
}, {
"-K1bgljvaeY94E_aPQvY": {
"comment": "commenthere",
"rating": "10",
"user": "pewdiepie"
}
}, {
"-K1bgmXWai9PDake2Wh1": {
"comment": "commenthere",
"rating": "10",
"user": "tiesto"
}
}, {
"-K1bgnMlsp_Dl5ooBl2G": {
"comment": "commenthere",
"rating": "10",
"user": "ex-gf"
},
"-K1gxHCtPdEniOGNFcWi": {
"comment": "idk",
"rating": 3,
"user": "idk"
}
}];
});
.card {
margin: 1% 1% 1% 1%;
padding: 1% 1% 1% 1%;
width: 250px;
height: 150px;
overflow-y: auto;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="showProducts">
<div class="card" ng-repeat="product in products">
<h5>{{ product.name }}</h5>
<div ng-repeat="(key, data) in reviews[$index]">User:{{ data.user }} | Comment:{{ data.comment }} | Rating:{{ data.rating }}</div>
</div>
</body>
I want to repeat all their corresponding reviews
There must be a relationship between your products and their reviews. So try to add product id to the reviews for mapping.
Once you have a mapping between product and their respective reviews you can for something like below with filter to achieve your functionality.
<div ng-repeat="product in products">
<div class="card"><h5>{{ product.name }}</h5></div>
<div ng-repeat="review in reviews | filter:{productId: product.id}"">
<div ng-repeat="(key, data) in review">User:{{ data.user }} | Comment:{{ data.comment }} | Rating:{{ data.rating }}</div>
</div>
</div>