ng-repeat on a multi-dimensional array/object - javascript

I am getting json object from an external url.
$http.get('http://dev-newsbackend.gotpantheon.com/articles')
.success(function(data, status){
$scope.articles = data.articles;
console.log(data.articles);
}).error(function(err){
console.log(err);
})
})
The json I get is as below:
{
"articles": [
{
"single": {
"title": "7 Tech Upgrades to the Old-School Science Class"
}
},
{
"single": {
"title": "What Will the ALS Association Do With That $100 Million?"
}
},
{
"single": {
"title": "President Obama Rocked a Tan Suit, So Twitter Went Nuts"
}
}
],
"view": {
"name": "articles",
"display": "page",
"path": "articles",
"root": "articles",
"child": "single",
"pages": 1,
"page": 0,
"count": 3,
"limit": 10
}
}
However, when I am doing a ng-repeat though the element is printed multiple times. Am not getting the value.
<ion-list ng-repeat="article in articles">
<ion-item>Test : {{ single.title }}</ion-item>
</ion-list>
My developer console screen-shot:
This is what I got for console.log(data.articles);
The screen-shot of my browser where am getting the list without the title value:

Try this:
<ion-list ng-repeat="article in articles">
<ion-item>Test : {{article.single.title }}</ion-item>
</ion-list>

Related

Dialogflow html/js card json value v1

I am trying to access the card json value, to no avail.
In my scenario, I am asking the bot about "weather in London" and it replies back with "It is currently 9 degrees celcius in London." via the webhook.
Which is correct and dynamic.
However, I am trying to also pass the values to a card too.
In the json reply, I do get the card as so
{
"id": "REMOVED",
"timestamp": "2017-12-05T11:10:52.033Z",
"lang": "en",
"result": {
"source": "agent",
"resolvedQuery": "weather in london",
"action": "sayWeather",
"actionIncomplete": false,
"parameters": {
"geo-city": "London"
},
"contexts": [],
"metadata": {
"intentId": "REMOVED",
"webhookUsed": "true",
"webhookForSlotFillingUsed": "false",
"webhookResponseTime": 626,
"intentName": "Weather"
},
"fulfillment": {
"speech": "It is currently 9 degrees celcius in London.",
"source": "agent",
"displayText": "It is currently 9 degrees celcius in London.",
"messages": [
{
"type": 0,
"speech": "It is currently 9 degrees celcius in London."
}
],
"data": {
"items": [
{
"simpleResponse": {
"textToSpeech": "This is the first simple response for a basic card"
}
},
{
"basicCard": {
"title": "Title: this is a title",
"formattedText": "This is a basic card. Text in a\n basic card can include \"quotes\" and most other unicode characters\n including emoji 📱. Basic cards also support some markdown\n formatting like *emphasis* or _italics_, **strong** or __bold__,\n and ***bold itallic*** or ___strong emphasis___ as well as other things\n like line \nbreaks",
"subtitle": "This is a subtitle",
"image": {
"url": "https://developers.google.com/actions/images/badges/XPM_BADGING_GoogleAssistant_VER.png",
"accessibilityText": "Image alternate text"
},
"buttons": [
{
"title": "This is a button",
"openUrlAction": {
"url": "https://assistant.google.com/"
}
}
]
}
},
{
"simpleResponse": {
"textToSpeech": "This is the 2nd simple response ",
"displayText": "This is the 2nd simple response"
}
}
]
}
},
"score": 1
},
"status": {
"code": 200,
"errorType": "success",
"webhookTimedOut": false
},
"sessionId": "REMOVED"
}
Accessing the value of speech using data.result.fulfillment.speech works fine.
However, when using data.result.fulfillment.data.items.basicCard.image.url it just doesnt work. And if I go up several levels, I do get:
[object Object]
Your help is appreciated.
The items attribute is a list and not an object. As such, you'll have to use a numerical index to retrive the data. In the example you provided the index of the basicCard object is second so your code should look something like this:
data.result.fulfillment.data.items[1].basicCard.image.url
Notice the [1] after items.
Bear in mind that if the order of this list changes you may no longer be retrieving a basicCard object so you may want to add some checking to make sure you're retrieving the data you want.

JavaScript - Can't read property of undefined

Okay, this might be a stupid question, because I'm missing something, but I just can't seem to figure out what!
this is my object, using {{ definitionList | json }}
{
"State": "Success",
"Data": [
{
"Description": "Default",
"ID": 4,
},
{
"Description": "Hello World",
"ID": 14,
},
{
"Description": "Test Def",
"ID": 11,
},
{
"Description": "test definitie",
"ID": 12,
},
{
"Description": "testffvfvfvffv",
"ID": 8,
},
{
"Description": "Werknemer_kantoor",
"ID": 3,
"Type":
},
{
"Description": "Werknemer_kantoor",
"ID": 6,
}
],
"Error": null
}
okay now I want to print out "Data" uisng {{ definitionList.Data | json }}
and I receive the error
ORIGINAL EXCEPTION: Cannot read property 'Data' of undefined
I don't understand why? What am I missing?
Maybe you're loading definitionList asynchronously and it is not yet defined when your template is executed?
Try the following code instead (note the ?):
{{ definitionList?.Data | json }}

AngularJS deep filter through array in ng-repeat

My question is looking similar to other questions. But it is different.
Please take a look of below code.
I want to filter data by an array of objects.
Here is the snippet
HTML
<div
ng-repeat="(key, value) in ledgerData.ledgers track by $index"
ledger-pop
index="$index"
ftype="ftypeUpdate"
itemdata="value"
acntlist="fltAccntList"
class='drEntryForm_{{$index}} pr'
name='drEntryForm_{{$index}}'
update-ledger="updateEntry(entry)"
novalidate
>
</div>
JS
$scope.ledgerDataata = {
"ForwardedBalance": {
"amount": 0,
"type": "CREDIT"
},
"creditTotal": 4008,
"debitTotal": 4008,
"balance": {
"amount": 4008,
"type": "CREDIT"
},
"ledgers": [
{
"transactions": [
{
"particular": {
"name": "Sarfaraz",
"uniqueName": "temp"
},
"amount": 1001,
"type": "DEBIT"
}
],
"description": "testing",
"tag": "testing"
},
{
"transactions": [
{
"particular": {
"name": "frnd",
"uniqueName": "frndafafaf14453422453110l26ow"
},
"amount": 2001,
"type": "CREDIT"
},
{
"particular": {
"name": "Rahul",
"uniqueName": "cake"
},
"amount": 3001,
"type": "DEBIT"
}
],
"description": "testing",
"tag": "testing",
}
]
}
I am trying to filter by
ng-repeat="(key, value) in ledgerData.ledgers track by $index | filter:{transactions[0]:{type: 'DEBIT'}}"
But am getting error
thanks in advance :-)
You need to write nested ng-repeat to solve this problem.
outer ng-repeat for the array ledgerData.ledgers and
inner ng-repeat for transaction array in ledgerData.ledgers
<div ng-repeat="(keyOne, ledger) in ledgerData.ledgers track by $index">
{{ledger.description}}
<div ng-repeat="(keyTwo, transaction) in ledger.transactions | filter:{type:'DEBIT'}">
{{transaction.type}}
</div>
</div>
Actually I got the solution.
I've googled hardly and got a library for angularjs-filter.
Here is the link it is very good plugin for filter dirty works and how to use it.
How I got success:
html
ng-repeat="(key, value) in ledgerData.ledgers | pick: debitOnly track by $index"
AngularJS
$scope.debitOnly = (ledger) ->
'DEBIT' == ledger.transactions[0].type
that's it.

Trouble getting data from JSON with ReactJS

I have a JSON file like this, named data.json
{
"link_template": "http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json?limit={num-results}&country={country-code}",
"links": {
"alternate": "http://www.rottentomatoes.com/movie/box-office/",
"self": "http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json?limit=20&country=us"
},
"movies": [
{
"abridged_cast": [
{
"characters": [
"Dominic Toretto"
],
"id": "162652472",
"name": "Vin Diesel"
},
{
"characters": [
"Brian O'Conner"
],
"id": "162654234",
"name": "Paul Walker"
},
{
"characters": [
"Louie Tran"
],
"id": "162684066",
"name": "Tony Jaa"
},
{
"characters": [
"Deckard Shaw"
],
"id": "162653720",
"name": "Jason Statham"
},
{
"characters": [
"Luke Hobbs"
],
"id": "770893686",
"name": "Dwayne \"The Rock\" Johnson"
}
],
"alternate_ids": {
"imdb": "2820852"
},
"critics_consensus": "",
"id": "771354922",
"links": {
"alternate": "http://www.rottentomatoes.com/m/furious_7/",
"cast": "http://api.rottentomatoes.com/api/public/v1.0/movies/771354922/cast.json",
"reviews": "http://api.rottentomatoes.com/api/public/v1.0/movies/771354922/reviews.json",
"self": "http://api.rottentomatoes.com/api/public/v1.0/movies/771354922.json",
"similar": "http://api.rottentomatoes.com/api/public/v1.0/movies/771354922/similar.json"
},
"mpaa_rating": "PG-13",
"posters": {
"detailed": "http://resizing.flixster.com/pVDoql2vCTzNNu0t6z0EUlE5G_c=/51x81/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/14/11181482_ori.jpg",
"original": "http://resizing.flixster.com/pVDoql2vCTzNNu0t6z0EUlE5G_c=/51x81/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/14/11181482_ori.jpg",
"profile": "http://resizing.flixster.com/pVDoql2vCTzNNu0t6z0EUlE5G_c=/51x81/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/14/11181482_ori.jpg",
"thumbnail": "http://resizing.flixster.com/pVDoql2vCTzNNu0t6z0EUlE5G_c=/51x81/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/14/11181482_ori.jpg"
},
"ratings": {
"audience_rating": "Upright",
"audience_score": 88,
"critics_rating": "Certified Fresh",
"critics_score": 82
},
"release_dates": {
"theater": "2015-04-03"
},
"runtime": 140,
"synopsis": "Continuing the global exploits in the unstoppable franchise built on speed, Vin Diesel, Paul Walker and Dwayne Johnson lead the returning cast of Fast & Furious 7. James Wan directs this chapter of the hugely successful series that also welcomes back favorites Michelle Rodriguez, Jordana Brewster, Tyrese Gibson, Chris \"Ludacris\" Bridges, Elsa Pataky and Lucas Black. They are joined by international action stars new to the franchise including Jason Statham, Djimon Hounsou, Tony Jaa, Ronda Rousey and Kurt Russell.",
"title": "Furious 7",
"year": 2015
},
{
"abridged_cast": [
{
"characters": [
"Oh"
],
"id": "770702500",
"name": "Jim Parsons"
},
{
"characters": [
"Tip"
],
"id": "351524959",
"name": "Rihanna"
},
{
"characters": [
"Captain Smek"
],
"id": "162654836",
"name": "Steve Martin"
},
{
"id": "162652167",
"name": "Jennifer Lopez"
}
],
"alternate_ids": {
"imdb": "2224026"
},
"critics_consensus": "",
"id": "771315639",
"links": {
"alternate": "http://www.rottentomatoes.com/m/home_2015/",
"cast": "http://api.rottentomatoes.com/api/public/v1.0/movies/771315639/cast.json",
"reviews": "http://api.rottentomatoes.com/api/public/v1.0/movies/771315639/reviews.json",
"self": "http://api.rottentomatoes.com/api/public/v1.0/movies/771315639.json",
"similar": "http://api.rottentomatoes.com/api/public/v1.0/movies/771315639/similar.json"
},
"mpaa_rating": "PG",
"posters": {
"detailed": "http://resizing.flixster.com/LO7V_j1xUTlsbwzIyCINBxBm5qE=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/17/11181778_ori.jpg",
"original": "http://resizing.flixster.com/LO7V_j1xUTlsbwzIyCINBxBm5qE=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/17/11181778_ori.jpg",
"profile": "http://resizing.flixster.com/LO7V_j1xUTlsbwzIyCINBxBm5qE=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/17/11181778_ori.jpg",
"thumbnail": "http://resizing.flixster.com/LO7V_j1xUTlsbwzIyCINBxBm5qE=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/17/11181778_ori.jpg"
},
"ratings": {
"audience_rating": "Upright",
"audience_score": 69,
"critics_rating": "Rotten",
"critics_score": 47
},
"release_dates": {
"theater": "2015-03-26"
},
"runtime": 93,
"synopsis": "When Oh, a loveable misfit from another planet, lands on Earth and finds himself on the run from his own people, he forms an unlikely friendship with an adventurous girl named Tip who is on a quest of her own. Through a series of comic adventures with Tip, Oh comes to understand that being different and making mistakes is all part of being human. And while he changes her planet and she changes his world, they discover the true meaning of the word HOME. (c) Fox",
"title": "Home",
"year": 2015
}
]
}
This is my ReactJS code, intended to get data from that JSON file and bind in my React components
var CastMember=React.createClass({
render:function(){
<div className="castmember">
</div>
}
});
var Cast=React.createClass({
render:function(){
var cast_members=this.props.cast.map(function (member){
return (
<CastMember member={member}/>
);
});
return (
<div className="cast">
{cast_members}
</div>
);
}
});
var Movie=React.createClass({
render:function(){
return (
<div className="movieBox">
<Cast cast={this.props.movie.abridged_cast}/>
</div>
);
}
});
var MovieList=React.createClass({
render:function(){
var movieNodes=this.props.movies.map(function (movie){
return (
<Movie movie={movie}/>
);
});
return (
<div className="movieList">
{movieNodes}
</div>
);
}
});
var DataBlock = React.createClass({
getInitialState:function() {
return {data:{
movies:[
{abridged_cast:[]}
]
}}
},
componentDidMount:function() {
var a=this;
$.ajax({
url:this.props.url,
dataType:'json',
cache:false,
success:function(data){
this.setState({data:data})
}.bind(this)
});
},
render: function() {
return (
<div className="dataBlock">
<h1>Movie List</h1>
<MovieList movies={this.state.data.movies}/>
</div>
);
}
});
React.render(
<DataBlock url="data.json"/>,
document.getElementById('content')
);
I have been doing this demo in bottom-to-top order. I was able to get list of movies from JSON file and render it, but now stuck in getting abridged_cast in each movie
In render function of Cast component, if I replace it with rendering {this.props.cast}, everything will show up. But I fail in mapping them to member property of CastMember component: My code above didn't display anything. What's wrong with my code?
var CastMember=React.createClass({
render:function(){
<div className="castmember">
</div>
}
});
CastMember component should handle its prop, as you pass the data member to CastMember-> <CastMember member={member}/>.
This would be help:
var CastMember=React.createClass({
render:function(){
return (
<div className="castmember">
{this.props.member}
</div>
);
}
});

Iterate through nested Javascript Objects from API response

I've tried 100 different things, and spend days looking through Google and Stackoverflow, but I can't find a solution to this problem. Everything I call after the body of this API response returns undefined!
The response from Facebook SDK looks like this:
[
{
"body": "[
"data": [
{
"name": "Larry Syid Wright",
"administrator": false,
"id": "xxx"
}, {
"name": "Melissa Long Jackson",
"administrator": false,
"id": "xxx"
}, {
"name": "Charlotte Masson",
"administrator": false,
"id": "xxx"
}
],
"paging": {
"next": "url"
}
]"
},{
"body": "{
"data": [
{
"id": "xxx_xxx",
"message": "In honor of Halloween, how many of you have your own ghost stories? Who believes in ghosts and who doesn't?",
"type": "status",
"created_time": "2014-10-31T20:02:01+0000",
"updated_time": "2014-11-01T02:52:51+0000",
"likes": {
"data": [
{
"id": "xxx",
"name": "Joe HerBatman Owenby Jr."
}
],
}
"paging": {
"cursors":
{
"after": "xxx",
"before": "xxx"
}
}
}
},{
"id": "xxx_xxx",
"from": {
"id": "xxx",
"name": "Jessica Starling"
},
"message": "Watching the "Campaign" and I can't help but notice what a fantastic job they did (Will ferrell and all) with that North Carolina accent! Ya'll know we sound different than other southern states ;)",
"type": "status",
"created_time": "2014-11-01T02:36:21+0000",
"updated_time": "2014-11-01T02:36:21+0000",
"likes": {
"data": [
{
"id": "xxx",
"name": "Scott Williams"n
}
]
}
}
],
"paging": {
"previous": "xxx",
"next": "xxx"
}
}"
}
]
This response is from a batch call. If I call them separately, I can easily iterate through the responses, and get everything from them. When I call them in the batch though, I can't get past "body", and I need to use a batch call.
console.log(response[0].body); will return the object inside the body of the first part of the response, but console.log(response[0].body.data); returns undefined. I just don't get it. This should be simple but it's like there's a lock on the door and I don't have the right key.
I normally have no issue iterating through objects, so I don't need a generalized answer. I need help seeing whatever it is here that I don't see. Why does the console show undefined when I call anything after the body, and what do I need to be doing to get any of these values?
That JSON contains nested JSON. body seems to be a string. Use
var body = JSON.parse(response[0].body);
The values from the body are just strings.which are embedded as json.So firstly you would need to parse them using JSON.parse.
The code would be like
var body = JSON.parse(response[0].body);

Categories