Develop Reference

VueJS: JSON objects are not showing in my code

I have API that stores JSON data as shown in JSON body below... I wanted to show the data amount stored in installments but it didn't work good because its showing me each amount value two times and I couldn't figure out the problem here.
{
"response": [{
"floors": [{
"flats": [{
"status": "sold",
"price": "150000",
"currency": "USD",
"end_date": "Not Set",
"buyer": "ella",
"buyer_phone_number": "002822128",
"receipt_number_field": "553108012022",
"size_unit": "M",
"_id": "61d9b61397e87e39832a5abb",
"flat_number": 1,
"description": "This is a newly created flat.",
"city": "NY",
"payment": {
"installment_payment": {
"installments": [{
"amount": "1344",
"date": "2022-01-13",
"is_paid": false
},
{
"amount": "444",
"date": "2022-01-24",
"is_paid": false
},
{
"amount": "44444",
"date": "2022-01-17",
"is_paid": false
}
],
"remaining": "150000"
},
"paid_amount": "1234"
},
"floor": "61d9b61397e87e39832a5aba",
"building": "61d9b61397e87e39832a5ab9",
"size": "176.25",
"directions": " south",
"createdAt": "2022-01-08T16:04:43.557Z",
"updatedAt": "2022-01-08T16:22:29.220Z",
"__v": 0
},
my code:
<div v-for="(flat,index) in Flats" :key="index">
<div v-for="(find,indexT) in flat.payment" :key="indexT" >
<div v-if="flat.payment.installment_payment">
<div v-for="(find,indexT) in flat.payment.installment_payment.installments" :key="indexT">
<div v-if="find.amount >0">
<p> {{find.amount}}$ amount </p>
</div>
</div>
</div>
</div>
</div>
p.S: I stored my API data in array Flats

This will probably work, but it's untested.
You generally do not want to use v-if inside of v-for; instead, you should filter the data first and use the result in the v-for loop. [reference]
Also, since each flat has an _id field, you can use that instead of the index for the top level :key attribute.
<div v-for="flat in flatsWithPayments" :key="flat._id">
<div v-for="(installment, index) in getInstallmentsWithPaymentGTZero(flat.payment.installment_payment.installments)" :key="index">
<p> {{installment.amount}}$ amount </p>
</div>
</div>
Obviously, replace Flats with your data, but also note that in order to compare the payment amount, it needs to be converted with either Number(), parseInt() or parseFloat()
// Flats = { ... }
export default {
computed: {
flatsWithPayments() {
return Flats.filter(f => f.payment != undefined)
}
},
methods: {
getInstallmentsWithPaymentGTZero(installments) {
return installments.filter(i => Number(i.amount) > 0)
}
}
}

integrate dynamic data in react

I'm making a table that has to be dynamic, they are passing me data like this
[
{
"store_name": "daniel",
"store_id": "054050",
"store_address": "av las americas",
"store_logo": "https://centroamerica-resources.s3.amazonaws.com/walmart/express.png",
"occupancy": {
"recluta": 400,
"occupancy": 0,
"percentage": 0
},
"alerts": {
"conglomerations": 0,
"occupancy": 0
},
"visits": 0
},
{
"store_name": "expreso polar",
"store_id": "re485754re",
"store_address": "boulevard california",
"store_logo": "https://centroamerica-resources.s3.amazonaws.com/walmart/express.png",
"occupancy": {
"recluta": 300,
"occupancy": 0,
"percentage": 0
},
"alerts": {
"conglomerations": 0,
"occupancy": 0
},
"visits": 3836
},
]
This is an example of the data that they have given me in a .txt what I need is to show all this data in a table, I have created one with false data but what I need is to make it dynamic that it alone adds more data without need to create more components
for the moment, each data only has to be shown in div
<div class="">
<div class="flex">
<div class="">Name</div>
<div class="">Id</div>
<div class="">Adress</div>
<div class="">Logo</div>
<div class="">Rcluta</div>
<div class="">Ocupancy</div>
<div class="">Percentage</div>
</div>
<div class="flex">
<div class="">{store_name}</div>
<div class="">{store_id}</div>
<div class="">{store_address}</div>
<div class="">{store_logo}</div>
<div class="">{recluta}</div>
<div class="">{occupancy}</div>
<div class="">{percentage}</div>
</div>
</div>

The best practice is that feed data something like this
[
{
data: [
{ name: 'Store Name', value: 'expreso polar'},
{ name: 'Store Id', value: 're485754re'}
]
}
]
name be the label and value be the data needs to shown in the table for corresponding label

This is something very common that I come across while coding and here is what I do.
Im not sure how you are getting your json, whether it be by a fetch or if its hard coded but store it as a json object inside a variable
const [metadata, setMetadata] = useState([])
const data = response.json()
setMetadata(data);
const Table = useMemo(() => metadata.map(
({name, id, tags, address, logo}) => (
<div>
<div>Name: {name}</div>
<div>Id: {id}</div>
<div>Tags: {tags}</div>
<div>Address: {address}</div>
<div>: {logo}</div>
</div>
)
),
[metadata]);
Once you get your metadata in some sort of json format you can simply use the map function to map it all into jsx. Then call it by using <Table/>.
Using useMemo is always a good idea because it will update whenever one of the dependencies changes, in this case metadata.

how to select specific json data and store it into an array in Vue Js?

I am facing issue to store category SINGLES related data into an array and then use this array to display show data.Basically, I just want to store data that is only belong to category "SINGLES" from json file that I named it "data.json" into an array.Can anyone help me please. I would really appreciate that.
Index.html
<div id="app">
<div class="col-lg-4 col-sm-6" v-for="model in jsonSingleData">
<div class="beeton-models-box">
<div class="image-holder">
</div>
<div class="text-box">
<h3>{{model.title}}</h3>
<p>{{model.bedrooms}}</p>
</div>
</div>
</div>
</div>
script.js
var vm = new Vue({
el:'#app',
data:{
jsonSingleData:[]
},
created:function(){
this.fetchDataAll();
},
methods:{
fetchDataAll: function(){
var url="data.json";
axios.get(url)
.then(function(res){
res.data.models.forEach(single=>{
if(single.category=='SINGLES')
{
vm.jsonSingleData=single;
console.log(single);
}
});
});
}
The below is my json file.
data.json
{
"models": [
{
"title": "IRIS",
"project": "ABC",
"category": "SINGLES",
"bedrooms": 3
},
{
"title": "LILAC",
"project": "ABC",
"category": "DOUBLE",
"bedrooms": 4
},
{
"title": "ASTER",
"project": "ABC",
"category": "SINGLES",
"bedrooms": 4
}
]
}

Looks like your method is missing some points. Also, you are missing a } at the end.
Try this:
fetchDataAll: function(){
var vm = this;
var url="data.json";
axios.get(url)
.then(function(res){
res.data.models.forEach((single)=>{
if(single.category=='SINGLES')
{
vm.jsonSingleData.push(single);
console.log(single);
}
});
});
}

How can I add separate width to each name and value that are getting iterated by ng-repeat

How can I add separate width to each name and value that are getting iterated by:
ng-repeat in angularJS
For e.g: This is my data:
[
{
"name": "First Name",
"value": "Harry"
},
{
"name": "Last Name",
"value": "Potter"
},
{
"name": "Gender",
"value": "Male"
},
{
"name": "DOB",
"value": "21/5/1988"
},
{
"name": "SSN",
"value": "298456147"
}]
HTML:
<div>
<div ng-repeat=\ "data in data\">
<div style=\ "float:left\">{{data.name}}</div>
<div style=\ "float:left\">{{data.value}}</div>
</div>
</div>
So, for each name and value I need separate width.
where can I add my width properties?

Add the "track by $index" clause as described in the docs for ng-repeat.
ng-repeat="opt in data track by $index"
Then you can use {{opt.name}} and {{opt.value}} and put them in different html elements with separate styles.

You can create an array of your possible widths like
$scope.widthArray = ['100px','300px','200px']
Then set width like below in ng-repeat on element
ng-style="{width: widthArray[$index]}"
You can arrange your widths as per your requirement in array.

Readout JSON data in different divs

I am absolutely new at this. The plan is to show the data from the JSON file in different divs, because I want to style the divs in different ways.
1) First I want to read out a single line of my JSON, for example:
The HTML:
<div>
<div data-filter="EX_01_Dates"></div>
<div data-filter="EX_01_Name"></div>
<div data-filter="EX_01_City"></div>
</div>
And the JSON:
var data={"events":[
{
"id": EX_01,
"Name":"Event 1",
"City":"City 1",
"Dates":"13-09-2015",
},
]}
2) Second, I want this with different data blocks.
var data={"events":[
{
"id": EX_01,
"Name":"Event 1",
"City":"City 1",
"Dates":"13-09-2015",
},
{
"id": EX_02,
"Name":"Event 2",
"City":"City 2",
"Dates":"15-09-2015",
}
]}
Thats my jsfiddle. Hope someone can help me?

Something like this?
var data={"events":[
{"id": "EX_01", "Name":"Event 1", "City":"City 1", "Dates":"13-09-2015" },
{"id": "EX_02", "Name":"Event 2", "City":"City 2", "Dates":"15-09-2015" }
]};
data["events"].forEach(function(elem) {
for(var key in elem) {
var filter = [elem["id"], "_", key].join("");
$("div[data-filter='" + filter + "']").text(elem[key]);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div data-filter="EX_01_Dates"></div>
<div data-filter="EX_01_Name"></div>
<div data-filter="EX_01_City"></div>
</div>
<div>
<div data-filter="EX_02_Dates"></div>
<div data-filter="EX_02_Name"></div>
<div data-filter="EX_02_City"></div>
</div>
Read about Array forEach and for...in to learn how they work!

I highly recommend you use jsrender for this purpose, there are alot of great articles about it out there. I found the article below very helpful if you dont understand http://www.jsviews.com hope this helps..
https://msdn.microsoft.com/en-us/magazine/hh882454.aspx

First of all it is not clear what exactly you are doing here.
<div id="EX_01">
<div data-filter="EX_01_Dates"></div>
<div data-filter="EX_01_Name"></div>
<div data-filter="EX_01_City"></div>
</div>
<div id="EX_02">
<div data-filter="EX_02_Dates"></div>
<div data-filter="EX_02_Name"></div>
<div data-filter="EX_02_City"></div>
</div>
your javascript code which is now jquery added
var data={"events":[
{
"id": EX_01,
"Name":"Event 1",
"City":"City 1",
"Dates":"13-09-2015",
},
{
"id": EX_02,
"Name":"Event 2",
"City":"City 2",
"Dates":"15-09-2015",
}
]}
$("#EX_01").find("div:nth-child(1)").html(data.events[0].Dates);
$("#EX_01").find("div:nth-child(2)").html(data.events[0].Name);
$("#EX_01").find("div:nth-child(3)").html(data.events[0].City);
$("#EX_02").find("div:nth-child(1)").html(data.events[1].Dates);
$("#EX_02").find("div:nth-child(2)").html(data.events[1].Name);
$("#EX_02").find("div:nth-child(3)").html(data.events[1].City);
you can work around more for dynamic creation or selection of html elements