How to Check value in JSON object ionic2 - javascript

How to check "no_cover" value in thumbnail[0] and replace it to asset/sss.jpg for show listpage
I try to set <img src="{{item.LINKS.thumbnail[0]}}"> in Listpage.html ,this show only thumbnail[0] is http://xxx.jpg, http://xxx.jpg , ,But I have no idea to set "no_cover"
myjson
" DOCSET":{
"DOC":[
{
"LINKS":{
"thumbnail":"http://yyy.jpg",
"thumbnail":"http://....jpg"}
}],
"DOC":[
{
"LINKS":{
"thumbnail":"http://xxx.jpg",
"thumbnail":"http://....jpg"}
}],
"DOC":[
{
"LINKS":{
"thumbnail":"no_cover", <<<<
"thumbnail":"http://....jpg"}
}]
}
EDIT - HOW YOUR JSON SHOULD LOOK
Since I (ivaro18) believe you wrote your JSON by hand and did not copy a response object. Let me show you what valid JSON looks like:
{
"DOCSET" : [
{
"DOC" : {
"LINKS" : [
{
"thumbnail" : "http://.....jpg"
},
{
"thumbnail" : "http://.....jpg"
}
]
}
},
{
"DOC" : {
"LINKS" : [
{
"thumbnail" : "http://.....jpg"
},
{
"thumbnail" : "http://.....jpg"
}
]
}
},
{
"DOC" : {
"LINKS" : [
{
"thumbnail" : "no_cover"
},
{
"thumbnail" : "http://.....jpg"
}
]
}
}
]
}
END OF EDIT
listpage.html
<ion-list>
<ion-item *ngFor="let item of foundRepos">
<ion-thumbnail item-left >
<img src="{{item.LINKS.thumbnail[0]}}"> <!--I have no idea to set it -->
</ion-thumbnail>
</ion-list>
list.page.ts
this.http.get("my_url")
.subscribe(data =>{
this.foundRepos = data.json().DOCSET.DOC;
},error=>{
err => console.error(err),
() => console.log('getRepos completed')
);

So, first of all your JSON you've posted was invalid. edited your question with what it probably is (since you are printing it as you say)
What I understand from your problem is the following, you have <img src="{{item.LINKS.thumbnail[0]}}"> but this throws a 404 when no_cover is returned, that's why, when item.LINKS.thumbnail[0] is equal to 'no_cover' you want to show the image assets/sss.jpg
So, how can we use this to show 'assets/sss.jpg' instead of 'no_cover'? It's called the Elvis operator ( ? : )
Let's assume the following construction for an if-statement:
if(expression) {
result = whenExpressionIsTrue
} else {
result = whenExpressionIsFalse
}
Which we can rewrite with the Elvis operator like this:
result = someExpression ? whenExpressionIsTrue : whenExpressionIsFalse
So, let's check out your problem, how can we do this with an if-statement?
if(item.LINKS.thumbnail[0] == 'no_cover') {
someVariable = 'assets/sss.jpg';
} else {
someVariable == item.LINKS.thumbnail[0];
}
Now shorten it with the Elvis operator:
someVariable = item.LINKS.thumbnail[0] == 'no_cover' ? 'assets/sss.jpg' : item.LINKS.thumbnail[0];
Now this can be used in your HTML like so:
<img
[src]="item.LINKS.thumbnails[0] == 'no_cover' ? 'assets/sss.jpg' : item.LINKS.thumbnails[0]"
/>

Related

Getting json fields from json file

I am facing a problem. I have this json log
{
"log": "Log Info : { \"datetime\" : \"datetime\", \"field1\" : \"value1\", \"field2\" : \"value2\", \"field3\" : \"value3\", \"field4\" : \"value4\", \"field5\" : \"value5\", \"field6\" : \"value6\", \"field7\" : \"value7\", \"field8\" : \"value8\", \"field9\" : \"value9\", \"field10\" : \"value10\", \"field11\" : \"value11\"}\n",
"stream": "stdout",
"kubernetes": {
"pod_name": "pod_name",
"namespace_name": "namespace_name",
"pod_id": "pod_id",
"host": "host",
"container_name": "container_name",
"docker_id": "docker_id",
"container_hash": "container_hash",
"container_image": "container_image"
}
}
I need to get all field inside "log" key. These fields will be increased, so I need to get all fields inside log dynamically. I am using this code to parse json, but the output is this. Maybe someone can help me? Thanks.
const readFile = require("fs").readFile;
readFile("log.json", (err, data) => {
if (err) throw err;
const log = JSON.parse(data);
console.log(log);
});
Output:
{
log: 'Log Info : { "datetime" : "datetime", "field1" : "value1", "
field2" : "value2", "field3" : "value3", "field4" : "value4", "field5" :
"value5", "field6" : "value6", "field7" : "value7", "field8" : "value8"
, "field9" : "value9", "field10" : "value10", "field11" : "value11"}\n',
stream: 'stdout',
kubernetes: {
pod_name: 'pod_name',
namespace_name: 'namespace_name',
pod_id: 'pod_id',
host: 'host',
container_name: 'container_name',
docker_id: 'docker_id',
container_hash: 'container_hash',
container_image: 'container_image'
}
}
You need to JSON.parse also the "inner" json (after you clean it from the prefix)
var obj = {
"log": "Log Info : { \"datetime\" : \"datetime\", \"field1\" : \"value1\", \"field2\" : \"value2\", \"field3\" : \"value3\", \"field4\" : \"value4\", \"field5\" : \"value5\", \"field6\" : \"value6\", \"field7\" : \"value7\", \"field8\" : \"value8\", \"field9\" : \"value9\", \"field10\" : \"value10\", \"field11\" : \"value11\"}\n",
"stream": "stdout",
"kubernetes": {
"pod_name": "pod_name",
"namespace_name": "namespace_name",
"pod_id": "pod_id",
"host": "host",
"container_name": "container_name",
"docker_id": "docker_id",
"container_hash": "container_hash",
"container_image": "container_image"
}
}
var str = (obj.log).substring(obj.log.indexOf(':') + 1);
//console.log(str)
var result = JSON.parse(str);
console.log(result)

Retrieve data from the json file in JavaScript and display flower and color in different ul

Retrieve data from the json file in JavaScript and display flower and color in different ul,
i am try to add but trouble here how can i make it,
fetch('dataFiles/midterm.json', {
method: 'GET',
mode: 'no-cors'
})
.then((response) => response.text())
.then((data) => {
//console.log(JSON.parse(data));
//data = response.text();
alert(data);
console.log(data);
document.getElementById("data").innerHTML += "<ul></ul>";
document.getElementById("data").innerHTML += "<ul></ul>";
// Process data
})
.catch ( (err) => { // Process Error
});
// json here
{ "inventory": [
{"type": "flower",
"cars": [
{ "make" : "VW","model" : "Bug","cost" : 24000 },
{ "make" : "GMC","model" : "Suburban","cost" : 18000 }]},
{"type": "color",
"cars": [
{ "make" : "VW","model" : "Jetta","cost" : 25000 },
{ "make" : "Chevy","model" : "Tahoe","cost" : 30000 },
{ "make" : "FORD","model" : "F150","cost" : 29000 },
{ "make" : "HYUNDAI","model" : "Elantra","cost" : 27500 }]}
]
}
Create and add list items
The problem with your code is that <ul> are added, but without any list items <li>. There is nothing to display.
To fix the problem, build an html string from the fetched data. You can do this using an outer and inner forEach loop to display the child array "cars" within each inventory type, i.e., flowers and colors.
You can use template literals to build the html and then display the complete list in the data element as shown.
Snippet
Review and run the snippet to understand how it works.
let data ={"inventory":[{"type":"flower","cars":[{"make":"VW","model":"Bug","cost":24000},{"make":"GMC","model":"Suburban","cost":18000}]},{"type":"color","cars":[{"make":"VW","model":"Jetta","cost":25000},{"make":"Chevy","model":"Tahoe","cost":30000},{"make":"FORD","model":"F150","cost":29000},{"make":"HYUNDAI","model":"Elantra","cost":27500}]}]};
// inside fetch.then(
let html = "";
data.inventory.forEach(item => {
html += `<h4>${item.type}</h4><ul>`;
item.cars.forEach(car => {
html += `<li>${car.make}, ${car.model}, ${car.cost}</li>`;
});
html += "</ul>";
});
document.querySelector("#data").innerHTML = html;
h4 {
background-color: steelblue;
color:white;
padding: 0.2rem;
}
<div id="data"></div>

Return value from firebase database Javascript

My attempts at retrieving the value of a firebase record are failing. My JSON is as follows:
{
"accounts" : {
"-KRPSyO4B48IpBnHBTYg" : {
"dateCreated" : "",
"email" : "",
"provider" : "",
"userId" : ""
}
},
"products" : {
"-KUKRafaNurpFhGF4jQa" : {
"name" : ""
}
},
"total" : 1
}
I'm trying to return the value of "total". Here's the latest attampt:
var totals = firebase.database().ref('total').once('value', function(products) {});
$scope.totalPosts = totals;
and my HTML:
<div class="card" ng-controller="myController">{{totalPosts}}</div>
All I'm getting is an empty {}. What am I doing wrong?
Thanks in advance!
Firebase queries are asynchronous, try this.
firebase.database().ref('total').once('value', function(products) {
$scope.totalPosts = products.val();
});
Read and write Data

Semantic ui search not work

I work with semantic ui and when I do a search on a website the result is empty but when I look at my console I see the json result
this is my js code
$('.ui.search').search({
apiSettings: {
url: "https://api.github.com/search/repositories?q={query}"
},
fields: {
results: 'items',
title: 'name',
url: 'html_url',
description: 'description'
}
});
and my html code
<div class="ui right aligned category search item">
<div class="ui transparent icon input">
<input class="prompt" placeholder="Rechercher" type="text">
<i class="search link icon"></i>
</div>
<div class="results"></div>
</div>
screenshot results in my html page
and i have try the exemple for semantic-ui page
$('.ui.search')
.search({
type : 'category',
minCharacters : 3,
apiSettings : {
onResponse: function(githubResponse) {
var
response = {
results : {}
}
;
// translate GitHub API response to work with search
$.each(githubResponse.items, function(index, item) {
var
language = item.language || 'Unknown',
maxResults = 8
;
if(index >= maxResults) {
return false;
}
// create new language category
if(response.results[language] === undefined) {
response.results[language] = {
name : language,
results : []
};
}
// add result to category
response.results[language].results.push({
title : item.name,
description : item.description,
url : item.html_url
});
});
return response;
},
url: '//api.github.com/search/repositories?q={query}'
}
})
and this is not work
have the same problem as you
debugger and get this:
debug screenshot
it seems will get 'results' field from response, so if your response without 'results' field you need set 'results' in onResponse callback:
apiSettings : {
onResponse (response) {
return {
results: response.myresults
}
}
}
and if you didn't set the templates, it will use the standard template, standard template use 'title' field to show, you need do some transform like this:
response.myresults.forEach((item) => {
item.title = item.name;
})
hope this can help you

Generate JSON from tree structured database

im building an gallery app and i need it to be in tree format , im using the jstree extension to build it , and i need the json to be in this format:
$(function () {
$("#demo1").jstree({
"json_data" : {
"data" : [
{
"data" : "A node",
"metadata" : { id : 23 },
"children" : [ "Child 1", "A Child 2" ]
},
{
"attr" : { "id" : "li.node.id1" },
"data" : {
"title" : "Long format demo",
"attr" : { "href" : "#" }
}
}
]
},
"plugins" : [ "themes", "json_data", "ui" ]
}).bind("select_node.jstree", function (e, data) { alert(data.rslt.obj.data("id")); });
});
and im using this database:
categorys:
id
name
id_father
products:
id
name
price
category_id
please help me guys , >_< , im using an MVC structure in my project and its possible to do things like foreach(modelinstance as model) ...
help i realy need it and i have no idea how to build it
This is the function that I use, youll need CNestedSetBehavior in your model though, I recomend this way of setting up hierarquical data, as it is much faster to retrieve:
protected function formatJstree(){
$categories = $this->descendants()->findAll();
$level=0;
$parent = 0;
$data = array();
foreach( $categories as $n => $category )
{
$node = array(
'data'=> "{$category->title}",
'attr'=>array('id'=>"category_id_{$category->category_id}")
);
if($category->level == $level){
$data[$parent]["children"][] = $node;
}
else if($level != 0 && $category->level > $level){
if(!isset($data[$n]["children"])){
$data[$n]["children"] = array();
}
$data[$parent]["children"][] = $node;
}
else
{
$data[] = $node;
$parent = $n;
}
$level=$category->level;
}
return $data;
}

Categories