Lets say I have an array that looks like this:
[{"id":23,"site_id":13, "name":"Test 1","date":"2019-01-26T11:02:18.5661283","category":"some cats"},
{"id":151,"site_id":15, "name":"Test 2","date":"2018-11-04T10:50:53.1756567","category":"some cats"}]
I need to search by site_id in this array and display the found ones:
so I did something like this which doesn't work:
var siteID = 13;
$.each(myArray.filter(
function (el) {
return el.site_id !== siteID ;
}),
function( index, value ) {
var fo = '<p>'+el.name+'</p>';
$('.forms').append(fo);
});
Can someone please advice on this?
You can simply loop through the data to perform this task.
Consider the following code:-
You can add break statement if you're sure that the site_id is unique in object in the data.
let siteId = 13;
let dataRows = [
{"id":23,"site_id":13, "name":"Test 1","date":"2019-01-26T11:02:18.5661283","category":"some cats"},
{"id":151,"site_id":15, "name":"Test 2","date":"2018-11-04T10:50:53.1756567","category":"some cats"}
];
let formElements = '';
for(let data of dataRows){
if(data.site_id == siteId){
formElements += '<p>'+data.name+'</p>';
}
}
$('.forms').append(formElements);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="forms"></div>You can simply use the Array.filter() as below -
filteredArray = myArray.filter((a)=> {return a.site_id === siteID})
Here, we are calling .filter() on myArray and if the condition inside the function stays true, that element is returned otherwise it is dropped.
Outputs as -
Object { id: 23, site_id: 13, name: "Test 1", … }
since only this element's site_id matched the one provided.
Simpler to filter and then map. We want to update the DOM in one go
const arr = [{"id":23,"site_id":13, "name":"Test 1","date":"2019-01-26T11:02:18.5661283","category":"some cats"},
{"id":151,"site_id":15, "name":"Test 2","date":"2018-11-04T10:50:53.1756567","category":"some cats"}]
const mySiteId = 13;
$('.forms').append(
arr
.filter(({site_id}) => site_id !== mySiteId)
.map(({name}) => `<p>${name}</p>`).join("")
)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="forms"></div>