Fetching information from different JSON files using Ajax

Utilizing ASP MVC4 with Razor2, my goal is to utilize Javascript to fetch JSON data and choose which property to display. Each thread has its own JSON file, and I am showcasing 15 threads at a time. To streamline page load times, I need to retrieve the data incrementally rather than all at once. Since the data is non-sensitive, client-side processing seems appropriate.

Below is the code snippet:


public static PagedList<PiFDetailsModel> GetPagedThreads(int skip, int take)
{
    // Code logic here...
}

[OutputCache(Duration = 60 * 5)]
public static dynamic GetThreadInfo(string thingID)
{
    // Code logic here...
}

Index:


@foreach (var item in Model)
{
    <div class="pif">
        // Code logic for displaying thread details...
    </div>
}

I've searched for examples but haven't found exactly what I need. I believe using JavaScript, possibly JQuery, is the solution. As a newcomer to web development, any detailed example would be greatly appreciated. The project is open source on GitHub, so feel free to fork it for collaboration: https://github.com/sevenalive/PlayItForward

Answer №1

function FetchText(dataId) {
    $.getJSON("http://www.reddit.com/r/playitforward/comments/" + dataId + "/.json?jsonp=?", { id: dataId }, function (result) {
        var textHtml = $('<div/>').html(result[0].data.children[0].data.selftext_html).text();
        $("#selfText-" + dataId).html(textHtml);
    })
}

<div class="description" id="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95e6f0f9f3c1f0ede1b8d5fce1f0f8bbc1fde7f0f4f1dcd1">[email protected]</a>">
                        <script type="text/javascript">
                            $(document).ready(function () { FetchText('@item.ThreadID'); });
                        </script>
            </div>

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

Can I use my local network/browser to download an html file from a webpage as if I manually downloaded it using javascript or nodejs?

As someone who is relatively new to javascript/nodejs and its packages, I have a question about downloading files. Is it feasible for me to download a file using my own local browser or network? Typically, when researching how to scrape or download html ...

Material UI - Exploring the Tree View Component

Seeking advice on structuring server data for utilization with the TreeView component from Material UI: https://material-ui.com/api/tree-view/ I need to efficiently handle large datasets by fetching child nodes dynamically from the server upon user intera ...

Incorporate custom text using jQuery (utilizing fakeloader.js)

Hey everyone, I'm currently working on customizing the loading screen text for fakeLoader.js. Here is the script I have so far: $(".box-loader-screen").fakeLoader({ timeToHide:5200, bgColor:"#3AA9D7", spinner:"spinner5", ...

Creating a personalized instance function in Angular's $resource

When working with AngularJS, all actions for a $resource are added as $customAction methods to the Resource. This allows me to easily invoke them as methods on resource instances. For example: var User = $resource('/user/:userId', {userId:' ...

Display the JSON information within a text input field using React JS

Below is the code I have written in the componentDidMount function: componentDidMount: function() { var url = document.URL; var currentId = url.substring(url.lastIndexOf('?') + 4); // Extracting the current ...

"Everything is running smoothly on one REST endpoint, but the other one is throwing a CORS error

I am currently working on a project that involves a React client app and a Django server app. The React app is running on port 9997 and the server API is on port 9763. While the frontend is able to access some APIs successfully, there are some APIs that ar ...

Top practice concern: Managing data tables and object representations

Would it be more efficient to use a datatable for displaying data in a WPF datagrid along with generated data, or should I also load the data from the database into local C# objects? The classes representing the data perform various calculations. Is it id ...

Struggling to establish configurations with XmlTextReader?

Currently, I am trying to configure the MaxCharactersFromEntities on the XmlTextReader with the following code: xmlDocument = new XmlDocument(); xmlTextReader = new XmlTextReader(fileInfo.FullName); xmlTextReader.Settings = new XmlReaderSettings(); xmlTe ...

"What is the best approach for setting up an Azure Web App to host both an Express static site and API

Setting up an Express app was a breeze for me, but when it comes to deploying it on Azure Web App, I'm hitting some roadblocks! The structure of my app is quite simple: a static web app with its own API. Requests to /website.com/api are forwarded to ...

Error: Sorry, there was an issue with the code (React)

I'm attempting to build a React project without Node, and I'm trying to call a JS file from an HTML file. This is just a simple example for learning purposes. However, I keep encountering the Uncaught SyntaxError: Unexpected token '<&apos ...

Hovering on the navigation bar items triggers special visual effects

Hey there, I'm currently working on a small website and I've run into a tricky issue. I have a navigation bar with dropdowns that should fade in when hovering over the main word on the navigation bar. I've tried various methods but nothing s ...

What is the best way to save the text entered into an HTML input field into a variable in node.js?

Here is a sample of my node.js code: const connect = require('connect'); const serveStatic = require('serve-static'); connect().use(serveStatic("WebDir")).listen(80, function(){ console.log('Server running on port 80...&ap ...

"Node.js: The Importance of Rest for Optimal Performance

Imagine this situation: As part of my cron jobs, I am utilizing an external service that limits requests to every 3600 seconds. This service's API is similar to GetPersonForName=string. I have multiple people in my database and it's necessary to ...

Is it possible to render the v-for value dynamically?

I have a dynamic component and I'm trying to iterate through different objects from it. However, my current code isn't working as intended. Can someone please guide me on how to make the activeQuestion value in v-for dynamic? Thank you for your a ...

I am seeking to redirect to a different page within an ejs template by clicking on a link

I am having trouble navigating to the next page using a link and keep getting a 404 error. I recently switched my template from jade to ejs. <html> <body> <div> <ul style="color:white; float: right;" class="nav navbar-nav ...

Issue with chrome manifest 2 json background not functioning properly

I am currently developing a Chrome app that displays a Twitter search widget. I have encountered an issue where my app works perfectly with manifest version 1, utilizing "background_page" to display the main HTML page effectively. However, when switching t ...

Changing Enum Value to Text

In my enum file, I have defined an object for PaymentTypes: export enum PaymentTypes { Invoice = 1, CreditCard = 2, PrePayment = 3, } When I fetch data as an array from the database, it also includes PaymentType represented as numbers: order: ...

Bring in camera from gltf

Can someone provide guidance on utilizing a camera from gltf within three-js? I am currently implementing the gltf loader as demonstrated in this example. ...

Creating an Action Expression in C# using a code snippet

In my quest to construct an Expression tree that mirrors the following lambda: Action<TFrom, TTo> map = (from, to) => { to.Property1 = (Nullable<TTo>)from.Property1; to.Property2 = (Nullable<TTo>)from.Propert ...

Adjustable positioning and size of dropdown menu (triggered by clicking)

Currently developing the following webpage: https://jsfiddle.net/t9f2ca4n/212/ Check the raw code at the bottom of the page. The issue at hand involves adding two buttons for each line item (Item I or Item II) to display setup details under "Cate ...