Parsing html ajax result and comparison its data value to dom

Question

I have an ajax call to an action method which returns a partial view with a CarViewModel.

It returns a response with the following format:

Honda
Lovely Car

Forde
Comfortable Car

.cshtml

<h3 data-car-id="@Model.Id">@Model.CarTitle</h3>
<p>@Model.CarDescription</p>

Ajax

success: function (data) {
    $("div").append(result);
}

Before appending result into DOM I need to check the value of data-car-id, if there is a data-car-id in dom with the same value, I'd like to append that specific car differently to one with a unique data-car-id.

I'm struggling to tackle this problem, as data returns multiple cars at once. I imagine I'd somehow need to parse each car within the html into its own variable?

Updated with full Ajax

   $.ajax({
                url: '/Home/GetData/',
                type: "GET",
                success: function (data) {
                    if (data == null) {

                    } else {
                        $(".div").append("<div class='cars'>" + data + </div>");
                    }
                }
            });

When you say that you need to check the value of data-car-id are you saying that you need to pass this value as a parameter as a POST request? Or do you mean that you want to check the result thats returned for a specific value? — Master Yoda, May 14 '18 at 12:45
I want to check the result that's returned for a specific value. For example, when all cars have been fully looped through and inserted into data. Data then contains a html file with with a car title and car description for multiple cars. I then want to get the value of the data attribute with the car title, and then do some sort of dom check before appending the car into the dom - which in itself means I'd have to parse the various cars — , May 14 '18 at 12:59
While you could try to extract data from html, would it not be easier to just return a JSON response instead of full html? It would decrease bandwidth and allow for easier data access. — Toine H, May 14 '18 at 13:00
@ToineH I need to return a partial view so I don't think a JSON response is an option — , May 14 '18 at 13:01
Alright, I don't have any experience with ASP.NET, but if things seem to get messy, or if this needs to be repeated often: I'd recommend using vuejs, as it's a frontend framework that can be hooked to a single element (or multiple if needed) https://stackoverflow.com/questions/46040716/vuejs-2-asp-net-mvc-5?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa — Toine H, May 14 '18 at 13:11

score 0 · Answer 1 · answered May 14 '18 at 12:53

var out_cars=[];
var total_cars=$('.cars').find('h3').length;
for (var i = 0; i < total_cars; i++) {
  var car_name=$('.cars').find('h3').eq(i).text();
  var car_id=$('.cars').find('h3').eq(i).attr('data-car-id');
  var car_desc=$('.cars').find('h3').eq(i).next().text();
  out_cars.push({'car_name':car_name, 'car_id': car_id, 'car_desc':car_desc});
}

/* Further with the received object it is possible to do everything that you want */

console.log(out_cars);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!--  After adding the information your div ('.cars')will look like this:  -->


<div class="cars">
   <h3 data-car-id="01">Honda</h3>
   <p>Lovely Car</p>

   <h3 data-car-id="02">Forde</h3>
   <p>Comfortable Car</p>
</div>

Parsing html ajax result and comparison its data value to dom

1 Answers1