searching and looping in an array using javascript or jQuery?

Question

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?

Does this answer your question? [Find a value in an array of objects in Javascript](https://stackoverflow.com/questions/12462318/find-a-value-in-an-array-of-objects-in-javascript) — Gabriel, Oct 12 '21 at 17:36
Please return and interact with the people who spent time helping you — mplungjan, Oct 13 '21 at 04:58

score 2 · Answer 1 · edited Oct 13 '21 at 09:25

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>

score 2 · Answer 2 · answered Oct 12 '21 at 17:45

2

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.

answered Oct 12 '21 at 17:45

Ravi Kumar Gupta

1,698
2
22
38

OP had `!== siteID` – mplungjan Oct 12 '21 at 18:02
True. Anyways, the purpose was to explain the way. Also, the question body mentions `search by site_id` so I would guess OP wanted to filter out the one matching. :) – Ravi Kumar Gupta Oct 12 '21 at 18:17

score 2 · Answer 3 · answered Oct 12 '21 at 17:54

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>

score 1 · Answer 4 · answered Oct 12 '21 at 17:56

you need to do for loop/map
like this :

the array:

var 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"}  
];

for loop:

for (let e of arr){
  if(e.site_id == 15){
    //do something
  }
}

you can also do a switch-case for it

for (let e of arr){
  switch(e.site_id){
    case 15 {
      //do something if the id is 15 
    }
    case 13{
      //do something if the id is 13 
    }
    case 99 {
      //do something if the id is 99
    }
  }
}

score 1 · Answer 5 · answered Oct 12 '21 at 18:45

Just simply loop through the given list and then match using Ngif The following is an example of using JavaScript to loop through an array.

let myArray = ["one", "two", "three", "four"];

     for(let i = 0; i < myArray.length; i++){ 
     console.log(myArray[i]);
}

searching and looping in an array using javascript or jQuery?

5 Answers5