Utilize the Feefo JSON data and convert it to a JavaScript array for rendering as an HTML

Currently diving into the world of Javascript and JSON, but feeling a bit overwhelmed by it all.

Attempting to pull data from a JSON array, I've managed to reach this stage 

$(function(){
    var $reviews = $('#reviews');
    $.ajax({
        type: 'GET',
        url: "https://api.feefo.com/api/10/reviews/all?merchant_identifier=pub-insurance-4u-co-uk&fields=reviews.service.rating.rating,reviews.service.review,reviews.customer.display_name",
        success: function(reviews) {

        $.each(reviews, function(i, review) {
        $reviews.append('<li>name: '+ review.display_name +', review: '+ review.review + ', rating: '+ review.rating + '</li>');
    });
   }
 });
});

Feeling a bit stuck at the moment. I've come across JSON.parse(), could that be the missing piece? Any guidance or advice would be greatly appreciated. Thanks!

javascriptjson

Answer №1

$(function(){
    var $feedback = $('#feedback');
    $.ajax({
        type: 'GET',
        url: "https://api.feefo.com/api/10/feedback/all?merchant_identifier=pub-insurance-4u-co-uk&fields=feedback.service.rating.rating,feedback.service.feedback,feedback.customer.display_name",
        success: function(feedback) {
        //console.log(feedback);
        $.each(feedback.feedback, function(i, review) {
        $feedback.append('<li>name: '+ review.customer.display_name +', feedback: '+ review.service.feedback + ', rating: '+ review.service.rating.rating + '</li>');
    });
   }
 });
});

Exploring the object structure by logging it in the console is a useful approach. This way, you can better understand it and display desired information.

That's exactly what I did :) Here's a glimpse:

https://i.sstatic.net/pAmfc.png

Also, here's the demonstration on JSFiddle: Fiddle

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to destructure props when using getStaticProps in NextJS?

I have been working on an app using Next JS and typescript. My goal is to fetch data from an api using getStaticProps, and then destructure the returned props. Unfortunately, I am facing some issues with de-structuring the props. Below is my getStaticProp ...

javascripttypescriptnext.js

Press the button using the spacebar

I am facing an issue where I have a button with an anchor element that I need to trigger with the spacebar key for accessibility purposes. However, instead of triggering the button, pressing the spacebar causes the page to jump down when the button is in f ...

javascripthtml

Ways to calculate the memory utilization of a JavaScript object

Suppose I want to compare the efficiency of storing bits of a static canvas/image with Alpha more or less than 0.5 using an "array of array of number" versus an "array of string," which would be better in terms of memory usage and speed? var c = $('m ...

javascriptcanvas

Issue with Ajax not sending query string to ASP.NET controller

I am currently working with an Ajax function that serializes data sent from my view into a query string. Here is the code snippet: UpdateFIConfig: function ($appForm) { var valid = $appForm.valid(); //if not valid the validate plugin will take ca ...

javascriptc#ajaxasp.net-mvc

What is causing ES6 Class properties to be concealed by Higher Order Functions?

UPDATE: Added new screenshots to provide clarity at the end. My current challenge involves utilizing high order functions to combine subclasses/mixins. I've noticed that I can only access properties from the first class I extend, and only properties ...

javascriptclassinheritanceecmascript-6functional-programming

Error: The AJAX request encountered an unexpected token in the JSON response

I am working with the following code snippet: $.ajax({ dataType: 'text', url: '/_/js/answers.json', type: "GET", success: function (data) { alert(data); ...

javascriptjqueryajaxjsonsyntax-error

Should we consider using extra url query parameters as a legitimate method to avoid caching or enforce the updating of css/js files?

Is it acceptable to include extra URL query parameters in order to avoid caching or enforce the updating of CSS/JS files? /style.css?v=1 Or would it be preferable to rename the file/directory instead? /style.1.css I've heard that this could potent ...

javascripthtmlcsscachingserver

I am encountering a problem where I lose the values of a nested array of objects when trying to push it into another array

My goal is to format data for use with the amCharts library. The required structure should look like this: data = [{ name: "First", total: 190, children: [ { name: "A1", value: 100 }, { name: &q ...

javascriptarraysfunctionobject

``Where can I find information on setting a timeout for a node.js application

Is it feasible to implement a timeout for running node.js? I am faced with the issue of connecting to external services that occasionally do not respond, causing my script to hang and the node.js process to freeze. I am seeking a solution to enforce the t ...

javascriptnode.js

AngularJS - Retaining the initial value without submitting

On the left side, I have a list of users with corresponding details displayed on the right. The form handles the details on the right using inputs with ng-model. Whenever I click on a user from the left section, the selected user changes and the model auto ...

javascriptangularjs

Retrieve Element By Class Name in JavaScript

How can I modify the border color at the bottom of the .arrow_box:after? Javascript Solution document.getElementsByClassName("arrow_box:after")[0].style.borderBottomColor = "blue"; Despite trying this solution, it seems to be ineffective! For a closer ...

javascripthtmlcss

"Sequencing time with Postgres, manipulating views with Angular

I am encountering issues with displaying graphs in AngularJS. My backend is written in nodeJS and includes an aggregator as a buffer for data received from netdata, which is then inserted into the database using a cron job. Now, with a new client request, ...

javascriptangularjsnode.jspostgresql

"Rails Ajax spinner functions properly in the development environment, but encounters issues in the

I am currently implementing this JavaScript code: verify_link.js ... a=$(this).parent(); a.html('<img src="assets/ajax-loader.gif">'); ... The image file is located in app/assets/images/ajax-loader.gif Everything works fine in de ...

javascriptruby-on-railsajaxruby-on-rails-4asset-pipeline

Encountering a 500 error in Angular while utilizing forkJoin for calling API services

In my Angular 7 project, I have implemented a call in the ngOnInit method to two different API routes to fetch some data using forkJoin. Here is how I have set it up: ngOnInit() { debugger this.route.params.pipe( switchMap(params => for ...

javascriptangularapipipefork-join

Tips for obtaining the dynamically loaded HTML content of a webpage

I am currently attempting to extract content from a website. Despite successfully obtaining the HTML of the main page using nodejs, I have encountered a challenge due to dynamic generation of the page. It seems that resources are being requested from exter ...

javascripthtmlnode.jsphantomjs

Employ the vue.js method within the click EventListener of another method

In my Vue.js script, I have a method that generates an element called 'lens'. Now, I want to include an EventListener that triggers another method when the lens element is clicked. The problem: I have attempted two different approaches to add ...

javascriptvue.js

Utilizing AngularJS for seamlessly closing Bootstrap Modal Popup

Having recently delved into AngularJS, I am seeking assistance with a particular issue; In my AngularJS (v 1.6) application, there is a Bootstrap modal window for user login. Once the user successfully logs in, I wish for Angular to automatically close the ...

javascriptangularjshtmltwitter-bootstrap

The request to localhost resulted in a 404 error, indicating that the resource was not found

When attempting a file upload operation using MV.Net, I encountered the GET http://localhost:55298/Home/test2.json 404 (Not Found) error while trying to upload a file. How can this issue be resolved? <input type="file" name="file" ...

javascriptjqueryasp.netasp.net-mvc

Why don't I need to include an onload event to execute the setInterval() method within the script tag?

Hey there! I'm diving into the world of Javascript and I've come across this interesting code that changes an image every four seconds. Surprisingly, it's working perfectly fine even though I didn't include an onload event to execute th ...

javascript

React throws a "ReferenceError: indexedDB is not defined" but surprisingly, it still manages to function properly

I utilized yarn to install idb-keyval By utilizing the following code, I imported it: import { set } from 'idb-keyval'; Then, I assigned a value to a variable using the following code snippet: set('hello', 'world'); Althou ...

javascriptreactjsnext.js