Related
i'm a new in React. I downloaded the api request and need length array comments and other properties, but React all time msg to me: Cannot read properties of undefined (reading 'length') or Cannot read properties of undefined (reading 'map').
Where is a problem ?
My array from api is:
const myArrayApi = [
{
"id": 1,
"title": "Add tags for solutions",
"category": "enhancement",
"upvotes": 112,
"status": "suggestion",
"description": "Easier to search for solutions based on a specific stack.",
"comments": [
{
"id": 1,
"content": "Awesome idea! Trying to find framework-specific projects within the hubs can be tedious",
"user": {
"image": "./assets/user-images/image-suzanne.jpg",
"name": "Suzanne Chang",
"username": "upbeat1811"
}
},
{
"id": 2,
"content": "Please use fun, color-coded labels to easily identify them at a glance",
"user": {
"image": "./assets/user-images/image-thomas.jpg",
"name": "Thomas Hood",
"username": "brawnybrave"
}
}
]
},
{
"id": 2,
"title": "Add a dark theme option",
"category": "feature",
"upvotes": 99,
"status": "suggestion",
"description": "It would help people with light sensitivities and who prefer dark mode.",
"comments": [
{
"id": 3,
"content": "Also, please allow styles to be applied based on system preferences. I would love to be able to browse Frontend Mentor in the evening after my device’s dark mode turns on without the bright background it currently has.",
"user": {
"image": "./assets/user-images/image-elijah.jpg",
"name": "Elijah Moss",
"username": "hexagon.bestagon"
}
},
{
"id": 4,
"content": "Second this! I do a lot of late night coding and reading. Adding a dark theme can be great for preventing eye strain and the headaches that result. It’s also quite a trend with modern apps and apparently saves battery life.",
"user": {
"image": "./assets/user-images/image-james.jpg",
"name": "James Skinner",
"username": "hummingbird1"
},
"replies": [
{
"content": "While waiting for dark mode, there are browser extensions that will also do the job. Search for 'dark theme' followed by your browser. There might be a need to turn off the extension for sites with naturally black backgrounds though.",
"replyingTo": "hummingbird1",
"user": {
"image": "./assets/user-images/image-anne.jpg",
"name": "Anne Valentine",
"username": "annev1990"
}
},
{
"content": "Good point! Using any kind of style extension is great and can be highly customizable, like the ability to change contrast and brightness. I'd prefer not to use one of such extensions, however, for security and privacy reasons.",
"replyingTo": "annev1990",
"user": {
"image": "./assets/user-images/image-ryan.jpg",
"name": "Ryan Welles",
"username": "voyager.344"
}
}
]
}
]
},
{
"id": 3,
"title": "Q&A within the challenge hubs",
"category": "feature",
"upvotes": 65,
"status": "suggestion",
"description": "Challenge-specific Q&A would make for easy reference.",
"comments": [
{
"id": 5,
"content": "Much easier to get answers from devs who can relate, since they've either finished the challenge themselves or are in the middle of it.",
"user": {
"image": "./assets/user-images/image-george.jpg",
"name": "George Partridge",
"username": "soccerviewer8"
}
}
]
},
{
"id": 4,
"title": "Add image/video upload to feedback",
"category": "enhancement",
"upvotes": 51,
"status": "suggestion",
"description": "Images and screencasts can enhance comments on solutions.",
"comments": [
{
"id": 6,
"content": "Right now, there is no ability to add images while giving feedback which isn't ideal because I have to use another app to show what I mean",
"user": {
"image": "./assets/user-images/image-javier.jpg",
"name": "Javier Pollard",
"username": "warlikeduke"
}
},
{
"id": 7,
"content": "Yes I'd like to see this as well. Sometimes I want to add a short video or gif to explain the site's behavior..",
"user": {
"image": "./assets/user-images/image-roxanne.jpg",
"name": "Roxanne Travis",
"username": "peppersprime32"
}
}
]
},
{
"id": 5,
"title": "Ability to follow others",
"category": "feature",
"upvotes": 42,
"status": "suggestion",
"description": "Stay updated on comments and solutions other people post.",
"comments": [
{
"id": 8,
"content": "I also want to be notified when devs I follow submit projects on FEM. Is in-app notification also in the pipeline?",
"user": {
"image": "./assets/user-images/image-victoria.jpg",
"name": "Victoria Mejia",
"username": "arlen_the_marlin"
},
"replies": [
{
"content": "Bumping this. It would be good to have a tab with a feed of people I follow so it's easy to see what challenges they’ve done lately. I learn a lot by reading good developers' code.",
"replyingTo": "arlen_the_marlin",
"user": {
"image": "./assets/user-images/image-zena.jpg",
"name": "Zena Kelley",
"username": "velvetround"
}
}
]
},
{
"id": 9,
"content": "I've been saving the profile URLs of a few people and I check what they’ve been doing from time to time. Being able to follow them solves that",
"user": {
"image": "./assets/user-images/image-jackson.jpg",
"name": "Jackson Barker",
"username": "countryspirit"
}
}
]
},
{
"id": 6,
"title": "Preview images not loading",
"category": "bug",
"upvotes": 3,
"status": "suggestion",
"description": "Challenge preview images are missing when you apply a filter."
},
{
"id": 7,
"title": "More comprehensive reports",
"category": "feature",
"upvotes": 123,
"status": "planned",
"description": "It would be great to see a more detailed breakdown of solutions.",
"comments": [
{
"id": 10,
"content": "This would be awesome! It would be so helpful to see an overview of my code in a way that makes it easy to spot where things could be improved.",
"user": {
"image": "./assets/user-images/image-victoria.jpg",
"name": "Victoria Mejia",
"username": "arlen_the_marlin"
}
},
{
"id": 11,
"content": "Yeah, this would be really good. I'd love to see deeper insights into my code!",
"user": {
"image": "./assets/user-images/image-jackson.jpg",
"name": "Jackson Barker",
"username": "countryspirit"
}
}
]
},
{
"id": 8,
"title": "Learning paths",
"category": "feature",
"upvotes": 28,
"status": "planned",
"description": "Sequenced projects for different goals to help people improve.",
"comments": [
{
"id": 12,
"content": "Having a path through the challenges that I could follow would be brilliant! Sometimes I'm not sure which challenge would be the best next step to take. So this would help me navigate through them!",
"user": {
"image": "./assets/user-images/image-george.jpg",
"name": "George Partridge",
"username": "soccerviewer8"
}
}
]
},
{
"id": 9,
"title": "One-click portfolio generation",
"category": "feature",
"upvotes": 62,
"status": "in-progress",
"description": "Add ability to create professional looking portfolio from profile.",
"comments": [
{
"id": 13,
"content": "I haven't built a portfolio site yet, so this would be really helpful. Might it also be possible to choose layout and colour themes?!",
"user": {
"image": "./assets/user-images/image-ryan.jpg",
"name": "Ryan Welles",
"username": "voyager.344"
}
}
]
},
{
"id": 10,
"title": "Bookmark challenges",
"category": "feature",
"upvotes": 31,
"status": "in-progress",
"description": "Be able to bookmark challenges to take later on.",
"comments": [
{
"id": 14,
"content": "This would be great! At the moment, I'm just starting challenges in order to save them. But this means the My Challenges section is overflowing with projects and is hard to manage. Being able to bookmark challenges would be really helpful.",
"user": {
"image": "./assets/user-images/image-suzanne.jpg",
"name": "Suzanne Chang",
"username": "upbeat1811"
}
}
]
},
{
"id": 11,
"title": "Animated solution screenshots",
"category": "bug",
"upvotes": 9,
"status": "in-progress",
"description": "Screenshots of solutions with animations don’t display correctly."
},
{
"id": 12,
"title": "Add micro-interactions",
"category": "enhancement",
"upvotes": 71,
"status": "live",
"description": "Small animations at specific points can add delight.",
"comments": [
{
"id": 15,
"content": "I'd love to see this! It always makes me so happy to see little details like these on websites.",
"user": {
"image": "./assets/user-images/image-victoria.jpg",
"name": "Victoria Mejia",
"username": "arlen_the_marlin"
},
"replies": [
{
"content": "Me too! I'd also love to see celebrations at specific points as well. It would help people take a moment to celebrate their achievements!",
"replyingTo": "arlen_the_marlin",
"user": {
"image": "./assets/user-images/image-suzanne.jpg",
"name": "Suzanne Chang",
"username": "upbeat1811"
}
}
]
}
]
}
]
const MyArrayFromApi = () => {
const [arrayApi, setArrayApi] = useState(myArrayApi);
return (
<div>
{arrayApi.map((elementApi => {
return (
<div key={elementApi.id}>
<div>
<h1>{elementApi.title}</h1>
<p>{elementApi.category}</p>
<p>{elementApi.upvotes}</p>
<p>{elementApi.description}</p>
</div>
{elementApi.comments.map((elementComments => {
return (
<div key={elementComments.id}><p>{elementComments.content}</p></div>
)
}))}
</div>
)
}))}
</div>
)
}
export { MyArrayFromApi }
enter image description here
The error happened because of "elementApi.comments.map".
There are some items that don't have "comments" property. e.g. id = 6, 11
So please change "elementApi.comments.map" to "elementApi.comments?.map".
Incorrect use of parentheses with arrow function arguments. Use them like the below sample code. Or you can ignore them if you have only one argument: arrayApi.map(elementApi => {
//....rest of the code
{arrayApi.map((elementApi) => {
return (
//...
)
})}
</div>
//...
Same issue with elementApi.comments.map(...
Also with elementsApi.comments, in some objects the comments are undefined. So in order to deal with this you need to call this attribute with the optional chaining operator (?.)
Ex: elementApi.comments?.map(...
From MDN
The optional chaining operator provides a way to simplify accessing values through connected objects when it's possible that a reference or function may be undefined or null
here is the solution to this https://stackblitz.com/edit/react-cdwvfz?file=src/App.js
I have used The optional chaining operator (?.) (comments?). this operator enables you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid.
like in the myArrayApi array, some objects did not have comment key so after using this operator, the undefined error would not appear
const [arrayApi, setArrayApi] = useState(myArrayApi);
return (
<div>
{arrayApi.map((elementApi) => {
return (
<div key={elementApi.id}>
<div>
<h1>{elementApi.title}</h1>
<p>{elementApi.category}</p>
<p>{elementApi.upvotes}</p>
<p>{elementApi.description}</p>
</div>
{elementApi?.comments?.map((elementComments) => {
return (
<div key={elementComments.id}>
<p>{elementComments.content}</p>
</div>
);
})}
</div>
);
})}
</div>
);
This question already has answers here:
not able to access $scope object outside a http response callback function in angularjs
(3 answers)
Closed 5 years ago.
I'm trying to get a json file within a a controller with $http.get. All well until I try to access the property which holds the response. If I try console.log(property) inside the $http.get() it outputs the returned object, outside $http.get() accessing the very same property and it outputs undefined!
I even try to attache it to the $scope and it's the same result?!
angular.module('todayfmApp')
.controller('MainCtrl', ['$http', '$scope', function ($http, $scope) {
var self = this;
$http.get('data/form-data.json').then(function(response) {
self.formdata = response.data;
console.log(self.formdata);
});
console.log(self.formdata);
}]);
{
"settings": {
"version": "",
"Step": "",
"filterBreak": "",
"pid": ""
},
"category": [
{ "name": "Select All", "selected": true },
{ "name": "Carlow", "value": "Carlow" },
{ "name": "Cavan", "value": "Cavan" },
{ "name": "Clare", "value": "Clare" },
{ "name": "Cork", "value": "Cork" },
{ "name": "Derry", "value": "Derry" },
{ "name": "Donegal", "value": "Donegal" },
{ "name": "Down", "value": "Down" },
{ "name": "Dublin", "value": "Dublin" },
{ "name": "Galway", "value": "Galway" },
{ "name": "Kerry", "value": "Kerry" },
{ "name": "Kildare", "value": "Kildare" },
{ "name": "Kilkenny", "value": "Kilkenny" },
{ "name": "Laois", "value": "Laois" },
{ "name": "Leitrim", "value": "Leitrim" },
{ "name": "Limerick", "value": "Limerick" },
{ "name": "Louth", "value": "Louth" },
{ "name": "Mayo", "value": "Mayo" },
{ "name": "Meath", "value": "Meath" },
{ "name": "Monaghan", "value": "Monaghan" },
{ "name": "Offaly", "value": "Offaly" },
{ "name": "Roscommon", "value": "Roscommon" },
{ "name": "Sligo", "value": "Sligo" },
{ "name": "Tipperary", "value": "Tipperary" },
{ "name": "Waterford", "value": "Waterford" },
{ "name": "Westmeath", "value": "Westmeath" },
{ "name": "Wexford", "value": "Wexford" },
{ "name": "Wicklow", "value": "Wicklow" }
],
"num_nights": [
{ "name": "1 Night", "value": 1, "selected": true},
{ "name": "2 Nights", "value": 2 },
{ "name": "3 Nights", "value": 3 },
{ "name": "4 Nights", "value": 4 },
{ "name": "5 Nights", "value": 5 },
{ "name": "6 Nights", "value": 6 },
{ "name": "7 Nights", "value": 7 }
],
"num_rooms": [
{ "name": "1 Room", "value": 1, "selected": true },
{ "name": "2 Rooms", "value": 2 },
{ "name": "3 Rooms", "value": 3 },
{ "name": "4 Rooms", "value": 4 }
],
"num_adults": [
{ "name": "1 Adult", "value": 1 },
{ "name": "2 Adult", "value": 2, "selected": true }
],
"num_child": [
{ "name": "0 Kids", "value": 0, "selected": true },
{ "name": "1 Kids", "value": 1 },
{ "name": "2 Kids", "value": 2 }
]
}
In your case the problem is that $http.get response data is a late binding method. The response of this method will be available only after the service call is finished. This is an asynchronous method so that this will not be accessible inside scope as you expect. For that you need to bind your response inside a $scope variable and use it later inside a function call.
You will need to call the self.getResponseData method at first, say at the time of controller initialization. There after call a method self.logResponseData to log the response data.
You may need to change your calls something like this.
angular.module('todayfmApp')
.controller('MainCtrl', ['$http', '$scope', function ($http, $scope) {
var self = this;
// Get the response data with service call
self.getResponseData = function(){
$http.get('data/form-data.json').then(function(response) {
self.formdata = response.data;
console.log(self.formdata);
});
}
//Method to read the response data later
self.logResponseData = function() {
console.log(self.formdata);
}
//Call the method at the time controller loaded to initialize the `self` variable
self.getResponseData();
}]);
self.formdata = response.data.jsondatavariablename;
// Use the JSON data name
$http.get() is asynchronous which roughly means that when you call this it sends request and doesn't stop code on here to wait until it responded, next statements execution is continued though response is still hasn't come and you have no data from it. That's why you need callback function in .then() method, it is being called when you get your response, where you can use your response data. For example, you can assign it to some $scope property and it will update this value everywhere you use this property.
$http uses so called Promises to achieve this. I tried to make it simple but if you want know more detailed how it works, guess that's what will help you: Promise
I have a collection called Dish in mongodb the sample data is -
[{
"_id": ObjectId("56c839b969431a9913cafa65"),
"name": "Dish 01",
"description": "Dish 01 description",
"ingredients": [{
"id": "56c4a40bf97c039d44e89185",
"name": "onion",
}, {
"id": "56c4a40bf97c039d44e89145",
"name": "salt",
}, {
"id": "56c4a40bf97c039d44e89176",
"name": "spices",
}],
"category": "entree",
"image": "https://s3-ap-southeast-1.amazonaws.com/sichu-bucket/2016-02-20T13:10:31.334Zapi.js"
}, {
"_id": ObjectId("56c839b969431a9913cafa70"),
"name": "Dish 02",
"description": "Dish 02 description",
"ingredients": [{
"id": "56c4a40bf97c039d44e89185",
"name": "onion",
}, {
"id": "56c4a40bf97c039d44e89145",
"name": "oil",
}],
"category": "main",
"image": "https://s3-ap-southeast-1.amazonaws.com/sichu-bucket/2016-02-20T13:10:31.334Zapi.js"
}]
now I want dishes which has onion in it and I want to get result by using loopback-angularjs-sdk
I have added this to my Dish.json file
"settings": {
"mongodb": {
"allowExtendedOperators": true
}
}
I don't know how it should be done. Please guide me into this.
In your ngApp controller pass the Dish object, and then you can use the Dish.find filter to create a filter api, which will internally search mongo for all the dishes with indegredients as onion.
Dish.find({"filter": {"where": {"indegredients.id": "56c4a40bf97c039d44e89185"}}}, function (dishes) {
});
For more on filter api, or how to call them through angular sdk you can use.
https://docs.strongloop.com/display/public/LB/Where+filter
https://docs.strongloop.com/display/public/LB/AngularJS+JavaScript+SDK
Plus you can run a local server for the loopback angular sdk documentation also.
For generating the angular sdk documentation, what you can do is
lb-ng-doc client/js/services/lb-services.js
Browse the documentation at http://localhost:3030/
My data looks like:
[
{
"_id": "531dbf8b9b9fc50000a8d611",
"active": true,
"client": {
"_id": "531dbf8b9b9fc50000a8d60e",
"name": "TR"
},
"company_id": "531dbf8b9b9fc50000a8d60c",
"createdOn": "2014-03-10T13:35:07.313Z",
"description": "Gentle Action Application Pads",
"dimensions": {
"weight": 22.4
},
"lot": [
],
"meta": {
"category": "Face",
"msrp": 7.75
},
"sku": "11002",
"unit_of_measure": "each",
"updatedOn": "2014-03-10T13:35:07.314Z"
},
{
"_id": "531dbf8b9b9fc50000a8d612",
"active": true,
"client": {
"_id": "531dbf8b9b9fc50000a8d60e",
"name": "TR"
},
"company_id": "531dbf8b9b9fc50000a8d60c",
"createdOn": "2014-03-10T13:35:07.317Z",
"description": "Skin Renewal System - Enriched (CA)",
"dimensions": {
"weight": 22.4
},
"lot": [
],
"meta": {
"category": "Face",
"msrp": 321.6
},
"sku": "11700CA",
"unit_of_measure": "each",
"updatedOn": "2014-03-10T13:35:07.318Z"
}
]
In my view, I have:
<input type="text" ng-model="receivingSku" placeholder="Locations loaded via $http" typeahead="sku for sku in getSku($viewValue) | filter:$viewValue" typeahead-on-select="selectedSku()" class="form-control">
I need the sku field for each item to be in the typeahead. How can I accomplish this?
Presently, I get an error:
Error: matches is undefined
You can loop over your original array and create an array of just SKU's:
var skus = origArray.map(function(e) {
return e.sku;
});
The new array can be used for typeahead.
PS - I'm not very familiar with typeahead. If typeahead is capable of peeking into objects, you don't need to do this.
There are some examples of integrating Google charts as an AngularJs directive.
Like this one: http://plnkr.co/edit/YzwjuU?p=preview
Update: I want to avoid waiting on google charts to be ready before bootstrapping the whole application (as shown in the example above):
google.setOnLoadCallback(function() {
angular.bootstrap(document.body, ['myApp']);
});
Is there a way to do this in a single module and not on the whole app?
Update 2: I have created my plunker and it works without waiting for the callback but I'm not sure if it will work in all cases.
http://plnkr.co/edit/7UUfcq4dD7nd4MylB4ni
Here is a good example of a AngularJs Google Chart Tools directive in action.
Example plunker.
Instructions
These same instructions are in the plunker itself.
Download ng-google-chart.js from github and add a script tag to your html.
Create a div like:
<div google-chart chart="chart" style="{{chart.cssStyle}}">
</div>
Add 'googlechart' to your module like this:
angular.module('myApp',[ 'googlechart', ...
Populate the $scope.chart like this:
{
"type": "ColumnChart",
"cssStyle": "height:200px; width:300px;",
"data": {
"cols": [
{
"id": "month",
"label": "Month",
"type": "string",
"p": {}
},
{
"id": "laptop-id",
"label": "Laptop",
"type": "number",
"p": {}
},
{
"id": "desktop-id",
"label": "Desktop",
"type": "number",
"p": {}
},
{
"id": "server-id",
"label": "Server",
"type": "number",
"p": {}
},
{
"id": "cost-id",
"label": "Shipping",
"type": "number"
}
],
"rows": [
{
"c": [
{
"v": "January"
},
{
"v": 19,
"f": "42 items"
},
{
"v": 12,
"f": "Ony 12 items"
},
{
"v": 7,
"f": "7 servers"
},
{
"v": 4
}
]
},
{
"c": [
{
"v": "February"
},
{
"v": 13
},
{
"v": 1,
"f": "1 unit (Out of stock this month)"
},
{
"v": 12
},
{
"v": 2
}
]
},
{
"c": [
{
"v": "March"
},
{
"v": 24
},
{
"v": 0
},
{
"v": 11
},
{
"v": 6
}
]
}
]
},
"options": {
"title": "Sales per month",
"isStacked": "true",
"fill": 20,
"displayExactValues": true,
"vAxis": {
"title": "Sales unit",
"gridlines": {
"count": 6
}
},
"hAxis": {
"title": "Date"
}
},
"formatters": {},
"displayed": true
}
As you already figured out, you can initialize angular in the html or body tag, without waiting for google charts.
To ensure you don't try to render a chart before the google chart JavaScript code is ready,
I would have the directive $watch a new controller $scope property/flag that you set inside the callback function for google.setOnLoadCallback. Inside the $watch callback, check to ensure the flag is set, then do your initialization.
There is Github project that wraps Google Charts into AngularJS directive
https://github.com/angular-google-chart/angular-google-chart
http://angular-google-chart.github.io/angular-google-chart/
I was having periodic trouble in Angular with the google chart API not being loaded on time to receive the data from a $http fetch. The data came first sometimes (not always), and then the usage of it in the callback would fail with "google.visualization.DataTable is not a function"
Inside the callback returning data:
var dataTable = new google.visualization.DataTable(data);
To solve it, I found in ng-google-chart.js that there was a promise called "googleChartApiPromise", so I injected it, and wrapped the refresh call in it:
googleChartApiPromise.then(function() {
refreshCharts();
});
This seems to solve the problem.