We Keep Coding

Mixing strings and html links in react/typescript constants

Im trying to mix a string and a link, within an attribute of one variable :
const News = [
{
headline: 'some headline',
text:
"some text" + <a href='url'> click me </a>,
},
];
Im displaying News on another page, when I access the text via news.text though I get following output
some text[object Object]
Following code works fine
const News = [
{
headline: 'some headline',
text:
<a href='url'> click me </a>,
},
];
I have read similar questions, they were quite what I was looking for, since I feel like there has to be a simple solution for this small problem.

if your las example works for you, maybe you could try something like this:
const News = [
{
headline: 'some headline',
text: <span>Some text <a href='url'> click me </a></span>,
},
];
I haven't tested, but is just an idea.
Cheers!

This is handful when mixing HTML tags with variables:
<li className="row"><strong> Alerts: </strong> <br/> {`${user.alerts}`} </li>

How to store values from a particular key from an object into an array - Vue

I have to say, I am new to the whole Vue framework. I have created a selectable table. The data selected from this table is stored in an object. This function should run in the back. So, I think I should run it the computed section. My object looks like this. I am trying to retrieve only the ids. This data is stored in the variable selected.
[ { "id": 5, "name": "CD", "box": "A5", "spot": 1 }, { "id": 2, ""name": "DVD", "box": "A2", "spot": 1 } ]
I would like to only retrieve the values from the key id. These values should be stored in an array. The array should be pushed when the submit button is clicked. I will later use this array to store this information in this array into a database.
You can find my code below. I guess I am missing something because it doesn't seem to work. How should I refer to this function that it runs automatically and that the array can be called in my controller to put it into the database?
Thanks for the help.
Template
<div class="row">
<div class="col-2">
<b-form-input v-model="date" class="form-control" type="date" value="getDate" ></b-form-input>
<pre class="mt-3 mb-0">{{ date }}</pre>
</div>
<div class="col-6">
<b-form-input v-model="description" placeholder="Enter some text"></b-form-input>
<pre class="mt-3 mb-0">{{ description }}</pre>
</div>
<!-- Submit data to db -->
<div class="col-4">
<button class="btn btn-primary custom-button-width" center-block>Request antibody pool</button>
</div>
</div>
JavaScript
data() {
return {
// data from db
data: this.testerdata,
// selected is the object where my selected data is stored.
selected: [],
// here should my id end up
selectedids: {},
description: '',
date: '',
}
},
computed: {
tester() {
var array = [];
for (var test in this.selected) {
if (test == "id") {
array += this.selected[test];
}
}
console.log(array);
}
},
methods: {
storeData: async function() {
axios.post('/panel', {
description: this.description,
date: this.date,
selectedids: this.tester(selectedids)
}).then(function(response) {
console.log(response);
}).catch(function(error) {
console.log(error);
}).finally(function() {
// always executed
});
},
}

The problem is with this line:
array += this.selected[test];
This the way to add an item to an array:
array.push(this.selected[test]);
Additionally, you are trying to loop over properties of this.selected, but it is an array which contains objects and has no properties. Instead, you want to loop over each object item in the array and push the id property.
And, since this.selected is an array, not an object, you should not use a for...in loop-- which is for objects-- because the order will not be guaranteed. You can read more about that in the MDN for...in docs.
You could use a normal for loop or the array's forEach loop. I'll show the forEach:
this.selected.forEach(obj => {
array.push(obj.id);
});

I understand that you might be looking for vanilla Javascript answer here.
However a lot of code can be saved if you can use RamdaJS library to solve such issues.
It has an excellent set of functions like pluck, which will do the same thing in 1 line.
let array = R.pluck('id')(this.selected);

angular 2 - how do I iterate through a JSON response that contains an object which contains an array of objects?

I am using a web api that my friend created, and here is a sample response:
{
types: [
{
id: 1,
contents: [
{
id: 1001,
perishable: 0
},
{
id: 1002,
perishable: 0
}
]
}
]
}
So if I get a response back that has 3 types of things in it, and each of those types has 3 contents, how can I use a repeater in this scenario below? I am able to get the type id correctly, but I am having trouble with repeating over the contents.
<div *ngFor="let type of response.types">
<h2>{{type.id}}</h2>
<!-- here I want to show basically divs for each of the objects in contents -->
<div *ngFor="what should I do here?">
<p>{{content.id}}</p>
<p>{{content.perishable}}</p>
</div>
</div>

<div *ngFor="let type of response.types">
<h2>{{type.id}}</h2>
<div *ngFor="let content of type.contents">
<p>{{content.id}}</p>
<p>{{content.perishable}}</p>
</div>
</div>

Accessing array of objects in an object using Angular

I am trying to have an array of 30 recipes shown on my view with data from an API call.
// app.js
angular.module('recipeApp', [])
.controller('RecipesCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.mainview = [];
$http.get('/API')
.then(function(response) {
$scope.mainview = response.data;
});
// index.html
<html lang="en" ng-app="recipeApp">
<body ng-controller="RecipesCtrl">
{{mainview}} //this outputs the same data shown on the API call.
// when I try 'ng-repeat' nothing shows up at all
// data from API call (this is just a sample of the data. there is really an array of 30 objects in "recipes")
{
"count": 30,
"recipes": [
{
"publisher": "Closet Cooking",
"f2f_url": "http://food2fork.com/view/35382",
"title": "Jalapeno Popper Grilled Cheese Sandwich",
"source_url": "http://www.closetcooking.com/2011/04/jalapeno-popper-grilled-cheese-sandwich.html",
"recipe_id": "35382",
"image_url": "http://static.food2fork.com/Jalapeno2BPopper2BGrilled2BCheese2BSandwich2B12B500fd186186.jpg",
"social_rank": 100,
"publisher_url": "http://closetcooking.com"
},
{
"publisher": "The Pioneer Woman",
"f2f_url": "http://food2fork.com/view/47024",
"title": "Perfect Iced Coffee",
"source_url": "http://thepioneerwoman.com/cooking/2011/06/perfect-iced-coffee/",
"recipe_id": "47024",
"image_url": "http://static.food2fork.com/icedcoffee5766.jpg",
"social_rank": 100,
"publisher_url": "http://thepioneerwoman.com"
},
When I have {{mainview}} in the html, it shows the same as above, but how can I have it so all 30 recipes are looped in the view? I looked into ng-repeat, but I am very new to Angular and couldn't figure it out. Any information on this would be appreciated.

you can use ng-repeat like this:
<body ng-controller="RecipesCtrl">
<ul>
<li ng-repeat="recipe in mainview.recipes">{{recipe}}</li>
</ul>
</body>
It will generate a li element for every recipe in your array. You can access the properties of a recipe using . as you would in javascript.
{{recipe.publisher}}
Note: ng-repeat works with any elements, I used ul and li for show purposes only.

Something like this may help you:
<ul>
<li ng-repeat="recipe in mainview.recipes">
{{recipe.title}}
<br />
- {{recipe.publisher}}
</li>
</ul>

I think you're looking for a view fragment like:
<div data-ng-repeat="item in mainview.recipes">
<div>
<label>Publisher</label><span>{{item.publisher}}</span>
<div>
<div>
<label>Title</label><span>{{item.title}}</span>
<div>
...
</div>
where ... is whatever else you want to display in the view. Documentation at: https://docs.angularjs.org/api/ng/directive/ngRepeat (though I know you've read it (: )

how to bind nested list in an object in angular

I have a list named "posts" that comprises of objects like below.
{_id: "559301710de9c23407b237ee"
author: {user_id: "557c6922925a18a81930d2ce", username: "test"}
comment_id: []
content: "<p>123</p>"
created_at: "2015-06-30T20:52:01.738Z"
image_id: []
like_user_id: ["557c6922925a18a81930d2ce"]
likes: 1
tags: [{_id: "558ded1b8526b45407fd0bb1", tag_name: "1"}, {_id: "559301630de9c23407b237ec", tag_name: "2"},…]
title: "123"}
I want to extract tag_name and show it in html
<a ng-repeat="post in bests" ng-href="/post/{{post._id}}">
<em class="tag">{{post.tags.tag_name}}</em> //This appearently doesn't work!
<span>{{post.title}}</span>
<em class="likes">+{{post.likes}}</em>
<time>{{post.created_at}}</time>
</a>
Everything works fine except for tag_name.
I tried using ng-repeat inside ng-repeat and it doesn't seem to work. how do you do it?

Try
<em class="tag" ng-repeat="tag in post.tags">{{tag.tag_name}}</em>
post.tags is an array so the easiest way to show the tag_names is using ng-repeat...

this works
<em class="tag" ng-repeat="tag in post.tags">{{tag.tag_name}}</em>

tags is in an array therefore you need an index in order to use it
{{post.tags[0].tag_name}}
<em class="tag">{{post.tags[0].tag_name}}</em> //<== sample code that works
|
Your desired index goes here
Alternatively you could iterate using ng-repeat