I have this array of objects

[
  {
    "id": "41796005",
    "name": " Manoj ",
    "phoneno": " xyz",
    "email": "[email protected]"
  },
  {
    "id": "160865953",
    "name": " Manisha Sajnani ",
    "phoneno": "xyz",
    "email": "[email protected]"
  }
]

This is the id div's in the html page

<div  data-tuple-id="160865953" ></div>

so my question is that how can i append the id's div phoneno value if both matches

the div's are in the no. of 40

sho how can we loop upon them & append that data to the id which is available in the array

CodePudding user response：

Another possible recipe.

arr.forEach((x) => {
  const elem = document.querySelector(`[data-tuple-id="${x.id}"]`)
  elem.innerHTML = x.phoneno
})

CodePudding user response：

Loop on data and div, compare id and append your data as html on div.

Example:

var data = [{
    "id": "41796005",
    "name": " Manoj ",
    "phoneno": " xyz",
    "email": "[email protected]"
  },
  {
    "id": "160865953",
    "name": " Manisha Sajnani ",
    "phoneno": "xyz",
    "email": "[email protected]"
  }
]
$('.tuple').each(function() {
  var divid = $(this).data("tuple-id");
  var _id = $(this);
  $.each(data, function(key, val) {
    if (divid == val.id) {
      _id.html(val.name   '---'   val.phoneno   '---'  val.email)
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  data-tuple-id="160865953"></div>

CodePudding user response：

1. Loop over the array
2. Use a querySelecto to search for the element
   querySelector(`div[data-tuple-id = "${obj.id}"`)
3. Insert the phone on innerHTML

const data = [{"id": "41796005", "name": " Manoj ", "phoneno": " xyz", "email": "[email protected]"}, {"id": "160865953", "name": " Manisha Sajnani ", "phoneno": "xyz", "email": "[email protected]"} ];

for (let obj of data) {
    const e = document.querySelector(`div[data-tuple-id = "${obj.id}"`);
    if (e) {
        e.innerHTML = obj.phoneno;
    } else {
        console.log('Can\'t find element with the following id', obj.id);
    }
}

<div  data-tuple-id="160865953" ></div>

CodePudding user response：

Maybe this is what you are looking for.

$(".tuple").text(function() {
  var n = d.find(x => x.id === $(this).attr("data-tuple-id"))

  return n ? n.phoneno : "";
})

This will insert the value from phoneno into the div if any match is found

Demo

var d =  [
  {
    "id": "41796005",
    "name": " Manoj ",
    "phoneno": " test",
    "email": "[email protected]"
  },
  {
    "id": "160865953",
    "name": " Manisha Sajnani ",
    "phoneno": "xyz",
    "email": "[email protected]"
  }
]

$(".tuple").text(function() {
  var n = d.find(x => x.id === $(this).attr("data-tuple-id"))

  return n ? n.phoneno : "";
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  data-tuple-id="160865953" ></div>

<div  data-tuple-id="41796005" ></div>
<div  data-tuple-id="23123123" ></div>