Show Post with its comments using ng-repeat not working - angularjs
I am facing an issue in building below format in MVC using AngularJS
I am showing the posts from the facebook using api with ng-repeat which consists of a Image.
Now the problem i am facing to show the comments for each of the posts using nested ng-repeat.
Dont have any idea how to proceed with it.
ng-repeat nested sample
http://plnkr.co/edit/NGWOZ4?p=info
I think you need something like that?
<body ng-controller="programController">
<div class="panel-group" ng-repeat="row in osk.programs">
<div>{{row.day}}</div>
<div>
<h4>{{row.head}}</h4>
<p>{{row.content}}</p>
<aside class="warning" ng-repeat="row in row.extra">
<strong>Ekstra Gezi:</strong> {{row.exhead}} <span>{{row.price}}</span>
<p>{{row.excontent}}</p>
</aside>
</div>
</div>
</body>
var myApp = angular.module('myApp', []);
myApp.controller('programController', function($scope) {
var json = {
"programs":
[
{
"day":"1.GÜN",
"head":"İstanbul-Amsterdam",
"content":"Gezimizin ilk günü, kalkıştan iki saat önce Sabiha Gökçen Havalimanı Dış Hatlar Terminali Etstur Kontuarı önünde buluşarak başlıyor. Pegasus Hava Yolları tarifeli seferi ile Amsterdam’a uçuş. Havalimanında bizleri bekleyen otobüsümüz ile Amsterdam şehir turu. Bu gezide Tarihi Tren İstasyonu, Dam Meydanı, Ajax Arena Stadı, Tarihi Çiçek Pazarı ve yel değirmenleri görülecek yerlerden bazıları. Misafirlerimiz ekstra olarak düzenlenecek Amsterdam Kanallar Gezisi'ne katılabilirler. Şehir turu sonrası otele transfer. Öğleden sonra serbest zaman. Geceleme otelimizde.",
"extra":
[
{
"exhead":"Amsterdam kanallar gezisi",
"price":"55 Euro",
"excontent":"Amsterdam’a farklı açıdan bakmak isteyenler için üzeri cam olan teknelerle Amsterdam’ın simgesi haline gelmiş kanalları arasında eğlenceli gezi sizi bekliyor."
},
{
"exhead":"Tekne Turu",
"price":"15 Euro",
"excontent":"Amsterdam’a farklı açıdan bakmak isteyenler için üzeri"
}
]
},
{
"day":"2.GÜN",
"head":"Amsterdam-Paris",
"content":"Gezimizin ilk günü, kalkıştan iki saat önce Sabiha Gökçen Havalimanı Dış Hatlar Terminali Etstur Kontuarı önünde buluşarak başlıyor. Pegasus Hava Yolları tarifeli seferi ile Amsterdam’a uçuş. Havalimanında bizleri bekleyen otobüsümüz ile Amsterdam şehir turu. Bu gezide Tarihi Tren İstasyonu, Dam Meydanı, Ajax Arena Stadı, Tarihi Çiçek Pazarı ve yel değirmenleri görülecek yerlerden bazıları. Misafirlerimiz ekstra olarak düzenlenecek Amsterdam Kanallar Gezisi'ne katılabilirler. Şehir turu sonrası otele transfer. Öğleden sonra serbest zaman. Geceleme otelimizde.",
"extra":
[
{
"exhead":"Amsterdam kanallar gezisi",
"price":"55 Euro",
"excontent":"Amsterdam’a farklı açıdan bakmak isteyenler için üzeri cam olan teknelerle Amsterdam’ın simgesi haline gelmiş kanalları arasında eğlenceli gezi sizi bekliyor."
},
{
"exhead":"Tekne Turu",
"price":"15 Euro",
"excontent":"Amsterdam’a farklı açıdan bakmak isteyenler için üzeri"
}
]
}
]
};
$scope.osk = json;
});
Related
How do i show embed image from api
"content": [
{
"type": "full_richtext",
"value": "<p data-block-key=\"a9kn6\">গেমটির কাহিনি গড়ে উঠেছে ইয়ারা নামের এক দেশকে কেন্দ্র করে। কাল্পনিক এ দেশটি শাসন করছে অ্যান্টন কাস্টিলো। নিষ্ঠুর এ শাসক সাধারণ মানুষের ওপর অত্যাচারের পাশাপাশি দেশ পরিচালনায়ও ব্যর্থ। আর তাই একসময়ের সমৃদ্ধ দেশটি অর্থনৈতিকভাবে এবং প্রযুক্তি ব্যবহারে অনেক পিছিয়ে পড়েছে। অত্যাচারী শাসকের কারণে প্রতিবেশী দেশগুলোও ইয়ারার সঙ্গে সম্পর্ক ত্যাগ করেছে। আর তাই অ্যান্টন কাস্টিলোর কাছ থেকে ইয়ারাকে মুক্ত করতে গেরিলাযুদ্ধে নামে ‘ডানি রোজাস’। এই বীর গেরিলাযোদ্ধার পরিচয়েও নিজেকে খুঁজে পাওয়া যাবে গেমটিতে।</p>",
"id": "c52035cd-c313-4e69-8123-98b2d2247228"
},
{
"type": "full_richtext",
"value": "<p data-block-key=\"a9kn6\"></p><embed alt=\"\" embedtype=\"image\" format=\"fullwidth\" id=\"4\"/><p data-block-key=\"6q2ur\"></p>",
"id": "516a6751-3788-44b9-a984-a81807baf455"
},
{
"type": "full_richtext",
"value": "<p data-block-key=\"a9kn6\">অ্যাকশননির্ভর গেমটির গ্রাফিকস খুবই উন্নত মানের। আর তাই গহিন জঙ্গলে গা ঢাকা দিয়ে অ্যান্টন কাস্টিলো বাহিনীর বিরুদ্ধে লড়াইয়ের সময় প্রতি পদে মিলবে যুদ্ধের আবহ। গেমটিতে তিনটি স্থানে গেরিলা হামলার সুযোগ মিলবে। তিনটি স্থানে হামলার সময় ভিন্ন পথে আলাদা চরিত্রের গেরিলা বাহিনীর মাধ্যমে শত্রুর বিরুদ্ধে লড়াই করতে হবে। এ সময় প্রধান ক্যাম্প পরিবর্তনের পাশাপাশি নতুন অস্ত্র, হামলার স্থান ও কৌশলে পরিবর্তন আনতে হওয়ায় প্রতিটি হামলার সময়ই মনে হবে নতুন গেম খেলছেন।</p><p data-block-key=\"4a3f3\"></p><p data-block-key=\"3j3go\">গেমটিতে গেরিলাযুদ্ধের সময় সহযোগী হিসেবে দেখা মিলবে বেশ কিছু চরিত্রের, যাদের মধ্যে জুয়ান কর্টেজ অন্যতম। যুদ্ধের ময়দানে আপনার মনোবল ঠিক রাখতে হাস্যকর বিভিন্ন ঘটনা নিয়মিত ঘটাবে মজার এ চরিত্র। এল টেগরের নাম না বললেই নয়, সাবেক এ গেরিলাযোদ্ধা অভিজ্ঞতা ও পরামর্শ দিয়ে যুদ্ধে জয়ী হতে ভূমিকা রাখবে। এ ছাড়া বিভিন্ন এলাকায় থাকা প্রধান ক্যাম্পে দেখা মিলবে বিভিন্ন চরিত্রের।<br/>ইউবিসফটের তৈরি গেমটি উইন্ডোজের পাশাপাশি প্লেস্টেশন ৪, প্লেস্টেশন ৫, এক্সবক্স ওয়ান, সিরিজ এক্স ও সিরিজ এস এবং গুগল স্ট্যাডিয়াতেও খেলা যাবে।<br/></p><h3 data-block-key=\"12s3k\"><b>কম্পিউটারে খেলতে কমপক্ষে যা লাগবে</b></h3><p data-block-key=\"1bcsg\">অপারেটিং সিস্টেম: উইন্ডোজ ১০<br/>প্রসেসর: ইন্টেল কোর আইসেভেন বা এমএমডি রাইজেন ফাইভ<br/>মেমোরি: ১৬ গিগাবাইট র্যাম<br/>গ্রাফিকস: ৮ গিগাবাইটের এএমডি আরএক্স ৪৬০ অথবা এনভিডিয়া জিফোর্স জিটিএক্স ৯৬০।<br/>জায়গা: ৬০ গিগাবাইট</p>",
"id": "7754100b-d91b-477c-92da-45cee0962dca"
}
],
I have this type of array from api.
I can showed the string data, but cannot show the embedded image.
I am using below code for shown the string from the api. Help me to find out the problem, Thanks to All
<div className='Details-news-content'>
{
newss.content.map((data, index) => (
<p key={index} dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(data.value) }}>
</p>))}
</div>
It's codded in Wagtail. In wagtail API if the content's Richtext is not serialized the API will show wired type HTML format in API. in this case, add this code in blocks.py from wagtail.core import blocks from wagtail.core.templatetags.wagtailcore_tags import richtext class RichtextBlock(blocks.RichTextBlock): def get_api_representation(self, value, context=None): return richtext(value.source) Source: https://learnwagtail.com/tutorials/headless-cms-serializing-richtext-blocks/
Images show up as '[object HTMLImageElement] ' in React
I have a drop-down auto search component built using react, the problem is that it does not allow for images currently. Here is a sample of how the code works and what the problem is in this 22-second video:
https://www.youtube.com/watch?v=kSAbTiHEJhM&feature=youtu.be
In the video when I type Caleb it shows up as Caleb [object HTMLImageElement] instead of Caleb with the image next to it.
Not sure how to implement this but my first guess is adding image to state, however I am not sure exactly where to add it in the rest of the code or even what I would set the image state too.
The AutoCompleteText.js has all the functionality in it whereas countries.js is just a list of countries with a name and an image added on to the end to test the functionality.
AutoCompleteText.js
import React from 'react';
import './AutoCompleteText.css';
export default class AutoCompleteText extends React.Component {
constructor (props) {
super(props);
this.state = {
suggestions: [],
text: ''
};
}
onTextChanged = (e) => {
const { items } = this.props;
const value = e.target.value;
let suggestions = [];
if(value.length > 0) {
const regex = new RegExp(`^${value}`, 'i');
suggestions = items.sort().filter(v => regex.test(v));
}
this.setState(() => ({ suggestions, text: value}));
}
suggestionSelected (value) {
this.setState(() => ({
text: value,
suggestions: [],
}))
}
renderSuggestions () {
const { suggestions } = this.state;
if(suggestions.length === 0) {
return null;
}
return (
<ul>
{suggestions.map((item) => <li onClick={() => this.suggestionSelected(item)}>{item}</li>)}
</ul>
);
}
render () {
const { text } = this.state;
return (
<div className="AutoCompleteText">
<input value={text} onChange={this.onTextChanged} type="text" />
{this.renderSuggestions()}
</div>
)
}
}
countries.js
const image = new Image();
image.src = '../images/myself.jpg'
export default `Afghanistan
Albania
Algeria
Andorra
Angola
Antigua & Deps
Argentina
Armenia
Australia
Austria
Azerbaijan
Bahamas
Bahrain
Bangladesh
Barbados
Belarus
Belgium
Belize
Benin
Bhutan
Bolivia
Bosnia Herzegovina
Botswana
Brazil
Brunei
Bulgaria
Burkina
Burundi
Cambodia
Cameroon
Canada
Cape Verde
Central African Rep
Chad
Chile
China
Colombia
Comoros
Congo
Congo {Democratic Rep}
Costa Rica
Croatia
Cuba
Cyprus
Czech Republic
Denmark
Djibouti
Dominica
Dominican Republic
East Timor
Ecuador
Egypt
El Salvador
Equatorial Guinea
Eritrea
Estonia
Ethiopia
Fiji
Finland
France
Gabon
Gambia
Georgia
Germany
Ghana
Greece
Grenada
Guatemala
Guinea
Guinea-Bissau
Guyana
Haiti
Honduras
Hungary
Iceland
India
Indonesia
Iran
Iraq
Ireland {Republic}
Israel
Italy
Ivory Coast
Jamaica
Japan
Jordan
Kazakhstan
Kenya
Kiribati
Korea North
Korea South
Kosovo
Kuwait
Kyrgyzstan
Laos
Latvia
Lebanon
Lesotho
Liberia
Libya
Liechtenstein
Lithuania
Luxembourg
Macedonia
Madagascar
Malawi
Malaysia
Maldives
Mali
Malta
Marshall Islands
Mauritania
Mauritius
Mexico
Micronesia
Moldova
Monaco
Mongolia
Montenegro
Morocco
Mozambique
Myanmar, {Burma}
Namibia
Nauru
Nepal
Netherlands
New Zealand
Nicaragua
Niger
Nigeria
Norway
Oman
Pakistan
Palau
Panama
Papua New Guinea
Paraguay
Peru
Philippines
Poland
Portugal
Qatar
Romania
Russian Federation
Rwanda
St Kitts & Nevis
St Lucia
Saint Vincent & the Grenadines
Samoa
San Marino
Sao Tome & Principe
Saudi Arabia
Senegal
Serbia
Seychelles
Sierra Leone
Singapore
Slovakia
Slovenia
Solomon Islands
Somalia
South Africa
South Sudan
Spain
Sri Lanka
Sudan
Suriname
Swaziland
Sweden
Switzerland
Syria
Taiwan
Tajikistan
Tanzania
Thailand
Togo
Tonga
Trinidad & Tobago
Tunisia
Turkey
Turkmenistan
Tuvalu
Uganda
Ukraine
United Arab Emirates
United Kingdom
United States
Uruguay
Uzbekistan
Vanuatu
Vatican City
Venezuela
Vietnam
Yemen
Zambia
Zimbabwe
Caleb ${image}`.split('\n')
This is happening because you are concatenating image object with the string.
Check the output below:-
const image = new Image();
image.src = '../images/myself.jpg';
var arr = [`Caleb ${image}`.split('\n')];
console.log(arr[0])
If you want to show country name followed by image url in the list then try
`Caleb ${image.src}`.split('\n')
You can't display image in the list directly using this way.
If you want to show image followed by string then use <img> tag.
let image = '<img src="https://static.daniweb.com/avatars/avatar747225.gif" />';
var country = `Celeb ${image}`;
document.getElementById('country').innerHTML = country
<ul>
<li id="country">sadfa</li>
</ul>
JSON-LD for more products in one page
If I have more products in one page, how can I set JSON-LD? <article> Our car dealership is here to make sure your vehicle always performs at its best. We provide a diverse range of services to the manufacturer’s high standard, and you’ll receive a nu..... </article> <article> ALFA ROME 2.0 <img ... /> </article> <article> ALFA ROME 3.0 <img ... /> <img ... /> </article>
yes i want use schema.org.
i have tried to do this for each car:
<script type="application/ld+json">
{
"#context":"http://schema.org",
"#type":"Car",
"name": "Alfa Romeo Giulietta 1.6 JTDm",
"model": "Giulietta",
"brand":"alfa romeo",
"fuelType":"Diesel",
"vehicleEngine":"Diesel - 4 cilindri in linea - Cilindrata: 1598 cm3 - 4 Valvole per cilindro - Sovralimentato - Potenza max: 88 kw (120CV) a 4.000 giri/min - Coppia max 32,6 kgm (320,0 Nm) a 1.750 giri/min - Euro 6 (715/2007 - 692/2008) - Potenza Fiscale 17 CV",
"description" : "Alfa Romeo Giulietta 1.6 JTDm - 2 120 CV Distinctive (05/2015)",
"image":"assets/img/annunci/alfa-romeo-giulietta-distinctive.jpg",
"offers":{
"#type": "Offer",
"priceCurrency": "EUR",
"price": "20.850"
}
}
</script>
<script type="application/ld+json">
{
"#context":"http://schema.org",
"#type":"Car",
"name": "FIAT Nuova Panda ",
"model": "new panda",
"brand":"fiat",
"fuelType":"Benzina",
"vehicleEngine":"Benzina - 4 cilindri in linea - Cilindrata: 1242 cm3 - 2 Valvole per cilindro - Potenza max: 51 kw (69CV) a 5.500 giri/min - Coppia max 20,4 kgm (102,0 Nm) a 3.000 giri/min - Euro 6 (715/2007 - 692/2008) Potenza Fiscale 14 CV",
"description" : "FIAT Nuova Panda 1.2 Lounge (07/2014)",
"image":"assets/img/annunci/fiat-500-x-1.6-pop-star.jpg"
}
</script>
....
but is correct (if one page have more car)? the real page is auto-calanca.it/promozioni.
Filter Json Using Checkboxes with AngularJS
I have been trying to solve this problem for days.
i'm trying to filter Json data using checkbox , for example when i checkbox more than one id , it shows the rest that id data
enter image description here
if user selects check boxes ( model numbers ),models will be filtered based on those check boxes selection
controller('compareModelsCtrl',['$scope','$http', '$state' ,'$location',
function($scope, $http, $state,$location, filterFilter) {
$http.get('js/data.json').success(function(data){
$scope.models = data;
$scope.whichmodel = $state.params.modelId;
$scope.order = {};
$scope.format=function(){
$scope.modifiedOrder=[];
angular.forEach($scope.order, function(value, key) {
if(value){
$scope.modifiedOrder.push(parseInt(key));
}
});
<ion-checkbox ng-repeat="model in models | filter:query" ng-model="order[model.id]" ng-change="format()">{{model.model_number}}</ion-checkbox>
</ion-item>
current order : {{modifiedOrder}}
DataJson
{
"id":"0",
"model_number":"BT168562.3",
"rotor_drawing_number":4.01591,
"material":"17-4 PH",
"number_of_lobes":"5/6",
"contour_length":51.00,
"overall_length":55.00,
"major_dia_in":1.063,
"minor_dia_in":0.761,
"rotor_head_dia_in":1.000,
"thread_form":"N/A",
"rotor_weight_lbs":11,
"rotor_ecc":0.0755,
"compatibility_weatherford":"",
"compatibility_r_&_m":"TRUE",
"compatibility_dyna_drill":"",
"compatibility_mono_pv":"",
"compatibility_roper":"",
"stator_drawing_number":4.0162,
"stator_length_in":60.00,
"stator_contour_in":52.00,
"cutback_top":4.00,
"cutback_end":4.00,
"tube_od":1.6875,
"tube_id_ends":1.38,
"tube_id_middle":1.38,
"stator_number_of_stages":2.3,
"stator_weight_lbs":14,
"std_vector_nbr_55":0.913,
"std_vector_nbr_hp":0.913,
"fit_5_os_vector_nbr_55":0.000,
"fit_5_os_vector_nbr_hp":0.000,
"fit_1_0_os_vector_nbr_55":0.000,
"fit_1_0_os_vector_nbr_hp":0.000,
"fit_1_5_os_vector_nbr_55":0.000,
"fit_1_5_os_vector_nbr_hp":0.000,
"fit_2_0_os_vector_nbr_55":0,
"fit_2_0_os_vector_nbr_hp":0.000,
"2_us_vector_nbr_55":0,
"2_us_vector_nbr_hp":0,
"fit_1_5_us_vector_nbr_55":0,
"fit_1_5_us_vector_nbr_hp":0,
"fit_1_0_us_vector_nbr_55":0.903,
"fit_1_0_us_vector_nbr_hp":0.903,
"fit_5_us_vector_nbr_55":0,
"fit_5_us_vector_nbr_hp":0,
"fit_2_5_os_vector_nbr_55":0,
"fit_2_5_os_vector_nbr_hp":0,
"fit_3_os_vector_nbr_55":0,
"fit_3_os_vector_nbr_hp":0,
"tolerance":0.010,
"nbr_thermal_expansion_coef":0.000190,
"nbr_hp_thermal_expansion_coef":0.000190,
"number_of_stages":2.3,
"rev_per_gal":9.25,
"torque_slope_ft_lb_psi":0.29,
"pressure_per_stage_nbr_55_psi":150,
"pressure_per_stage_nbr_hp_psi":225,
"pressure_per_stage_nbr_hpx_psi":235,
"plot_gpm_1":20,
"plot_gpm_2":30,
"plot_gpm_3":40,
"slip_at_gpm_2":"15%",
"":0,
"flow_range_low":20,
"flow_range_high":40,
"speed_range_low":185,
"speed_range_high":370,
"off_bottom_pressure":31,
"max_diff_pressure_nbr":345,
"max_diff_pressure_nbr_hpx":541,
"stall_diff_pressure_nbr":518,
"stall_diff_pressure_nbr_hpx":851,
"max_torque_nbr":100,
"max_torque_nbr_hpx":157,
"stall_torque_nbr":185,
"},
"id":"1",
"model_number":"BT168565.0",
"rotor_drawing_number":4.01530,
"material":"17-4 PH",
"number_of_lobes":"5/6",
"contour_length":87.00,
"overall_length":93.00,
"major_dia_in":0.990,
"minor_dia_in":0.714,
"rotor_head_dia_in":1.100,
"thread_form":"N/A",
"rotor_weight_lbs":16,
"rotor_ecc":0.0690,
"compatibility_weatherford":"",
"compatibility_r_&_m":"TRUE",
"compatibility_dyna_drill":"",
"compatibility_mono_pv":"",
"compatibility_roper":"TRUE",
"stator_drawing_number":4.01637,
"stator_length_in":99.00,
"stator_contour_in":91.00,
"cutback_top":4.00,
"cutback_end":4.00,
"tube_od":1.6875,
"tube_id_ends":1.38,
"tube_id_middle":1.38,
"stator_number_of_stages":5.0,
"stator_weight_lbs":27,
"std_vector_nbr_55":0.853,
"std_vector_nbr_hp":0.853,
"fit_5_os_vector_nbr_55":0.000,
"fit_5_os_vector_nbr_hp":0.000,
"fit_1_0_os_vector_nbr_55":0.863,
"fit_1_0_os_vector_nbr_hp":0.863,
"fit_1_5_os_vector_nbr_55":0.000,
"fit_1_5_os_vector_nbr_hp":0.000,
"fit_2_0_os_vector_nbr_55":0,
"fit_2_0_os_vector_nbr_hp":0,
"2_us_vector_nbr_55":0,
"2_us_vector_nbr_hp":0,
"fit_1_5_us_vector_nbr_55":0,
"fit_1_5_us_vector_nbr_hp":0,
"fit_1_0_us_vector_nbr_55":0,
"fit_1_0_us_vector_nbr_hp":0,
"fit_5_us_vector_nbr_55":0,
"fit_5_us_vector_nbr_hp":0,
"fit_2_5_os_vector_nbr_55":0,
"fit_2_5_os_vector_nbr_hp":0,
"fit_3_os_vector_nbr_55":0,
"fit_3_os_vector_nbr_hp":0,
"tolerance":0.010,
"nbr_thermal_expansion_coef":0.000190,
"nbr_hp_thermal_expansion_coef":0.000190,
"number_of_stages":5.0,
"rev_per_gal":15.72,
"torque_slope_ft_lb_psi":0.19,
"pressure_per_stage_nbr_55_psi":150,
"pressure_per_stage_nbr_hp_psi":225,
"pressure_per_stage_nbr_hpx_psi":235,
"plot_gpm_1":25,
"plot_gpm_2":40,
"plot_gpm_3":55,
"slip_at_gpm_2":"15%",
"":0,
"flow_range_low":25,
"flow_range_high":55,
"speed_range_low":393,
"speed_range_high":865,
"off_bottom_pressure":67,
"max_diff_pressure_nbr":750,
"max_diff_pressure_nbr_hpx":1175,
"stall_diff_pressure_nbr":1125,
"stall_diff_pressure_nbr_hpx":1851,
"max_torque_nbr":143,
"max_torque_nbr_hpx":223,
"stall_torque_nbr":393,
"stall_torque_nbr_hpx":865
}
Any help will be appreciated , Thanks
First off make sure the JSON data or Models is as
[{
"id":"0",
"model_number":"BT168562.3",
"rotor_drawing_number":4.01591,
"material":"17-4 PH",
"number_of_lobes":"5/6",
"contour_length":51.00,
"overall_length":55.00,
"major_dia_in":1.063,
"minor_dia_in":0.761,
"rotor_head_dia_in":1.000,
"thread_form":"N/A",
"rotor_weight_lbs":11,
"rotor_ecc":0.0755,
"compatibility_weatherford":"",
"compatibility_r_&_m":"TRUE",
"compatibility_dyna_drill":"",
"compatibility_mono_pv":"",
"compatibility_roper":"",
"stator_drawing_number":4.0162,
"stator_length_in":60.00,
"stator_contour_in":52.00,
"cutback_top":4.00,
"cutback_end":4.00,
"tube_od":1.6875,
"tube_id_ends":1.38,
"tube_id_middle":1.38,
"stator_number_of_stages":2.3,
"stator_weight_lbs":14,
"std_vector_nbr_55":0.913,
"std_vector_nbr_hp":0.913,
"fit_5_os_vector_nbr_55":0.000,
"fit_5_os_vector_nbr_hp":0.000,
"fit_1_0_os_vector_nbr_55":0.000,
"fit_1_0_os_vector_nbr_hp":0.000,
"fit_1_5_os_vector_nbr_55":0.000,
"fit_1_5_os_vector_nbr_hp":0.000,
"fit_2_0_os_vector_nbr_55":0,
"fit_2_0_os_vector_nbr_hp":0.000,
"2_us_vector_nbr_55":0,
"2_us_vector_nbr_hp":0,
"fit_1_5_us_vector_nbr_55":0,
"fit_1_5_us_vector_nbr_hp":0,
"fit_1_0_us_vector_nbr_55":0.903,
"fit_1_0_us_vector_nbr_hp":0.903,
"fit_5_us_vector_nbr_55":0,
"fit_5_us_vector_nbr_hp":0,
"fit_2_5_os_vector_nbr_55":0,
"fit_2_5_os_vector_nbr_hp":0,
"fit_3_os_vector_nbr_55":0,
"fit_3_os_vector_nbr_hp":0,
"tolerance":0.010,
"nbr_thermal_expansion_coef":0.000190,
"nbr_hp_thermal_expansion_coef":0.000190,
"number_of_stages":2.3,
"rev_per_gal":9.25,
"torque_slope_ft_lb_psi":0.29,
"pressure_per_stage_nbr_55_psi":150,
"pressure_per_stage_nbr_hp_psi":225,
"pressure_per_stage_nbr_hpx_psi":235,
"plot_gpm_1":20,
"plot_gpm_2":30,
"plot_gpm_3":40,
"slip_at_gpm_2":"15%",
"":0,
"flow_range_low":20,
"flow_range_high":40,
"speed_range_low":185,
"speed_range_high":370,
"off_bottom_pressure":31,
"max_diff_pressure_nbr":345,
"max_diff_pressure_nbr_hpx":541,
"stall_diff_pressure_nbr":518,
"stall_diff_pressure_nbr_hpx":851,
"max_torque_nbr":100,
"max_torque_nbr_hpx":157,
"stall_torque_nbr":185,
},
{"id":"1",
"model_number":"BT168565.0",
"rotor_drawing_number":4.01530,
"material":"17-4 PH",
"number_of_lobes":"5/6",
"contour_length":87.00,
"overall_length":93.00,
"major_dia_in":0.990,
"minor_dia_in":0.714,
"rotor_head_dia_in":1.100,
"thread_form":"N/A",
"rotor_weight_lbs":16,
"rotor_ecc":0.0690,
"compatibility_weatherford":"",
"compatibility_r_&_m":"TRUE",
"compatibility_dyna_drill":"",
"compatibility_mono_pv":"",
"compatibility_roper":"TRUE",
"stator_drawing_number":4.01637,
"stator_length_in":99.00,
"stator_contour_in":91.00,
"cutback_top":4.00,
"cutback_end":4.00,
"tube_od":1.6875,
"tube_id_ends":1.38,
"tube_id_middle":1.38,
"stator_number_of_stages":5.0,
"stator_weight_lbs":27,
"std_vector_nbr_55":0.853,
"std_vector_nbr_hp":0.853,
"fit_5_os_vector_nbr_55":0.000,
"fit_5_os_vector_nbr_hp":0.000,
"fit_1_0_os_vector_nbr_55":0.863,
"fit_1_0_os_vector_nbr_hp":0.863,
"fit_1_5_os_vector_nbr_55":0.000,
"fit_1_5_os_vector_nbr_hp":0.000,
"fit_2_0_os_vector_nbr_55":0,
"fit_2_0_os_vector_nbr_hp":0,
"2_us_vector_nbr_55":0,
"2_us_vector_nbr_hp":0,
"fit_1_5_us_vector_nbr_55":0,
"fit_1_5_us_vector_nbr_hp":0,
"fit_1_0_us_vector_nbr_55":0,
"fit_1_0_us_vector_nbr_hp":0,
"fit_5_us_vector_nbr_55":0,
"fit_5_us_vector_nbr_hp":0,
"fit_2_5_os_vector_nbr_55":0,
"fit_2_5_os_vector_nbr_hp":0,
"fit_3_os_vector_nbr_55":0,
"fit_3_os_vector_nbr_hp":0,
"tolerance":0.010,
"nbr_thermal_expansion_coef":0.000190,
"nbr_hp_thermal_expansion_coef":0.000190,
"number_of_stages":5.0,
"rev_per_gal":15.72,
"torque_slope_ft_lb_psi":0.19,
"pressure_per_stage_nbr_55_psi":150,
"pressure_per_stage_nbr_hp_psi":225,
"pressure_per_stage_nbr_hpx_psi":235,
"plot_gpm_1":25,
"plot_gpm_2":40,
"plot_gpm_3":55,
"slip_at_gpm_2":"15%",
"":0,
"flow_range_low":25,
"flow_range_high":55,
"speed_range_low":393,
"speed_range_high":865,
"off_bottom_pressure":67,
"max_diff_pressure_nbr":750,
"max_diff_pressure_nbr_hpx":1175,
"stall_diff_pressure_nbr":1125,
"stall_diff_pressure_nbr_hpx":1851,
"max_torque_nbr":143,
"max_torque_nbr_hpx":223,
"stall_torque_nbr":393,
"stall_torque_nbr_hpx":865
}]
There was formating issue in your question.
Second, you need to use filter function. I have created a filtered object named as selectedObjects and modified the value in the format function and displayed in HTML as follows.
<ion-checkbox ng-repeat="model in models | filter:query" ng-model="order[model.id]" ng-change="format()">{{model.model_number}}</ion-checkbox>
<pre>
current order : {{modifiedOrder}} <br>
selected objects:{{selectedObjects}} </pre>
And JS
This implementation assumes that id is unique in JSON.
$scope.order = {};
$scope.format = function() {
$scope.modifiedOrder = [];
$scope.selectedObjects = [];
angular.forEach($scope.order, function(value, key) {
if (value) {
var filtered = $scope.models.filter(function(unit) {
return unit.id === key
});
$scope.selectedObjects.push({
"overall_length":filtered[0].overall_length,
"contour_length": filtered[0].contour_length
});
$scope.modifiedOrder.push(parseInt(key));
}
});
}
Find sample implementation here.
https://codepen.io/anon/pen/BLNJzB?editors=1010
Good luck.
JSON from flask
I'm trying to fetch data from an url generated with flask not from me with angularjs and restangular.
I have this json data:
{"patients": ["{\"_id\": {\"$oid\": \"5677d634cc18e44063fa3556\"}, \"id_patient\": \"2015120001\", \"last_name\": \"Chiacchiaretta\", \"first_name\": \"Piero\", \"gender\": \"M\", \"birthdate\": {\"$date\": 307238400000}, \"birthplace\": \"PESCARA\", \"codice_fiscale\": \"CHCPRI79P27G482U\", \"address\": \"Via Aldo Moro, 114\", \"city\": \"SAN GIOVANNI TEATINO\", \"province\": \"CH\", \"cap\": \"66020\", \"phone_number\": \"3294946261\", \"email\": \"piero.chiacchiaretta#gmail.com\", \"age\": 36, \"nationality\": \"italiana\", \"status\": \"Attivo\"}", "{\"_id\": {\"$oid\": \"5677d634cc18e44063fa3557\"}, \"id_patient\": \"2015120002\", \"last_name\": \"Guidotti\", \"first_name\": \"Andrea\", \"gender\": \"M\", \"birthdate\": {\"$date\": 418568880000}, \"birthplace\": \"AGRIGENTO\", \"codice_fiscale\": \"GDTNDR83D07A089P\", \"address\": \"Via della Liberazione 55\", \"city\": \"SAN BENEDETTO DEL TRONTO\", \"province\": \"AP\", \"cap\": \"63074\", \"phone_number\": \"3404751719\", \"email\": \"rob.guidotti#gmail.com\", \"age\": 32, \"nationality\": \"italiana\", \"status\": \"Revocato\", \"status_note\": \"Problemi con il medico curante!\"}"]}
I don't know what it means ...
I'm able to get complete object but I can't access to single value/fields...
any suggestion?
Here is how you can decode your response which is an object containing an Array with only one item.
function ctrl($scope){
var data = {
"patients" : ["{\"_id\": {\"$oid\": \"5677d634cc18e44063fa3556\"}, \"id_patient\": \"2015120001\", \"last_name\": \"Chiacchiaretta\", \"first_name\": \"Piero\", \"gender\": \"M\", \"birthdate\": {\"$date\": 307238400000}, \"birthplace\": \"PESCARA\", \"codice_fiscale\": \"CHCPRI79P27G482U\", \"address\": \"Via Aldo Moro, 114\", \"city\": \"SAN GIOVANNI TEATINO\", \"province\": \"CH\", \"cap\": \"66020\", \"phone_number\": \"3294946261\", \"email\": \"piero.chiacchiaretta#gmail.com\", \"age\": 36, \"nationality\": \"italiana\", \"status\": \"Attivo\"}", "{\"_id\": {\"$oid\": \"5677d634cc18e44063fa3557\"}, \"id_patient\": \"2015120002\", \"last_name\": \"Guidotti\", \"first_name\": \"Andrea\", \"gender\": \"M\", \"birthdate\": {\"$date\": 418568880000}, \"birthplace\": \"AGRIGENTO\", \"codice_fiscale\": \"GDTNDR83D07A089P\", \"address\": \"Via della Liberazione 55\", \"city\": \"SAN BENEDETTO DEL TRONTO\", \"province\": \"AP\", \"cap\": \"63074\", \"phone_number\": \"3404751719\", \"email\": \"rob.guidotti#gmail.com\", \"age\": 32, \"nationality\": \"italiana\", \"status\": \"Revocato\", \"status_note\": \"Problemi con il medico curante!\"}"]
};
$scope.patient = angular.fromJson(data.patients[0]);
}
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="ctrl">
<pre>patient.codice_fiscale = {{patient.codice_fiscale | json}}</pre>
<pre>patient = {{patient | json}}</pre>
</body>
</html>
Executing the snippet you can see how can be accessed the "codice_fiscale" field of the patient.